Working with Tables and Columns - HTML, CSS, and Dynamic HTML - page 362

Creating Banded Rows and Columns
A popular table design is to create table rows of alternating background colors to make
it easier for users to read and locate information in a table. Before CSS3, this could be
accomplished in CSS only by first assigning one class name to even-numbered rows and
another class name to odd-numbered rows, and then applying different background
styles to those classes.
However, with CSS3 you can create banded rows using the nth-of-type pseudo-
class. For example, to create a table in which the background colors alternate between
yellow on the odd-numbered rows and light green on the even-numbered rows, you
could apply the following style rules to your table:
tr:nth-of-type(odd) {
background-color: yellow;
}
tr:nth-of-type(even) {
background-color: rgb(145, 255, 145);
}
The same technique can be used to create banded columns of different background
colors. The style rules
colgroup col:nth-of-type(odd) {
background-color: yellow;
}
colgroup col:nth-of-type(even) {
background-color: rgb(145, 255, 145);
}
format a Web table so that the odd-numbered columns have a yellow background and
the even-numbered columns are displayed against a light green background. Note that
this technique assumes that none of the col elements span more than one column.
Like most CSS3 styles, these techniques might not be supported by older browsers, so
you should design workarounds for those browsers.
Using the Width and Height Styles
Reducing the font size and changing the font family have resulted in a more compact
table, but Kyle thinks it could be diffi cult to read and wonders if you could enlarge
the table. Recall that browsers set table width to use the page space effi ciently, never
making tables wider than necessary to display the content. You can use the CSS width
property to specify a different table size. Widths are expressed in one of the CSS units
of measure or as a percentage of the containing element. Kyle suggests that you set the
width of the table to 100% so that it covers the entire width of the section element that
contains it.