13.5. Table PresentationAs for all matters of presentation , style sheets are the preferred method for changing the appearance of tables and offer more fine-tuned control than HTML attributes. See Chapter 22 for more information on CSS specifically for tables. That said, there are a number of non-deprecated attributes that may be used to control cell spacing , dimensions, borders, and alignment (although, even most of those have style sheet alternatives). This section takes a look at those presentation-related attributes and also points out the preferred CSS methods. 13.5.1. Table Cell SpacingThere are two types of space that can be added in and around table cells: cell padding and cell spacing . The cellpadding and cellspacing attributes are used with the table element and apply to the whole table; you can't specify padding or spacing for individual cells using HTML alone. 13.5.1.1. Cell spacingCell spacing refers to the amount of space that is held between the cells in a table. It is specified with the cellspacing attribute in the table element. Values are specified in number of pixels. Increasing the cell spacing results in wider shaded borders between cells. In the second image in Figure 13-7, the darker gray areas indicate the 10 pixels of cell spacing added between cells. The default value for cellspacing is 2; therefore, if no cellspacing is specified, browsers will automatically place two pixels of space between cells. Figure 13-7. Cell spacing versus cell padding13.5.1.2. Cell paddingCell padding refers to the amount of space between the cell's border and the contents of the cell (as indicated by the third image in Figure 13-7). It is specified using the cellpadding attribute in the table element. Values are specified in number of pixels; the default value is 1. Relative values (percentages of available space) may also be used. 13.5.1.3. CSS alternativesCell padding may be handled by applying the padding property to the td element. By using class, id, or more specific selectors, it is possible to apply different amounts of padding to different cells within a table (the cellpadding attribute applies the same amount of padding to all cells). There is no CSS property that is exactly equivalent to the cellspacing attribute, although you can adjust the amount of space between cells by setting the border-collapse property for the table to separate and then use the border-spacing property to specify the amount of space between cell borders . The difference is that with the cellspacing attribute, the border is rendered thicker between cells, while the border-spacing property adds empty space between them. Unfortunately, the border-spacing property is not supported by Internet Explorer 6 and earlier (support in IE 7 is not documented as of this writing), so authors are left with no practical CSS cellspacing substitute for the time being.
13.5.2. Table and Cell DimensionsBy default, a table will render just wide enough to contain all of its contents. You can explicitly specify the width of a table using the width attribute in the table element. The HTML specifications provide no way to specify the height of a table, preferring the height to be automatically determined by the table's contents. However, there is a nonstandard height attribute that is well-supported for providing minimum height for the overall table. You can control the width and height of individual cells by using the (you guessed it) width and height attributes in the td or th element. Height values are considered to be minimum heights and cells may expand downward to accommodate their contents.
13.5.2.1. CSS alternativeUse the width and height properties to set the size of any table-related element. Heights set on table and table cells are considered minimum heights, and the actual height may expand to fit the content. 13.5.3. BordersThe table element accepts the following attributes for controlling borders and rules between cells and around the table. All of the attributes introduced here apply to the table element only. None of these attributes are deprecated, but authors are urged to use CSS for drawing borders around table elements instead.
13.5.3.1. CSS alternativeThe collection of border properties in CSS allows you to specify the style (such as solid, dotted, dashed, and so on), color, and width of borders around any table-related element. With style sheets, it is possible to apply different borders to different sides of tables, their rows, or cells. See Chapter 19 for details on the border properties and Chapter 22 for how borders are handled in tables specifically. 13.5.4. Cell Content AlignmentThe align and valign attributes are used to specify the horizontal and vertical alignment (respectively) of content within cells. Alignment may be specified for the following elements: td, th, tr, thead, tbody, tfoot, col, and colgroup.
13.5.4.1. Horizontal alignmentThe align attribute accepts the usual values left, right, center, and justify. Text is left-justified by default in left-to-right reading languages. The align attribute also includes the char value that specifies that the table contents should be aligned on a specific character, such as a decimal point for a column of currency amounts. The character used for alignment is provided by the char attribute. The charoff attribute specifies the offset distance to the first alignment character. Although it's a nifty idea, the char and charoff attributes are not supported by current browsers. Alignment settings for individual cells (td or th) always override settings at the higher levels. Alignment set on elements within a cell (a p element, for example) override the cell's alignment. If the table includes a col or colgroup, the align settings on the columns override any alignment applied to a row or row group element. 13.5.4.2. Vertical alignmentThe valign attribute is used to vertically position the contents of the cell at the top, bottom, or middle of the cell. The baseline value of valign ensures that the first lines of each cell in a row share the same baseline. 13.5.4.3. CSS alternativesAuthors may use the text-align property to specify the horizontal alignment for the contents of any table element (including the table element itself). The text-align property may also be applied to any element contained within a table cell, thus overriding the cell- or row-level alignment settings. For vertical centering, applying the vertical-align style property to the td or th element has the same effect as the valign attribute. The available values for vertical-align when applied to table cells are baseline, top, middle, and bottom. 13.5.5. BackgroundsThe (X)HTML Recommendations have deprecated the bgcolor attribute used to apply background colors to cells, rows, and tables. Use the background style sheet property to apply colors and background images instead. The background property is explained in Chapter 20, and background behavior in tables is covered in Chapter 22. |