How to Make HTML Tables

or: The Art of HTML Tables

HTML Tables are hard to do. So hard, in fact, that visual, WYSIWYG tools do a terrible job of creating them.

But with a little help, you can create tables that look great and are also accessible to everyone.

The Basics

{code type=html}<table summary=""><!– the table begins –>
<caption></caption>
<tr><!– the first table row begins –>
<td><!– the first table cell begins –>
</td><!– the first table cell ends –>
</tr><!– the first table row ends –>
</table><!– the table ends –>{/code}

It’ll look a little something like this:



Caption!
First Cell!

This is the simplest possible table structure. It’s a table, with one row, containing one cell.

If this is the table you want, don’t use a table! There’s no point to it. Just leave the whole table out of there; it’s useless, empty code. You would only use a table if you have at least two columns of data to add. To add another column, add another cell in the row.

{code type=html}<table summary=""><!– the table begins –>
<caption></caption>
<tr><!– the first table row begins –>
<td><!– the first table cell begins –>
</td><!– the first table cell ends –>
<td><!– the second table cell begins –>
</td><!– the second table cell ends –>

</tr><!– the first table row ends –>
</table><!– the table ends –>{/code}

This gives us a second column:



Caption!
First Cell! Second Cell!

Headings

Headings are very important. They identify what each column or row signifies. Signify a heading cell by labelling it <th> (table heading). Often (but not always) table headings will appear in bold type.

Often, the headings are at the top of each column. E.g.:

{code type=html}<table summary="Pizzas and their toppings"><!– the table begins –>
<caption>Pizzas and their toppings</caption>
<tr><!– the first table row begins –>
<th>Pizza<!– the first table cell begins –>
</th><!– the first table cell ends –>
<th>Toppings<!– the second table cell begins –>
</th><!– the second table cell ends –>

</tr><!– the first table row ends –>
<tr><!– the second table row begins –>
<td>Hawaiian<!– the third table cell begins –>
</td><!– the third table cell ends –>
<td>Ham and Pineapple<!– the fourth table cell begins –>
</td><!– the fourth table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the third table row begins –>
<td>Simple Bliss<!– the fifth table cell begins –>
</td><!– the fifth table cell ends –>
<td>Spinach and Feta<!– the sixth table cell begins –>
</td><!– the sixth table cell ends –>
</tr><!– the third table row ends –>
</table><!– the table ends –>{/code}





Pizzas and their toppings
Pizza Toppings
Hawaiian Ham and Pineapple
Simple Bliss Spinach and Feta

Sometimes the headings are down the left column.

{code type=html}<table summary="Events in 2009"><!– the table begins –>
<caption>Events in 2009</caption>
<tr><!– the first table row begins –>
<th>May<!– the first table header begins –>
</th><!– the first table header ends –>

<td>Amazing event<!– the second table cell begins –>
</td><!– the second table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the second table row begins –>
<th>June<!– the third table header begins –>
</th><!– the third table header ends –>

<td>Amazing event<!– the fourth table cell begins –>
</td><!– the fourth table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the third table row begins –>
<th>July<!– the fifth table header begins –>
</th><!– the fifth table header ends –>

<td>Amazing event<!– the sixth table cell begins –>
</td><!– the sixth table cell ends –>
</tr><!– the third table row ends –>
</table><!– the table ends –>{/code}

You’ll notice that the headings are the first cell in each row this time.





Events in 2009
May Amazing event
June Amazing event
July Amazing event

Sometimes the headings are along both the top row and the left side.

{code type=html}<table summary="Events in 2009"><!– the table begins –>
<caption>Events in 2009</caption>
<tr><!– the first table row begins –>
<th>May<!– the first top table header begins –>
</th><!– the first top table header ends –>

<th>Amazing event<!– the second top table header begins –>
</th><!– the second top table header ends –>
</tr><!– the first table row ends –>
<tr><!– the second table row begins –>
<th>June<!– the second left table header begins –>
</th><!– the second left table header ends –>

<td>Amazing thing!<!– the fourth table cell begins –>
</td><!– the fourth table cell ends –>
</tr><!– the first table row ends –>
<tr><!– the third table row begins –>
<th>July<!– the fifth table header begins –>
</th><!– the fifth table header ends –>

<td>Amazing thing!<!– the sixth table cell begins –>
</td><!– the sixth table cell ends –>
</tr><!– the third table row ends –>
</table><!– the table ends –>{/code}





Events in 2009
May Amazing event
June Amazing thing!
July Amazing thing!

Important components

The Summary is there to provide information for visually impaired users. It will read out to them exactly what the table is for. So, for example, you might say

{code type=html}<table summary="List of Courses in the Nursing Program">{/code}

or

{code type=html}<table summary="Tuition and Fees by Program">{/code}

Caption is used for a similar purpose, but for everyone. You can repeat the summary or add something different.

{code type=html}<caption>List of Courses in the Nursing Program</caption>{/code}