th {
background: url(table-header-stripe.gif) 0 50% repeat-x;
text-align: left;
}
5. Set the font and pad the cells. At the moment, the table cell text hugs the borders,
so it needs some padding; the text is also too small to comfortably read, so its size
needs increasing. This is dealt with by adding font-size and padding pairs to the
th, td rule, as shown:
th, td {
border: 1px solid #c9c9c9;
font-size: 1.1em;
padding: 1px 4px;
}
Note that Internet Explorer exhibits slightly quirky behavior when it comes to styling
caption elements, so be sure to thoroughly test any styles you define for this element.
TABLES: HOW NATURE (AND THE W3C) INTENDED
249
6
6. Style the footer. The footer content needs to be easy to differentiate from the
other data cells; you can achieve this by setting a background color for the entire
row within the tfoot element, and then by making the color of the text have less
contrast. Also, centering the text and making it smaller than text within the other
data cells ensures it doesn??™t distract from the main content in the table. Centering
it also provides some balance, because the caption is also centered.
tfoot {
background-color: #dddddd;
color: #555555;
}
tfoot td {
font-size: 1.0em;
text-align: center;
}
Adding separator stripes
One of iTunes??™s best visual features (and something seen in usable tables all over the
Internet, but more often in print and in applications) is missing from the completed table:
colored separator stripes, which assist you in rapidly scanning rows of data.
Pages:
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347