Lesson 2: Working with tables CHAPTER 5 233
Declaring the header, footer, and table body
Most browsers automatically wrap all <tr> elements with a <tbody> element to indicate the
body of the table. What would happen if you had a CSS style selector of table > tr? You
wouldn’t get a match because the browser adds the <tbody> element. The selector can be
rewritten as table > tbody > tr instead, or maybe tbody > tr is all you need. It’s good prac-
tice to define the <tbody> element explicitly in every table.
You might also have multiple rows that are to be used as horizontal headers or footers.
You can use the <thead> element to identify rows that are header rows and use the <tfoot>
element to identify rows that are footer rows. The following is an example of the addition of
the <thead>, <tfoot>, and <tbody> elements.
<table>
<thead>
<tr>
<th>Vehicle #</th>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>1957</td>
<td>Ford</td>
<td>Thunderbird</td>
<td>14,000</td>
</tr>
<tr>
<th>2</th>
<td>1958</td>
<td>Chevrolet</td>
<td>Impala</td>
<td>3,000</td>
</tr>
<tr>
<th>3</th>
<td>2012</td>
<td>BMW</td>
<td>Z4</td>
<td>40,000</td>
</tr>
<tr>
<th>4</th>
<td>2003</td>
<td>Mazda</td>
<td>Miata</td>
<td>5,000</td>
</tr>
</tbody>
<tfoot>