HTML and CSS Reference
In-Depth Information
</tr>
<tr>
<th scope="row">Smoke Pellets</th>
<td>623</td>
<td>$4.99</td>
<td>$3,108.77</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Totals</th>
<td>659</td>
<td></td>
<td>$6,438.41</td>
</tr>
</tfoot>
</table>
The browser's output of this code is identical to that in Figure 7-10. The CSS in Listing 7-24 includes some
styling for our newly created column groups. For this example, we've dropped the borders on cells, left out
background colors on even rows, and omitted the
empty-cells
rule.
Listing 7-24.
CSS with additional styling for column groupings
table {
width: 600px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
border-collapse: separate;
border-spacing: 5px;
table-layout: auto;
}
thead th,
tfoot th,
tfoot td {
background: #eee;
}
th,
td {
padding: 10px;
}
thead th:first-child {
text-align: left;
}
tbody th,
tfoot th {
text-align: left;
}
