The <thead>, <tbody>, and <tfoot> Tags
These three tags can do a lot to make your tables more accessible. They are primarily used as identifiers to define the sections of a table, but with CSS you can also use them to style various parts of a table. They also work well with print versions of an HTML document, as you can do things like define elements in the thead or tfoot to appear at the top and bottom of every page the table prints on.
<thead>
The thead or table header tag defines the rows in a table that should appear at the top of the table. If the table is split across multiple pages (such as in a print-out) the rows in the table head should be displayed at the top of each page. Keep in mind, however that IE 6 does not support repeating the thead across multiple pages of printed tables.
It's a good idea to define your thead elements at the beginning of your table, so that the rendering engine can display them as quickly as possible. In large tables, this can make the page appear to load more quickly.
<table style="width: 400px; border: 1px solid #000; caption-side: bottom;" summary="This table will provide a list of the amount of fur shed by Jennifer's dog Shasta. In this table, the fur is measured by month and displayed in one level of column headings">
<caption align="bottom">Table 1.1: A record of the fur shed annually by Jennifer's dog Shasta</caption>
<thead>
<tr><th>Month</th><th>Fur Shed (mm)</th></tr>
<thead>
<tbody>
<tr><td>January</td><td>13</td></tr>
<tr><td>February</td><td>16</td></tr>
<tr><td>March</td><td>22</td></tr>
<tr><td>April</td><td>20</td></tr>
<tr><td>May</td><td>19</td></tr>
<tr><td>June</td><td>10</td></tr>
<tr><td>July</td><td>6</td></tr>
<tr><td>August</td><td>8</td></tr>
<tr><td>September</td><td>14</td></tr>
<tr><td>October</td><td>18</td></tr>
<tr><td>November</td><td>26</td></tr>
<tr><td>December</td><td>19</td></tr>
</tbody>
</table>
You can use any standard style properties to style the cells and rows in the table head.
- Page 1 - The caption Tag
- Page 2 - The summary Attribute
- Page 3 - The thead Tag
- Page 4 - The tbody Tag
- Page 5 - The tfoot Tag
Did you find this article useful or interesting? Post a comment.
