Tables
and Tables for Page Design
To display
your information in an organized fashion, tables can be a
powerful tool. (In fact, the page you're looking at is organized
by a table.) You can organize information, create navigation
areas, and align images any way you wish. You can even insert
tables within other tables.
To create
a table, use the Insert Menu, [ALT]+[CTRL]+[T], or use the
Insert Table button on the Objects toolbar. 
This will bring up the Insert Table dialog box
You set
the numbers of rows and columns you need. The width can be
represented as a percentage of the entire page or a fixed
number of pixels. Cell Padding will the amount of pixels separating
the edge of the cell and its contents. Cell Spacing is the
distance (in pixels) between one column or row and the next.
You can also set the number of pixels for the border. In the
following example, we'll make a 5 row and two column table,
with a border of 0.
Note the
borders around the table. As we have set the
border for 0, it is an invisible border. At this point, we
can insert text or images into the table. <Click
here to see a video demonstration of this being done. (702K).>
While
clicked on the table, the Property Inspector will
show the attributes of the table. You can change the width
and height of the table, change background colors,even the
number of rows and columns.
When you
click in or highlight certain cells in the table, you can
also change the border and/or background color for the individual
cells. You can also merge cells together to span as a single
row (or column). <Click
here to see a demonstration of a column of cells being selected
and merged, and an image will be added to the new cell. (534K).>
A new
feature in Dreamweaver 4 is the ability to sort your table
by any of the columns in it. Here is a sample table below:
 |
At
this point, select the table and go to the Commands|Sort
Table Menu. |
For this
sort, we chose to sort by Column 2 (Sales 2001) numerically,
in ascending order. This should place Boston in the first
row, Miami in the second row, and Chicago in the third row.
<Click here to
see a video demonstration of the table being sorted. (608
KB)>
Table
for Page Design
One of
the new features of Dreamweaver 4 is to use tables to design
a Web page. Unlike previous versions of Dreamweaver, you can
now design a table and place cells where you wish on the Web
page. To start, place your page in Layout View, which is located
at the bottom of the Objects toolbar. 
Use the
Draw Layout Table button to click-and-drag a table where you
wish. 
It should
be noted that your page will have green and blue borders to
mark the table and cells, respectively. <Click
here to see a Layout Table drawn. (2.42 MB)>
You can
move layout cells by clicking on the border or the cell and
using your arrow keys. Holding down [SHIFT] while using the
arrow keys makes the move faster. <Click
here for a video demonstration of moving layout cells. (579K)>
|
