Building Tables - HTML5 with CSS3 - page 227

cells are spaced apart evenly using that value around all four sides of the cell. If two values are supplied,
the first value represents the horizontal spacing between adjacent cells in the same row and the second
value represents the vertical spacing between rows. While there is no official default value for this
property, most browsers will add two pixels of spacing between cells if the border-spacing property is
not explicitly set.
The empty-cells property
The empty-cells property tells the browser whether or not to render styling on cells that have no content.
Possible values for this property are show , hide , and inherit . By default, most browsers opt for the show
value, so even empty cells will appear with whatever borders or background they would have if they
carried content. In the table resulting from the CSS laid out in Listing 7-22, though, empty table cells are
hidden and thus appear to be a completely empty break in the table.
The table-layout property
Lastly, the table-layout property determines which layout algorithm a browser should employ as it
renders the table. Possible values are fixed , auto , and inherit . Using a property value of fixed
triggers the fixed table layout algorithm which relies only on the table's overall width—supplied in CSS or
inferred from the width of the table's content—and divides the width equally amongst all columns. The
auto property value takes into account the overall width of the table, the contents of each of the table's
cells, and any specified cell or column widths and divides width amongst columns as determined by the
browser's own algorithm.
Browsers will render tables using table-layout: auto by default. This value triggers a more complex
layout algorithm that requires the browser to first load the entire contents of the table and scan over every
cell, generating a record of each cell's width. The table's layout is then determined based on the browser's
findings. While this method is more computationally complex, there's no need to be concerned about
browser performance.
The :first-child and :nth-child pseudo-classes
If you look back at the code in Listing 7-22, you'll notice the following two declarations:
thead th:first-child {
text-align: left;
}
tbody tr:nth-child( even ) {
background: #ddd;
}
In the example above, the :first-child and :nth-child pseudo-classes are structural pseudo-classes
that select elements based on where they occur in the markup. The :first-child pseudo-class is left-
aligning the text of the table heading that is a first-child descendant of the table heading row group. More
generally, the :first-child pseudo-class refers to an element that is the first direct child of another
element, such as the first li in an unordered list or the first paragraph in an article .