Working with Graphics and Tables - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 286

Creating Tables
In the earliest days of the Web, text and images were aligned to the left of the page.
Designers soon discovered that they could use tables to provide a vertical and horizontal
structure for the content of a Web page. This provided more fl exibility in arranging the
content and elements in the Web page. Tables are still used in Web pages to simplify the
presentation of data. Sometimes, they are used to increase layout options. It is important
to learn how to use tables because you will encounter them frequently.
Tables are grid structures that are divided into rows and columns. Rows cross the table
horizontally; columns cross the table vertically. The container created by the intersection
of a row and a column is called a cell . The four lines that mark the edges of a cell are
called borders . Borders can be invisible or visible lines of a width that you select. When
the borders of the cells of a table are set to 0, the borders still exist but are invisible.

Inserting a Table
• In the Common category of the Insert panel, click the Table button.
• In the Rows box, type the number of rows.
• In the Columns box, type the number of columns.
• In the Table width box, type a percentage value, click the Table width arrow, and then
click percent.
• In the Border thickness box, type a border width (type 0 if you do not want the table
structure to appear on the Web page).
• Click the OK button.

Inserting a Table
You can quickly insert a table in a Web page by selecting where to insert the table and
its parameters. Dreamweaver then inserts the HTML code for the table. The table param-
eters that you can specify are as follows:

• Rows. The number of rows for the table. You can also add rows to the table later.
• Columns. The number of columns for the table. You can also add columns to the
table later.
• Table width. The horizontal dimension of the table specifi ed either in pixels or as a
percentage of the width of the browser window. Specifying the table width in pixels
creates a table that has a somewhat fi xed width—the table will still expand as needed
to fi t the content, but it will not change size when the browser window is resized.
Specifying the table width as a percentage creates a table that adjusts in size as the
Web page is resized in the browser window. All the cells start with equal widths, but
you can adjust the height and width of cells, rows, and columns.
• Border thickness. The size of the table border in pixels. A border of 0 creates an invis-
ible table structure. If you don't specify a value, most browsers display the table as if
the thickness were set to 1. It is a good idea to specify a border thickness to ensure
that the table is displayed correctly. By default, invisible borders are visible within
Dreamweaver so you can see the table structure, making the table easier to work with.
You must preview the page in a browser to see how the table content will look with-
out borders.
• Cell padding. The amount of empty space, measured in pixels, maintained between
the border of a cell and the cell's content. When no cell padding is specifi ed, most
browsers display the table as if the cell padding were set to 1. Although this is usu-
ally fi ne, it is a good idea to specify a cell padding to ensure that the table is always
displayed correctly.

Changing one cell's width
changes the width of
all cells in the column;
changing one cell's height
changes the height of all
cells in the row.