Checklist for tables

This is what you should quickly check for when creating a table.

This is mostly about XHTML, but some CSS has been added to give an good example.

Summary

A table should contain a summary that describes what it contains. This to help users with screen readers understand what the table contains.

Caption

The caption is used for explaining what the tables contains. It is a short version of the summary. I usally use this as the table heading.

Table heading (th)

Table headings are used to tell what the column heading are for.

Scope

Should be used in conjunction with the table headings. This tells if the table headings are horisontal or vertical.

Table head (thead)

To group the tableheaders. Great example is when printing. If the table spans over more than one printed page. The thead can be automatically printed in the top of every page.

Table footer (tfoot)

To group the footer of the table. This should be used after the thead in the code. It will be rendered for screen at the bottom of the table. This is mostly used for helping screen readers so they do not need to go through the table to get the total, which most of the time is in the bottom right cell. See this example and try print preview.

Table body (tbody)

To group the body of the table where all the content belongs.

Colgroup

Optional, used to group columns into units.

Col

Optional, used in conjuntion with colgroup.

Example

To see the table with some style applied to it.

Code example

1. <table cellspacing="0" summary="This an example of an table.">
2. <caption>
3. Table example
4. </caption>
6. <colgroup>
7. <col />
8. <col />
9. <col />
10. </colgroup>
12. <thead>
13. <tr>
14. <th scope="col">Products</th>
15. <th scope="col">Type</th>
16. <th scope="col" class="alignright">Price</th>
17. </tr>
18. </thead>
20. <tfoot>
21. <tr>
22. <td>Total</td>
23. <td> </td>
24. <td class="alignright">27.00$</td>
25. </tr>
26. </tfoot>
28. <tbody>
29. <tr>
30. <td>Salmon</td>
31. <td>Fish</td>
32. <td class="alignright">10.00$</td>
33. </tr>
35. <tr>
36. <td>Chicken</td>
37. <td>Bird</td>
38. <td class="alignright">5.00$</td>
39. </tr>
41. <tr>
42. <td>Lamb</td>
43. <td>Meat</td>
44. <td class="alignright">12.00$</td>
45. </tr>
46. </tbody>
48. </table>

Related Posts:

• None

External links

• tmobile

This entry was posted on Tuesday, December 7th, 2004 at 4:28 pm and are tagged with: none. You can follow any responses to this entry through the RSS 2.0 feed. Listen to this post Digg this post at del.icio.us, Technorati, Digg, Slashdot. You can leave a response, or trackback from your own site.