<table> elements are often maligned by the web standards savvy developer who equates them with the bad old days of table based layout.
This has the unintended consequence that such a developer won’t know how to best use a <table> for its proper purpose of displaying data. This article aims to fix this problem by going through the elements and attributes which can help make a data table more accessible, render faster, and make it easier to interpret.
<table summary="The summary attribute is used only when the user is unable to see the actual table – use it to provide additional information summarizing the purpose and structure of the table." cols="4" >
A table must begin with a table opening tag. It is highly recommended that the summary attribute be used and using the col attribute is alleged to help browsers render tables faster by incrementally displaying the table before all of the data has been received
<caption>Sample Caption Text</caption> When present (highly recommended), the <caption> element’s text should describe the nature of the table.
The <caption> element is only permitted immediately after the <table> start tag (and is generally displayed at the top of a table by visual browsers). A <table> element may only contain one <caption> element.
Using the align attribute in a <caption> has been decrecated (highly discouraged) in HTML 4.x & XHTML 1.0 and is illegal in XHTML 1.1 so use CSS instead
<thead></thead> ,<tbody></tbody> and <tfoot></tfoot> are used to group table rows into header, body and footer sections respectively.
If you use </thead>, it must appear before the <tfoot> and <tbody> sections. For some reason unknown to me, the W3C requires a <tfoot> section to be used before the body section(s).
The <thead></thead> and <tfoot></tfoot> section markers are optional, but one or more TBODY sections are always required.
If present, each<thead></thead>, <tbody></tbody> and <tfoot></tfoot> element must contain one or more <tr> (table rows).
- Make sure column/row headings are marked up using the <th></th> (table header) element because this associates the headers with their column/row of table cells (<td></td>).
- To more explicitly link headers with their column/row of table cells <td></td>) use the technique described under the heading Linking headers to data: the scope, id and headers attributes at Roger Johansson’s site 456 Berea Street
- </table> – A table must end with a table closing tag
|Copyright © Fictional Motor Dealers|
Source code for Table Following Article Suggestions
<table summary="An example table using all the elements and attributes suggested in the article above" cols="3" >
<caption>Table Following Article Suggestions</caption>
<th scope="col">Engine Size</th>
<tr><td colspan="3">Copyright © Fictional Motor Dealers</td></tr>
- Blooberry – The Advanced HTML/CSS Resource
- Pragmatic Semantics
- Techniques for Accessible HTML Tables (emphasis on US section 508 law)
- Bring on the tables