Dreamweaver 8: Set Table Cell Properties

• Align Cell Content • Set Cell Background Values •

To add data to a table:

Position your cursor inside a table cell and type your text or insert your image. Move from cell to cell with either your cursor or the Tab key
To continue to add rows to your table, insert your cursor in the last cell in the last row and column of the table and press the Tab key. A new row will appear.

Table cells will expand as much as possible to accommodate content.

To align the data in a table cell, highlight the data and press one of the alignment buttons on the Properties panel.

Once you have put some content in your table, you might want to adjust the width of a column or the height of a row.

To quickly adjust cell sizes, grab the cell border with your cursor. The cursor will turn into a pair of arrows aiming in opposite directions.

Drag the border to the desired position.

WARNING: Tables are sometimes notoriously tricky to control. I often end up tinkering with tables in Code view.

Align Cell Content

To align the data in a table cell, highlight the data and press one of the alignment buttons

on the Properties panel.

Note that when you are working within a table, the Properties panel expands to display Cell Properties.

If the Cell Properties panel does not appear, you can display it by clicking on the down arrow in the lower right corner of the Properties panel.

To align the data in a table cell on the vertical or horizontal access, choose your desired alignment from the Horz and Vert dropdown menus in the center left of the Cell Properties panel.

Set Cell Background Values

From the Cell Properties panel you can change the look of individual cells.

You can specify a background color for an individual table cell. Insert your cursor in the cell. Then choose a color from the bottom Bg color box in the lower right of the Cell Properties panel. Or type the hexadecimal value (preceded by the # sign) in the text box to the right of the color box.

You can specify a background image for an individual table cell. Insert your cursor n the cell, then browser for the pathname of the background image in the Bg text box in the lower right of the Cell Properties panel.

You can specify a cell border in the Brdr color box in the lower right of the Cell Properties panel. Or type the hexadecimal value (preceded by the # sign) in the text box to the right of the color box.

Remember that many browsers do not display colored table borders.

Tables, especially borderless tables, can be used to great effect to force a particular layout design on a web page.

However, you will need to tinker with your table by adjusting the table and cell properties. It is a good idea to save and preview the file after every adjustment to your table.

VERY IMPORTANT: Always be sure to preview your tables in more than one browser. Browsers have a tendency to interpret table tags and attributes in different ways.

• Overview • Create a Table • Set Table Cell Properties • Experiment with Table Design • Create a Table Using Layout Mode •