Tables

Tables are useful for showing data. They make defining rows and columns very easy. In the past, tables were used to create layouts, but today, that is done with CSS. They should be used to only display the tabular data.

table

The syntax of the table element is as follows:

<table></table>

Description

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>

caption

The syntax of the caption element is as follows:

<caption></caption>

Description

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>

colgroup

The colgroup element is the column group element:

<colgroup span></colgroup>

Attributes

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

Description

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.

tbody

The tbody attribute is the table body element:

<tbody></tbody>

Description

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>

thead

The thead element is the table head element:

<thead></thead>

Description

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>

tfoot

The tfoot element is the table footer element:

<tfoot></tfoot>

Description

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>

tr

The tr element is the table row element:

<tr></tr>

Description

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>

td

The td element is the table cell element:

<td colspan headers rowspan></td>

Attributes

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

• colspan: This tells how many columns it will span as an integer
• rowspan: This tells how many rows the rowspan attribute will span as an integer
• headers: This is a space-separated list of strings that match the ID of any th element

Description

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>

th

The th element is the table header cell element:

<th colspan rowspan></th>

Attributes

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

• colspan: This states the number of columns the colspan attribute will span as an integer
• rowspan: This states the number of rows the rowspan attribute will span as an integer

Description

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>