tables : 

a grid for controlling page layout

A cell	an image with some text in the cell
cell	cell

You create tables by clicking on the table icon in the object palette.

You'll be asked to set the following attributes:

• Number of rows
• Number of columns
• Width in Percent or Pixels
• The width of the border (the beveled edge on the outer part of the table)
• The cell padding (the text margin, left, right, top, bottom)
• The cell spacing (the width of the cell walls)
  

Table properties are accessible by selecting the whole table.

Cell properties are accessible by placing the selection point inside a cell - the cell properties will show up in the lower half of the property inspector.

The difference between percent and pixels

If the table is set to percent, the table will change size depending on how wide the user sets the browser. If the table cells are set to percent, their size varies as a percentage of the whole table. In general, it is best to use pixels for all tables.

Table and Cell background images don't work in all browsers!

The property inspectors for tables and table cells allow you to set a background image for the table or cell. Unfortunately, this property does not work well or at all in older browsers, particularly Netscape.
Do not use this feature!

Flowing text around tables

For flowing text around tables, tables are just like images, and have the same alignment attributes. The most commonly used settings are "left" and "right".

Table format

The table format is controlled by the Border, Cellspacing, and Cellpadding (explained below). The settings for these table attributes are accessible in the middle right of the table property inspector. If you want the table borders to be invisible to the viewer and/or are using the table to knit together a set of images together, set all of these attributes to zero. See page 93 of The Elements of Web Design for an excellent diagram of how tables work.

Border size

The setting of the table border in pixels affects the width of the border around the edge of the table.

 

Cellspacing size

The setting of the table cellspacing affects the width of the border around each cell

 

Cellpadding size

The setting of the table cellpadding affects the width of the margin. This margin is on the left, right, top and bottom.

 

Selecting a table

There are three ways to select the whole table.

• click on the upper left hand corner of the table when you see the cursor turn into a hand (this is sometimes hard to do).
• click anywhere inside the table, then select MODIFY>TABLE>SELECT TABLE or type control-A twice
• click anywhere inside the table, the click on the <table> tag at the bottom of the document window

Adjust the rightmost cell first

If you are setting specific widths of the table, set the width of the rightmost cell first, and work your way left. This avoids the problem of the cells squeezing up against each other as happens when you adjust from left to right.

Row and Column Span

Row and Column span enable a cell to span adjacent cells. For example, if you set the row span for a cell to 2, the cell will become two rows tall. Likewise, if you set the column span for a cell to 2, it will become two columns wide. The controls for changing these cell attributes are in the lower left hand corner of the table cell properties inspector. To create a span, select the cells you want to consolidate into one cell, and click on the merge button in the inspector. To remove a span, put the cursor inside the cell to be broken apart, and click on the split button in the inspector.

Changing the style of text in multiple cells

You can select multiple cells and change the text style by clicking and dragging across multiple cells, or shift selecting. Alternatively, you can control-click to select individual cells, even if they are not next to each other. Note that the only way to set the text style across multiple cells is to place a <font> tag in each cell. Dreamweaver does this for you, but if you are hand-coding HTML, be aware that you can't simply put a <font> tag around the whole table--this will not change the style of the text inside the table.

Cell alignment -- horizontal and vertical

The location of any text or graphic inside of a table cell is affected by the alignment setting for the cell. By default, the cell contents will be aligned to the left horizontally, and in the middle vertically. To change this, click inside the cell, and then set the Horz or Vert setting in the lower half of the property inspector.

The contents of a cell affects its size

Even when a cell has a specific width and height set, if the contents of the cell are bigger, the cell will always grow to accommodate the size of the content. This is true for both text and graphics. For example,. if the text in a cell doesn't wrap (either because there are no spaces, or because you set the cell to not allow wrapping), the cell will expand its width to accommodate the text, regardless of the width setting for that cell or the whole table.

 

Clear row heights or column widths

When you are using a table to control the display of a series of image to be composited together, you should have no widths or heights set. This enables the image in the cell to determine the width and height of the cell. If you select the entire table, in the lower left hand of the properties inspector, there are two buttons (the first and second ones) that enable to you clear the row heights or column widths.

 

Convert table widths to pixels or percent

If you are having problems with a table, you may have a mix of pixels and percents, not a good thing generally. Dreamweaver has a method for setting all the table widths to the same method. Select the entire table, and in the lower left hand of the properties inspector, there are two buttons (the third and fourth ones) that enable to you set the table and all its cells to pixels or percent.

Nesting tables

You will find that it is often difficult to design a table that places elements exactly where you want them. One way around this is to put a table inside of a table cell. In other words, you use the outside table to set the general location, and the place a table inside the appropriate cell to do your exact positioning. To do this, just place the cursor inside the appropriate cell, and click on the Insert Table icon in the object palette.

	This table is inside another table

 

The instructor will demonstrate how to re-create the sample page with tables in it, then students should do the following:

Download the set of files web1_tables_example.zip and reproduce the file tables_example.htm in Dreamweaver. Do not copy the HTML from the example.

Notes:

• You do not have to make the text flow exactly as it does in the example, because this changes depending on how wide the browser is displaying.
• If you have trouble with gaps in the header table, select the table and use the clear table heights and widths buttons in the table property inspector.
• Be sure to make the tables pixels rather than relative so they stay a fixed size even if the browser changes size.
• Set the cell vertical alignment to TOP so the cell content aligns with the top of the cell rather than the default center.
• Set the vspace and hspace around the sailboat image to provide a margin for the text. A more advanced method would be put place the image in it's own table, which will eliminate the extra margin on the left of the image when using hspace.

all materials on this web site © copyright 2003, Philip van Allen