Start Basics Color Forms Frames Images Links Lists Tables Type

Tables: Dreamweaver 4:
Create a Table in Standard View

Create a Table

Set Table Properties

Dreamweaver allows you to create tables in both standard and layout view.  

If you want to create a basic table, use standard view.

When you want to experiment with advanced table design and sophisticated and complex table layouts, use layout view.

For information on how to design tables in layout view, go to Tables: Create a Table in Layout View
Create a Table There are two ways to create a table in standard view.

Place your cursor in the location where you want your table to appear.

  • Select Insert, Table from the main menu bar.
  • Use the Insert Table button on the Objects Panel

With either method, the Insert Table dialog box will appear.

Insert Table button
Insert Table button

Insert Table dialog box

Fill in the text boxes with the parameters you desire. Click on OK and your table will appear.

Set Table Properties

Note that when your cursor appears in your table, the Property Inspector changes to display table properties.

Table Property Inspector

From the Property Inspector you can:
  • Change the number of rows and columns in the table with the Rows and Cols text boxes in the center left of the Property Inspector.
  • Use the W text box in the top center of the Property Inspector to specify the width of the table in a percentage of the width of the screen or in pixels
  • Use the H text box in the top center of the Property Inspector to specify the minimum height of the table

Note:  To accommodate browsers of various sizes, it is preferable to set the table width as a percentage of the screen and to make the table no wider than 95% of the screen. 

 

  • Use the CellPad text box in the top center right of the Property Inspector to set the amount of cell padding (space around the content of a table cell) in pixels
  • Use the CellSpace text box in the top center right of the Property Inspector to set the amount of cell spacing (space between table cells)  in  pixels
  • Use the Align drop down menu on the right to align the table on the page
  • Use the Border text box on the right to set the size of the table border in pixels.
Align Table menu
Align drop down menu in the Property Inspector
  • Use the Bg Color text box in the lower center of the Property Inspector to specify a background color for the table.
  • Use the Bg Image text box in the lower center of the Property Inspector to specify a background image for the table.
  • Use the Brdr Color text box in the lower right section to  specify the colors of the table border.
NOTE:  Browsers are especially notorious for choosing not to 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: 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