Sooner or later you will need to create a table of some sort. There are lots of options for displaying tabular data in XHTML so first lets look at basic HTML tables.

A table is made up of several basic markup tags which provide a structured hierarchy to your data :

Here is an example of the basic markup for some search engine results:

<table>
<tr>
<th>Relevance</th>
<th>Website</th>
<th>URL</th>
</tr>
<tr>
<td>100%</td>
<td>XHTML Tips</td>
<td><a href=”http://www.xhtmltips.co.uk/”>HTML Help</a></td>
</tr>
<tr>
<td>75%</td>
<td>eLiteracy</td>
<td><a href=”http://www.eliteracy.co.uk/”>Internet Safety</a></td>
</tr>
</table>

As you can see there is one row of headers and two rows of data. It is possible to omit the row of headers using a row of regular cells instead but there is a downside to doing so. When someone with a screen reader, or alternate browser views a table that does not have headers the data becomes very confusing.

For example, the data above would be read sequentially like so “Relevance Website URL 100% XHTML Tips HTML Help 75% eLiteracy Internet Safety”.

By using headers it can be logically read as “Relevance: 100% Website: XHTML Tips URL: HTML Help Relevance: 75% Website: eLiteracy URL: Internet Safety”. Table headers provide additional structure to the data and allow interpretation to be done which improves accessibility.

For info the sample table will look like this :