Tables

HTML tables are still best known for being used and abused to lay out pages. We will come across how to layout a page without tables, in the CSS Intermediate Tutorial. The correct use for tables is to do exactly what you would expect a table to do — to structure tabular data.

There are a number of tags used in tables, and to fully get to grips with how they work is probably the most difficult area of this HTML Beginner Tutorial.

Copy the following code into the body of your document and then we will go through what each tag is doing:


<table>
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
        <td>Row 1, cell 3</td>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td>Row 2, cell 2</td>
        <td>Row 2, cell 3</td>
    </tr>
    <tr>
        <td>Row 3, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 1</td>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>

The table element defines the table.

The tr element defines a table row.

The td element defines a data cell. These must be enclosed in tr tags, as shown above.

If you imagine a 3x4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.