HTML and CSS Reference
Figure 14-28. The table now looks much more visually attractive and easier to read
The hover effect isn't intended to work on touch screens. (Have you ever tried hovering your finger over your
mobile phone or tablet?) in my tests, nothing happens if you tap a row on an iPad. On an Android tablet,
though, the row does change color.
in iE 8 and older browsers, the table doesn't have alternate colored rows, but the columns are evenly spaced
and the data is correctly aligned. iE 6 doesn't support the :first-child pseudo-class, so the first column is
the same width as the others, and the text isn't left-aligned, but the table is presentable.
If you've been using the HTML cellspacing attribute, the border-collapse and border-spacing properties
offer much greater control over the horizontal and vertical spacing between cells. There's no direct equivalent
of cellpadding , but table cells handle padding in the same way as the CSS box model, giving you the freedom to
adjust it independently on each side of a cell. Other advantages of styling tables with CSS include the ability to
style all of a table's internal and external borders independently, to move the caption below the table, and to hide
You can also control the width of columns by setting the table-layout property to fixed . This fixes
the width of each column according to the width of the cells in the first table row. However, it's important to
remember that borders and padding are not added to the overall width of a table.
The CSS3 :nth-child() and related pseudo-classes discussed in Chapter 13 make it considerably easier to
style columns without the need to declare them as <colgroup> and <col> elements in the HTML markup. You
can also use these pseudo-classes to assign different backgrounds to alternate rows and/or columns.
In the next chapter, we'll look at using pseudo-elements to add generated content to elements in your web
pages. The original idea of generated content was to enhance numbered sequences, but it has been adapted to an
increasing range of interesting visual effects.