Tables - Web Development and Design Foundations with XHTML - page 337

The XHTML code for the table follows.
<table summary="This table presents a time sheet. Rows contain days
of the week and the total hours. Columns contain days and hours.">
<caption>Time Sheet</caption>
<thead>
<tr>
<th id="day">Day</th>
<th id="hours">Hours</th>
</tr>
</thead>
<tfoot>
<tr>
<td headers="day">Total</td>
<td headers="hours">18</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="day">Monday</td>
<td headers="hours">4</td>
</tr>
<tr>
<td headers="day">Tuesday</td>
<td headers="hours">3</td>
</tr>
<tr>
<td headers="day">Wednesday</td>
<td headers="hours">5</td>
</tr>
<tr>
<td headers="day">Thursday</td>
<td headers="hours">3</td>
</tr>
<tr>
<td headers="day">Friday</td>
<td headers="hours">3</td>
</tr>
</tbody>
</table>
The example above demonstrates the power of CSS in styling documents. The <td> tags
within each table row group selector ( <thead> , <tbody> , and <tfoot> ) inherited the
font styles configured for their parent group selector. Notice how a descendent selector
(refer back to Chapter 6) configures padding and border only for <td> tags that are
contained within (actually, “children of”) the <tbody> element. A file with the code
shown above is located in the student files (Chapter8/tables/tfoot.html). Take a few
moments to explore the Web page code and display the page in a browser.