Tutorials - HTML - Tables

HTML Tables can seem quite confusing at first, but once you practice with them a little you'll probably find that they are quite simple. A table rests between <table> and </table> tags, which indicate the start and the end of the table. You start and end rows within the table using <tr> and </tr>, and start and end cells within a table row using <td> and </td> tags. Here is an example of a simple 2x2 table.

<table border="1">
    <tr>
        <td>
            Row 1, Cell 1
        </td>
        <td>
            Row 1, Cell 2
        </td>
    </tr>
    <tr>
        <td>
            Row 2, Cell 1
        </td>
        <td>
            Row 2, Cell 2
        </td>
    </tr>
</table>

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

As you can see, the content is placed within the <td> element, whereas the other elements are used solely for the purpose of the table layout. The border attribute in the <table> specifies the width of the border around each cell.

Cell Spacing and Padding

You can use cell spacing and padding to adjust the amount of white space in your table. Cell spacing defines the amount (in pixels) of space between each cell, and padding defines the distance between the border of the cell and the content within it.

<table bgcolor="#00FF00" cellspacing="10" border="1">
    <tr>
        <td>
            Row 1, Cell 1
        </td>
        <td>
            Row 1, Cell 2
        </td>
    </tr>
    <tr>
        <td>
            Row 2, Cell 1
        </td>
        <td>
            Row 2, Cell 2
        </td>
    </tr>
</table>

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

<table bgcolor="#00FF00" cellpadding="10" border="1">
    <tr>
        <td>
            Row 1, Cell 1
        </td>
        <td>
            Row 1, Cell 2
        </td>
    </tr>
    <tr>
        <td>
            Row 2, Cell 1
        </td>
        <td>
            Row 2, Cell 2
        </td>
    </tr>
</table>

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Table Headers

You can use the <th> element to add headers to your table. By default, these are bold, and act much in the same was as table cells, but have further meaning for people using accessibility devices.

<table border="1">
    <tr>
        <th>
            Column 1
        </th>
        <th>
            Column 2
        </th>
    </tr>
    <tr>
        <td>
            Row 1, Cell 1
        </td>
        <td>
            Row 1, Cell 2
        </td>
    </tr>
    <tr>
        <td>
            Row 2, Cell 1
        </td>
        <td>
            Row 2, Cell 2
        </td>
    </tr>
</table>

Column 1	Column 2
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Spanning rows and columns

You can use the rowspan="x" and colspan="x" to span cells across multiple rows and columns. This is one of the trickier things to do with tables, as it means working out which cells will span before writing your table. Here's an example:

<table border="1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
    </tr>
    <tr>
        <td rowspan="2">Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
        <td>Row 1, Cell 4</td>
        <td>Row 1, Cell 5</td>
    </tr>
    <tr>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
        <td>Row 2, Cell 4</td>
        <td>Row 2, Cell 5</td>
    </tr>
    <tr>
        <td colspan="3">Row 3 Cell 1</td>
        <td colspan="2">Row 3 Cell 2</td>
    </tr>
</table>

Column 1	Column 2	Column 3	Column 4	Column 5
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3	Row 1, Cell 4	Row 1, Cell 5
Row 1, Cell 1	Row 2, Cell 2	Row 2, Cell 3	Row 2, Cell 4	Row 2, Cell 5
Row 3, Cell 1			Row 3, Cell 2

As you can see, tables can be incredibly powerful in making layout for your website: in fact, almost every major website uses tables for some aspect of their layout, combining them with floating divs to create the complex layouts you see today. We'll look at some simple table based layouts for your entire website later in these tutorials.

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.