Changing the Background

Changing the Background

Changing the background color of one or more cells is a great way to add visual clarity and structure to your table.

To change a cell 's background color with (X)HTML:

Within the desired tag, type bgcolor = "color" , where color is either a name or a hex color (see page 126 and inside back cover) .

To change a cell's background image or color with CSS:

In the desired rule, type background: value , where value is described in detail on pages pages 172173.

Tips

• The CSS background property is described in detail on pages 172173. This section is devoted to explaining its peculiarities with respect to tables .

• The CSS background property with a color value is well supported, all the way back to IE and Netscape 3. Background images are supported back to version 4 of both browsers.

• The (X)HTML bgcolor attribute has been deprecated. The W3C would prefer you use the CSS background property. Nevertheless, bgcolor continues to be well supported.

• You can add the bgcolor attribute to any table tag ( table , tr , thead , etc.) to change the color of the cells in one or more rows or columns at once.

• The bgcolor attribute in an individual cell ( th or TD ) overrides the color specified in a row (in a TR tag), which in turn overrides the color specified for a group of rows or columns (in thead , colgroup , etc.), which, as you might expect, overrides the color specified for the entire table (in the table tag).

  Figure 16.37. In this example, I've created all the background colors with CSS instead of (X)HTML. In addition, I've added a background image for the left navigation bar.

  

• Consult CSS Colors on page 126 and the inside back cover for help choosing colors.

  Figure 16.38. Is the space around the cells bugging you yet? We're getting there next !

  

• You can add both a background image and a background color to a cell. The background color will display before the image and then continue to shine through the transparent parts of the image, if there are any.

• You can also set the color of the contents of a cell. For details, see Setting the Color on page 160. For information about changing the color of the borders, consult Adding a Border on page 230.

• Make sure that your background images do not distract from the content that is placed on top of them. I am continually amazed at how many sites use bizarrely busy backgrounds with text that is for all intents and purposes illegible.

Controlling the Space

(X)HTML has long had two attributes for the table tag that allow it to control spacing between the contents of a cell and its border ( cellpadding ) and between one border and the next ( cellspacing ). And while they're well supported and perfectly reasonable, they're not very flexible. You can't, for example, affect the cell spacing on a single side, or add cell padding just to a few cells in a table.

CSS on the other hand lets you use the now familiar padding property (see page 177) to control space on every side of a cell, as well as between paragraphs and other elements. It is a welcome substitute for cellpadding .

Unfortunately, although the CSS property for controlling cellspacing ( border-spacing ), continues to be supported by almost all major browsers, Internet Explorer (up to and including version 7) remains the notable exception, rendering the property virtually unusable.

To control cell padding with (X)HTML:

In the table tag, type cellpadding="n" , where n is the number of pixels that should appear between the contents of a cell and its border.

To control cell spacing with (X)HTML:

In the table tag, type cellspacing="n" , where n is the number of pixels that should appear between one cell border and the next.

To control cell padding with CSS:

In the desired rule, type padding: value , where value is a length in pixels or a percentage of the parent element.

To control cell spacing with CSS:

In the desired rule, type border-spacing: value , where value is a length in pixels or a percentage of the parent element.

Tips

• The default value for cell padding is 1.

  The default value for cell spacing is 2.

  Figure 16.43. To finish adjusting the spacing in the table, we need to adjust the margin and padding properties. I've reduced the width of the toc to 110 to accommodate the 10 pixels of left padding.

  

• When using tables for layout, it's perhaps easiest to set both the cellpadding and cellspacing to zero and then selectively add padding and margins with CSS.

  Figure 16.44. Now we've got the spacing under control.

  

• Both cellpadding and cellspacing must be applied to the entire table as a whole. To control spacing in and around individual cells, use the CSS properties.

• You can use the CSS margin property (see page 176) to control the spacing between H1 and p elements that may be contained in cells, or the space around a table.

• Remember that the CSS alternative to cellpadding is called padding , while the CSS alternative to cellspacing is called border-spacing . The padding property can be used on any element; border-spacing is just for table cells.

• The border-spacing property is inherited but padding is not.

• Netscape 6 is so scrupulous with standards that it adds a bit of space under inline images in table cellsfor descenders, one must presume. As long as you only have one image per cell, you can get rid of the space by making the images block level (see page 30) . Or you can trigger quirks mode (see page 41) .