HTML and CSS Reference
In-Depth Information
3. Wrap the remaining table rows in a pair of
<tbody>
tags:
</thead>
<tbody>
<tr>
<th>Jan</th>
<!-- Many lines omitted -->
<td>125.3</td>
</tr>
</tbody>
</table>
4. in the style sheet, add the following rule to give the table a width, set its borders to
collapse, and reduce the size of the font:
table {
width: 650px;
border-collapse: collapse;
font-size: 14px;
}
5. Move the caption to the bottom of the table, give it some padding to move it away
from the bottom row, render it as small caps, and increase its font size like this:
caption {
caption-side: bottom;
padding-top: 1em;
font-variant: small-caps;
font-size: 18px;
}
6. give the table headers a top and bottom border (see Figure
14-26
). Although
modern browsers allow you to apply borders directly to the
<thead>
element, use a
descendant selector to apply the borders to the individual
<th>
cells to keep older
browsers happy.
thead th {
border-top: 2px #35478C solid;
border-bottom: 2px #35478C solid;
}
