22.2. Styling Tables For the most part, you don't need any special properties to control the presentation of tables and their content. Most of the properties listed in the previous chapters apply to table elements as well, although some may have different values when applied to table objects. This list is an overview of the styles to use for formatting typical aspects of a table and its content.
Text content Style the text content within tables, rows, and cells as you would any other text element in a document. You can apply the following properties to any table element. font and all font-related properties All text-formatting properties color (changes the text color)
Alignment of content in cells You can use style properties to adjust the horizontal and vertical placement of cell content. Note that applying text-align: center to the table element does not center the table on the page, but rather centers all the content within each table cell. text-align for horizontal alignment within a cell. The values left, right, and center apply. vertical-align for vertical alignment within a cell. When used with tables, the values baseline, top, bottom, and middle apply. The values sub, super, text-top, and text-bottom; length measurements; and percentage values should not be used with table elements.
Background color and images You can change the background of table cells, rows, row groups, columns, column groups, or the entire table with color or a background image. Whether the background is visible or overridden is related to the table layer order discussed in the previous section.
Borders You can apply borders to tables and cells at any time. Borders may not be applied to rows, row groups, columns, and column groups when the table uses the separated border model (discussed in the upcoming "Borders" section).
Margins Apply a margin around the outside of the table element with any of the margin properties. Margins may not be applied to such internal elements as cells, rows, and columns.
Padding To add extra space around the content in table cells, add padding to the cell (td). The table element, although it may have a margin, does not accept padding. This may take some getting used to if you are accustomed to controlling cellpadding at the table level in HTML. The good news is that, with CSS, you can specify padding amounts cell by cell, not just globally for all the cells in the table.
Cell spacing In (X)HTML, space between cells is specified with the cellspacing attribute. It is most commonly used to remove extra spacing between cells (cellspacing="0"). There is no directly analogous CSS property for handling space between cells. The closest thing to cellspacing is to set the border-collapse property to separate and use the border-spacing property to add space between cells. The difference is that with cellspacing, browsers render 3D borders between the cells, while with the CSS border-spacing property, the space is held blank. Unfortunately, border-spacing is not supported in Internet Explorer (Versions 6 and earlier), so it is not a viable alternative at this time. Support in IE 7, in beta as of this writing, is undocumented.
Table size and positioning It is possible to position a table as you would any other block element. Position measurements apply to the anonymous box that contains both the table and caption boxes (see Figure 22-2). Applying float to a table cell may remove it from the table and is not advised. All positioning properties width (except rows and row groups) height (may not be used on table columns and column groups)
Column properties Table cells are always descendants of table rows, however, CSS 2.1 describes four permissible column properties that influence cells (each with qualifications). border (using the collapsing border model, discussed in the next section) background (colors applied to row groups, rows, and cells override column backgrounds) width (values provided are minimum values only) visibility (when the value is set to collapse, the whole column will not display and any spanned cells it contains will be clipped)
 | For an in-depth explanation of why columns support only four properties, read Ian Hickson's blog entry, "The mystery of why only four properties apply to table columns" at ln.hixie.ch/?start=1070385285&count=1. |
|
|
