Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

XHTML help: basics – tables, tr, td, th

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 :

Element Description
table The main element that contains all the other table related elements.
tr Creates a row in the table
td Creates a cell in a row
th Creates a table header in a row

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 :

Relevance Website URL
100% XHTML Tips HTML Help
75% eLiteracy Internet Safety

This entry was posted on Wednesday, May 30th, 2007 at 3:17 pm and is filed under HTML help, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.