HTML and CSS Reference
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.