Thursday, October 18, 2007

Tables

It is perfectly fine to use tables in your web pages as long as they used to display tabular data such as:

  • Calendars

  • Spreadsheets

  • Charts

  • Schedules


Items such as the ones listed above are what the <table> tag was created for. It would take too much CSS to get these to look right without the table tag.
Things to consider
One drawback to a poorly coded table is it can be inaccessible to some of your viewers. To avoid this try some of the following techniques.
Adding a summary
This is great for your visitors who can't see you page by giving explaining the purpose and contents of your table. To add a summary to your table simply follow this format:
<table summary="This table is a chart of all the Oregon Ducks wins this season.">
Inserting a Caption

Adding headers to your table
Table headers are great b/c default table headers are bold and centered. It also gives us a way to easily style the headers without using extra markup. Table headers are created by using the <th> tag rather than <td> tag.
Header and data relationships
By adding an ID to the header tables are even easier for screen readers to understand this helps associate table data with a table header. By organizing your table this way your non-visual visitors will be able to understand your table much better.
<th id="date">Date</th>

<td headers="date">Sept.28</td>

No comments: