Section 13.5. Table Presentation


13.5. Table Presentation

As 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 Spacing

There 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 spacing

Cell 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 padding


13.5.1.2. Cell padding

Cell 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 alternatives

Cell 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.

Many authors also explicitly set both the cellspacing and cellpadding to 0 (zero) to override default browser settings and clear the way for style sheet properties.


13.5.2. Table and Cell Dimensions

By 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.

The width and height attributes have been deprecated for td and th elements, but they are not deprecated for use in the table element. Style sheet properties are still the preferred method for specifying table dimensions.


13.5.2.1. CSS alternative

Use 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. Borders

The 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.


border

Controls the width of the frame around the table. The default value is 1.


frame

Specifies the sides of the table on which the frame should render. By default, the frame is rendered as a shaded, 3D style rule. The frame attribute uses these keyword values: void (no frame), above (top side only), below (bottom side only), hsides (horizontal sides), lhs (lefthand side), rhs (righthand side), vsides (vertical sides), box (all four sides), and border (all four sides).


rules

Specifies which rules render between the cells of the table. One use for this attribute might be to display rules only between certain sets of columns or rows, as defined by colgroup or the row group elements (thead, tbody, and tfoot). The accepted values for the rules attribute are all, cols, groups, none, and rows.

13.5.3.1. CSS alternative

The 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 Alignment

The 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.

Adding the align attribute to the table element aligns the entire table in the width of its containing element and does not affect the alignment within the cells.


13.5.4.1. Horizontal alignment

The 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 alignment

The 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 alternatives

Authors 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. Backgrounds

The (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.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net