Tables

The table element is the root element for creating a table. All the other elements in this section must be children of this element.

Here is a simple example of the table element:

<table>
    <tr>
        <td>Column in Row 1</td>
    </tr>
</table>

The caption element will be the title of the table. This element must be the first child of the table element.

Here is a simple example:

<table>
    <caption>Caption for the table</caption>
    <tr>
        <td>Column in Row 1</td>
    </tr>
</table>

The span attribute states the number of columns the group spans.

The colgroup element is used to define styles that are common to all columns or groups of columns. This element is not as useful as it once was as the new CSS selectors can target all the columns and even some specific columns.

The tbody attribute is the main part of a table. All of the data rows and columns should go in this element. This element should have one or more tr elements as its children.

Here is an example:

<table>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
</table>

The thead element is the row that has all of the column headings. It must appear before the tbody or tfoot elements.

Here is an example:

<table>
    <thead>
        <tr>
            <th>Heading 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
</table>

The tfoot element is the footer for the table. It must be used after any thead elements, but can be either before or after tbody. The placement of the tfoot element does not affect where it is rendered, which is always at the bottom.

Here is an example:

<table>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
        </tr>
    </tfoot>
</table>

The tr element is the row element. Every time you need another row in a table, use this element. This element can be the child of a table, tbody, thead, or tfoot element. You must use either a td or th as its child.

Here is an example:

<table>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
</table>

The attributes that are used in the td element are as follows:

The td element is the basic table column element. The colspan and rowspan attributes allow you to make the column wider and taller, respectively.

Here is an example:

<table>
    <tbody>
        <tr>
            <td>Column in Row 1</td>
        </tr>
    </tbody>
</table>

The attributes that are used in the th element are as follows:

The th element is used when we add a column to the thead element.

Here is an example:

<table>
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
</table>