HTML and CSS Reference
In-Depth Information
Figure 11.9
A table with striped rows
Within this code there are a few intricacies worth mentioning. To begin, the
<table>
ele-
ment has an explicit
border-collapse
property set to
separate
and a
border-
spacing
property set to
0
. The reason for this is that the
<td>
elements include borders,
while the
<th>
elements do not. Without the
border-collapse
property set to
sep-
arate
the borders of the
<td>
elements would make the body and foot of the table wider
than the head.
Since the
border-collapse
property is set to
separate
we need to be careful as to
how borders are applied to
<td>
elements. Here borders are set to the right and bottom of
all
<td>
elements. Then, the very first
<td>
element within a
<tr>
element will receive
a left
border
. As all of the
<td>
elements stack together so do their borders, providing
the appearance of a solid border around each element.
Lastly, all
<th>
elements receive a blue
background
, and every even
<tr>
element re-
ceives a gray
background
by way of the
:nth-child
pseudo-class selector.
Search WWH ::
Custom Search