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
).
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’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