Using Tables for Layout

Specifying Background Images and Background Colour

Background images and background colour work the same way for a table as they do for a Web page, except that they are contained within the table and do not affect the page as a whole. The process for adding them is also virtually identical, except that you are the Property Inspector instead of the Page Properties dialog box.

To set a background image, select the table and enter the path and filename for the image file in the top Bg text box in the Property Inspector. (The bottom Bg setting is for the background color.) Alternatively, click the Browse button or the Point to File button to locate the image file.

Unlike a Web page’s background, the table’s background image will appear without any further action being needed (there is no OK button to click). You can follow the same procedure to set a background image for a row, column, or cell, except that you start off by selecting the row, column, or cell instead of the table.

To set the table’s background color, select the table and click the Bg color box (the bottom Bg setting) in the Property Inspector to select a background color. Alternatively, enter a color value in the color text box. To specify a background colour for a row, column, or cell, select the element first, then follow the same procedure. As with the background image, your new background color settings will show up immediately.

Setting Border Colour

In addition to the background colour, you can set the colour of the borders. There are different kinds of border to consider when you decide on a border colour. Each cell has its own border and the table as a border as well, which surrounds all the cells. Simply setting the basic border colour will outline every cell and the table as a whole in the same colour (unless you set colour for specific rows, cells, or columns). If all the cells within a table have their own colours, the table border colour setting will affect only the outline of the table. To set a border colour, select the table element and click Brdr colour box or enter a color value in the Brdr text box.

There is another pair of border colour settings, though, whose effect is not readily apparent with the default border width of 1 pixel, and which does not show at all if a table border color has been set. There are light border (the light border boxes of the property inspector) and dark border (the dark border boxes) settings.

To see clearly how the light border and dark border settings affect the appearance of the table, create a new table and reset the border width to at least 5 or 6 pixels (by entering the number of pixels in the border in the property inspector). The light border is composed of the top and left side of the table, handles default colour is light grey. The dark border is made of the right and bottom sides, and the default colour is dark grey. This is the appearance of a bevelled edge that is lighted from the upper left, throwing a shadow over a lower right. The two different shades generate a 3D effect.

Setting Height and Width You can set a height and width attributes of the entire table to affect how the table appears on the page. Cells also have their own height and width attributes.

Adjusting Table and Width The height and width settings for a table are similar to the same settings for horizontal rules. You can set their values as either a percentage of the window size or an absolute measurement in pixels.

Generally speaking, you will not ever bother to set the height of the table. Since web pages are infinitely high, there really is not much point to doing so. Width is another matter.

Many web page designers have some particular screen resolution in mind when they work on a web page, and they will set the table width accordingly. The advantage to setting a specific width in pixels is that the table will be exactly the same physical size, no matter what screen resolution is used to view it. Conversely, setting a relative table width as a percentage of page width means that the proportion of the table of the page will not vary, no matter what resolution is used.

As noted earlier, the default width of the table is 75 % of the width of the Web page. To change it, simply typing in a different number in the W box of the property inspector. To set the size in pixels instead of percent, click the down arrow next to the width and select Pixels instead of %.

Setting Cell Width and Height Table size will resize themselves automatically as you enter data or insert objects into them. However, you may have specific to set a width or height for them. The process is about as simple as it gets. Enter the pixel value for the width in the W box and the pixel value for the height in the H box.

Although the property inspector does not include percent or pixel option in the form of drop-down list for a cells width and height settings the way it does for those settings in the table attributes, you can still set values that a way for width. Just add a percent symbol after the number. Thus if you enter 50 in the W text box, the cell will be 50 pixels wide. If you enter 50 % in the W text box, the cell will be half the width of the table. (you can not use a % for the cell height.)

Setting Table Spacing

The spacing options for the table include both internal and external spacing choices like images, tables have settings for vertical and horizontal spacing, which determine how many pixels will be between the outside of the table and its neighbouring elements. Entering a value in the V Space text box of the Property Inspector sets the number of pixels for spacing the elements above and below the table. Entering a value in the H Space text box sets the number of pixels for spacing the elements to the left and right of the table.

You also have two choices for internal table spacing:

• You can set the amount of space between the cells by entering a number for the pixel value in the Cell Space text box. Cell spacing is useful when you have table elements that you want to separate from one another.
• You can set the spacing between the cell borders and the cell contents by entering the pixel value in the Cell Pad text box. Cell padding is typically used for separating text from the border by a few pixels to increase readability. For images, it’s usually best to have cell padding set to zero so the image fits snuggly against the border.

The border is also an important design consideration. There are many cases where you will want to get rid of the borders entirely by setting the border width to zero. If you do that, then cell spacing and cell padding are the only ways you have to distinguish between the contents of the various cells.