HTML and CSS Reference
In-Depth Information
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.
Summary
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
empty cells.
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.