Start Basics Color Forms Frames Images Links Lists Tables Type

Tables: Dreamweaver 4:
Set Table Cell Properties

Add and Align Table Data

Set Cell Properties

Once you have created a table you might want to change the width of a column or the height of a row.

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

Add and Align Table Data

You will, of course, want to add content to the table cells.

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.
Set Cell Properties Dreamweaver makes it easy for you to change many other properties of individual table cells.

Once you place your cursor in a table cell, the Property Inspector displays elements that let you control aspects of the content of your table cells.

Property Inspector: Table Cells
To align the data in a table cell  highlight the data and press one of the alignment buttons on the Property Inspector.

Left, Center, and Right alignment buttons
Alignment buttons

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.

Horizontal and Vertical alignment
Alignment drop down menus

You can specify a background image for an individual table cell, put the pathname of the background image in the top Bg text box in the lower right cell property panel.

You can specify a background color for an individual table cell by choosing a color from the bottom Bg text box in the lower right cell property panel.

You can specify a cell border in the Brdr text box in the lower right cell property panel.

Reminder: Netscape Navigator may not display colored table borders.

Cell backgrounds and borders.

Set cell backgrounds and 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: Be sure to preview the table in both Microsoft Internet Explorer and Netscape Navigator before you publish the page.

Both browsers have a tendency to interpret table tags and attributes in different ways.

Tables: Dreamweaver 4
Overview
Create a Table in Standard View

Set Table Cell Properties
Experiment with Advanced Design
Create a Table in Layout View

Start Basics Color Forms Frames Images Links Lists Tables Type

 

Personal Home PageWeb Design CenterTutorial MenuTop of Page

Web Design Center
Last Revised: September 2, 2001
© Agatha Taormina