HTML and CSS Reference
In-Depth Information
Using tables for creating a layout grid is an outdated web design practice
that has generated a lot bad press for the HTML
table
element. Even if
that practice has gone the way of the dodo in most modern web devel-
opment, tables for tabular data are just as important as ever. The layout
of a table—with its grid of cells, myriad of borders, and the ability for
cells to span rows or columns—calls for some special formatting proper-
ties not used for other elements.
The layout model for the table element calls for margins and borders on
the outside of the element to behave the same as other blocks and width
to be calculated similarly, but it incorporates a few additional proper-
ties to control the spacing and display of the containing cells and their
padding, spacing, and borders. The following code generates the table
shown in
Figure 10.4
:
table {
background: #ccc;
border: 5px dotted #000;
border-spacing: 10px;
}
td {
width: 20px;
line-height: 20px;
padding: 10px;
background: #fff;
border: 2px solid #000;
}
td[rowspan="2"] {
border: 10px solid #666;
}