HTML and CSS Reference
In-Depth Information
Table Head, Body, & Foot
The content within tables can be broken up into multiple groups, including a head, a body,
and a foot. The <thead> (table head), <tbody> (table body), and <tfoot> (table foot)
elements help to structurally organize tables.
The table head element, <thead> , wraps the heading row or rows of a table to denote the
head. The table head should be placed at the top of a table, after any <caption> element
and before any <tbody> element.
After the table head may come either the <tbody> or <tfoot> elements. Originally the
<tfoot> element had to come immediately after the <thead> element, but HTML5 has
provided leeway here. These elements may now occur in any order so long as they are nev-
er parent elements of one another. The <tbody> element should contain the primary data
within a table, while the <tfoot> element contains data that outlines the contents of a
table (see Figure 11.4 ).
Click here to view code image
1. <table>
2. <caption>Design and Front-End Development Books</caption>
3. <thead>
4. <tr>
5. <th scope="col">Item</th>
6. <th scope="col">Availability</th>
7. <th scope="col">Qty</th>
8. <th scope="col">Price</th>
9. </tr>
10. </thead>
11. <tbody>
12. <tr>
13. <td>Don&#8217;t Make Me Think by Steve Krug</td>
14. <td>In Stock</td>
15. <td>1</td>
16. <td>$30.02</td>
17. </tr>
18. ...
19. </tbody>
20. <tfoot>
21. <tr>
22. <td>Subtotal</td>
23. <td></td>
24. <td></td>
25. <td>$135.36</td>
26. </tr>
27. <tr>
28. <td>Tax</td>
29. <td></td>
30. <td></td>
Search WWH ::

Custom Search