First, and most important, remember the Golden Rule: tables are for the use they were intended for, representing tabular data (lists of figures, etc). They are not for layout of graphics and text!

That being said, tables are relatively easy to construct, so long as you remember that they are made up of rows, with each row of the table containing cells. It is vitally important that the cell count on each row is the same. If they are not, horrid results tend to happen.

Tables start very simply, with a <table> tag. Each row in the table is signified by a <tr> tag, and each cell inside this row is listed in order with a <td> tag. All of these tags are nested, so the result looks something like this:

1. <table>
2. <tr>
3. <td>This is the content of cell one</td>
4. <td>This is the content of cell two</td>
5. </tr>
6. </table>

Which produces a table that will look something like this:

The borders of the table are likely invisible in your browser, as this is the default style. Ironically, to make a table look the way we expect, we must use CSS: a solution is provided at the end of this article.

Also note that closing tags for the table cells and rows are optional in HTML5, although it is good practice to include them.

This simple piece of code creates a simple one row, two cell table. Alternatively, you could think of it as a “one row, two column” table. If we add another row, it will alter the code of the table as follows:

1. <table>
2. <tr>
3. <td>This is the content of the first cell in the first row</td>
4. <td>This is the content of the second cell in the first row </td>
5. </tr>
6. <tr>
7. <td>This is the content of the first cell in the second row</td>
8. <td>This is the content of the second cell in the second</td>
9. </tr>
10. </table>

If you’ve used tables in the past, this is probably as far as you’ve gone with them. However, when coding tables as they are meant to be used, there are several table-specific tags that you should know:

<th> is a table header. It is usually used on the first row of a table, to indicate the contents of the columns below:

1. <table>
2. <tr>
3. <th>Processor</th>
4. <th>Speed </th>
5. <th>Benchmark result </th>
6. </tr>

(Note the styling the browser gives the <th> cells in your example).

A caption can also be added to a table. While it can be placed almost anywhere between the opening and closing <table> tags (typically you would place it before the code for the first row), by default the caption will display at the top of the table:

1. <caption>Processor Test Results</caption>

It is also possible to subdivide rows up into sections by using <thead>, <tbody> and <tfooter>, in order to group rows for CSS without using classes or ids.

The other thing to be aware of are two cell-specific attributes - rowspan and colspan. colspan makes one cell “equal to” two or more cells, such as the following example:

1. <table>
2. <tr>
3. <td colspan="2">This is the content of the first cell in the first row,
4. spanning two cells</td>
5. <td>This is the content of the second cell in the first row </td>
6. </tr>
7. <tr>
8. <td>This is the content of the first cell in the second row</td>
9. <td>This is the content of the second cell in the second</td>
10. <td>This is the content of the third cell in the second row </td>
11. </tr>
12. </table>

Note that the count of cells on each row is still the same: the first cell in the first row is now “worth” two cells, making a count of three cells on the first row, matching the second row.

rowspan is similar, except working down through rows, rather than across columns. A cell that has been rowspanned “eats” cells in the rows below, meaning that those rows have fewer defined cells:

1. <table>
2. <tr>
3. <td rowspan="2">This is the content of the first cell in the first row,
4. rowspanned into the second row </td>
5. <td>This is the content of the second cell in the first row </td>
6. </tr>
7. <tr>
8. <td>This is the content of the first cell in the second row</td>
9. </tr>
10. </table>

Note that cells will automatically extend to their maximum width to accommodate whatever content is placed inside them. That limit is determined by the other cells, and the overall width of the table, determined by its associated style.