If you have a legitimate need to present data in a tabular format, then you should use the HTML TABLE element and its supporting elements and attributes (like TR, TD, TH and CAPTION). The alternatives (such as using the PRE tag for preformatted text or using style sheets) will actually make understanding of tabular data more difficult for users of assistive technology.
Example of a simple data table created using HTML markup.
| |
Col. 1 header |
Col. 2 header |
| Row 1 header |
C1R1 |
C1R2 |
| Row 2 header |
C2R1 |
C2R2 |
The HTML code used to produce the above table:
<TABLE border=1>
<CAPTION>Example of a simple data table created using HTML markup.</CAPTION>
<TR>
<TD></TD>
<TH>Col. 1 header</TH>
<TH>Col. 2 header</TH>
</TR>
<TR>
<TH>Row 1 header</TH>
<TD>C1R1</TD>
<TD>C1R2</TD>
</TR>
<TR>
<TH>Row 2 header</TH>
<TD>C2R1</TD>
<TD>C2R2</TD>
</TR>
</TABLE> |
The above example is preferable to the using the <PRE> element to layout the data, because future browsers will use the TH and other TABLE markup to logically linearize tables.
Note: If you are using tables for page layout (instead of CSS), then you should NOT use markup reserved for data tables (like TH, HEADER, SCOPE, COLGROUP, etc.) because those elements will be used by some agents to identify and manipulate data). |