HTML and CSS Reference
In-Depth Information
Figure 7-10.
It's not much to look at, but it's a serviceable table.
Adding just the little bit of CSS, shown in Listing 7-22, will have a dramatic effect on the display of the
table.
Listing 7-22.
Basic CSS for the table structure detailed in Listing 7-21
table {
width: 600px;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
border-collapse: separate;
border-spacing: 10px 5px;
table-layout: auto;
empty-cells: hide;
}
thead th,
tfoot th,
tfoot td {
background: #eee;
}
th,
td {
border: 1px solid #ccc;
padding: 10px;
}
thead th:first-child {
text-align: left;
}
tbody th,
tfoot th {
text-align: left;
}
tbody tr:nth-child( even ) {
background: #ddd;
}
Before diving into the particulars of the CSS you've just seen, take a look at the results in Figure 7-11. In
this example we're using basic element selectors, which means that these styles will be applied to
all
