- Elements In A Semantic
<table>
axis & headers attributes- add '
id' and 'axis' to <th>s
- add '
headers' to <td>s
<table>
<tr><th></th>
<th id="gu" axis="location">Guthrie</th>
<th id="mc" axis="location">MacFarlane</th></tr>
<tr><th id="t1" axis="time">1.30pm</th>
<td headers="gu t1">Brett, John, David</td>
<td headers="mc t1">Roger</td></tr>
<tr><th id="t2" axis="time">2.15pm</th>
<td headers="gu t2">Dean</td>
<td headers="mc t2">Lisa, Peter</td></tr>
</table>
- Summary of
axis and headers attributes:
- make semantic tables more semantic
- enable styling of semantic rows/columns
- help accessibility as well. see:
The rules attribute, which controls how the dividing borders of the table should be drawn, has five valid values: none, groups, rows, cols, and all. If a value of none—which is the default value—is specified, no lines will be drawn between the cells..
An interesting point to note here is that if you fail to specify a rules attribute, the border-style (using CSS) you've set for colgroup elements or col elements will be ignored. But if you specify a value of none, suddenly the border-style comes to life.
A value of groups will apply a border (gray and beveled in Internet Explorer, one-pixel and black in Firefox and Opera) around each thead, tfoot, tbody, and colgroup. Setting rules to rows or cols will apply a border between each respective row or column. all will apply a border around every cell. Again, if the frame attribute is omitted and rules is set to any value but none , IE breaks from the pack and displays a border around the entire table. As was the case with the frame attribute, Safari doesn't support the rules attribute.
If you wish to use the frame or the rules attribute, it's best to use them together, as frustrating rendering bugs can result if they're used independently.