Insert tables

Next you'll add a table that will hold text, graphics, and Macromedia Flash assets.

Click once on the page to place the insertion point in the upper-left corner of the page.

Select Insert > Table.

In the Insert Table dialog box, do the following:

Enter 3 in the Rows text box.
Enter 1 in the Columns text box.
Enter 700 in the Table Width text box.
Select Pixels from the Table Width pop-up menu.
Enter 0 in the Border Thickness text box.
Enter 0 in the Cell Padding text box.
Enter 0 in the Cell Spacing text box.

Click OK.

A table with three rows and one column appears in your document. The table is 700 pixels wide with no border, cell padding, or cell spacing.

ABOUT...

More about tables Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. When you create multiple rows with multiple cells, the cells form columns. Technically, a cell is a division within a horizontal row, and a column is the vertical accumulation of those cell divisions.

Dreamweaver displays the table width and the width for each table column in the Table selector (indicated by green lines) when the table is selected or when the insertion point is in the table.

Next to the widths are arrows for the table header menu and the column header menus. You can use the menus for quick access to common table-related commands. You can also enable or disable the display of the widths and menus by selecting View > Visual Aids > Table Widths.

Tables can have borders, and the cells of a table can have padding, spacing, or both. Cell padding refers to the number of pixels between the cell's content and the cell's boundaries. Cell spacing refers to the number of pixels between adjacent table cells.

If you don't explicitly assign values for cell padding and cell spacing, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. If you want to ensure that browsers display the table with no padding or spacing, set cell padding and cell spacing to 0.

For more information about tables, see Presenting Content with Tables in Using Dreamweaver.

Click once to the right of the table to deselect it.

Select Insert > Table to insert another table.

In the Insert Table dialog box, do the following for the second table:

Enter 1 in the Rows text box.
Enter 3 in the Columns text box.
Enter 700 in the Table Width text box.
Select Pixels from the Table Width pop-up menu.
Enter 0 in the Border Thickness text box.
Enter 0 in the Cell Padding text box.
Enter 0 in the Cell Spacing text box.

Click OK.

A second table with one row and three columns appears below your first table.

Click to the right of the table to deselect it.

Insert a third table by selecting Insert > Table and entering the following values in the Insert Table dialog box:

Enter 1 in the Rows text box.
Enter 1 in the Columns text box.
Enter 700 in the Table Width text box.
Select Pixels from the Table Width pop-up menu.
Enter 0 in the Border Thickness text box.
Enter 0 in the Cell Padding text box.
Enter 0 in the Cell Spacing text box.

Click OK.

A third table, with one row and one column, appears below your second table.

Click to the right of the table to deselect it. Your page should now look as follows:

NOTE

You may see the Table selector (indicated by green lines) after you insert a table. You can always make the Table selector disappear by clicking outside the table. You can also disable the Table selector by selecting View > Visual Aids > Table Widths.

Comments

Appleleaf said on Mar 9, 2006 at 12:52 PM :

The help documentation makes the point that Dreamweaver is a tool whose primary purpose is the realization of an already designed graphic layout, a comp.

The topic, Insert tables, describes how to enter the values that will define the size of various table elements. However, it doesn't make clear - at least to this novice - how the dimensions of the comp and its sundry sub-sections are determined to be begin with.

Should I pull out a ruler and measure the width and height of the banner? How about that photograph in the background? Am I scanning the image into a program that allows me to make those measurements? What about the pixel dimensions? How many pixels to an inch? (I'm assuming that I've measured my comp with a ruler.)

The following may be off point, but seems to relate to the general issue of set-up.

The dimensions of images - such as the aforementioned photo - can be changed. Is there an "ideal" format used for web page photos/images... or should I say, an ideal size from the standpoint of MBs, KBs, etc.

amazinglarry8 said on Apr 10, 2006 at 8:59 AM :

The first direction on this page says "Click once on the page to place the insertion point in the upper-left corner of the page."

To clarify: this is in the "Design" window. In the "Code" window (which will be on top if you are using the Split view), the table is inserted between the <body> </body> tags. This may seem obvious, but it confused me for a moment.

No screen name said on Oct 15, 2006 at 11:43 AM :

You should say that View>Visual Aids>Table View and Table Borders need to be checked for the screen to match the Tutorial display.

No screen name said on Mar 1, 2007 at 9:49 PM :

To reply to Appleleaf:
The problem of "learning to use Dreamweaver" is distinct, and independent, from the problem of "providing the graphic design for a web page." I take it that this help system is designed to do the former. Given that, I think it is good tutorial strategy, and good documentation design, to tease the page construction apart from the graphic design of the page.

So just take it that a graphic designer has provided you with the page, including the specifications. They typically tell you the measurements. They draw it out for you. You don't have to "use a ruler."

Then just learn to use the tool.

Current page: http://livedocs.adobe.com/dreamweaver/8/using/gs_04_p4.htm