HTML Tables Tutorial

1. Basic Table Structure

The basic structure of an HTML table includes the following elements:

• <table>: Defines the table.
• <tr>: Defines a table row.
• <td>: Defines a table cell (data).
• <th>: Defines a table header cell.

Here’s an example of a simple table:

Edit Copy

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>25</td>
    </tr>
</table>
                    

2. Table Attributes

HTML tables can be enhanced with various attributes:

• border: Specifies the border width of the table.
• cellpadding: Defines the space between the cell content and its borders.
• cellspacing: Defines the space between table cells.
• width: Sets the width of the table.

Example with attributes:

Edit Copy

<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>$1</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.50</td>
    </tr>
</table>
                    

3. Table Header, Body, and Footer

For better structure and styling, you can use the following elements:

• <thead>: Groups the header content in a table.
• <tbody>: Groups the body content in a table.
• <tfoot>: Groups the footer content in a table.

Example using <thead>, <tbody>, and <tfoot>:

Edit Copy

<table border="1">
    <thead>
        <tr>
            <th>Course</th>
            <th>Duration</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML Basics</td>
            <td>2 weeks</td>
        </tr>
        <tr>
            <td>CSS Fundamentals</td>
            <td>3 weeks</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total Courses</td>
            <td>2</td>
        </tr>
    </tfoot>
</table>
                    

4. Styling Tables with CSS

CSS can be used to style tables, making them visually appealing. Here’s a simple CSS example:

Edit Copy

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f4f4f4;
}
                    

This CSS will style the table to have borders and padding, and it will also apply a background color to header cells.

5. Conclusion

Tables are a powerful way to display data in HTML. By understanding the structure, attributes, and styling options available, you can create well-organized and visually appealing tables for your web pages.