Using Tables in Dreamweaver CS4
From the Insert panel (or from File | Insert | Table)
Choose the number of rows and columns for the table. You can also set
the width of the table. Additional options like border and padding can
also be set here. All of these options can be changed later.
In the Properties panel you can see the options mentioned above. Align
is where the table will appear in the browser; default is to the left. If you set the Border to 0, you can make
the table invisible.
To select cells you can click and drag or hold down Ctrl and select
cells one by one. Right click on any cell or selection of cells and
pause on Table to get the table menu.
Here you have some familiar options; just like in MS Word you can Merge
Cells, Split Cells, Insert Rows and Columns and Delete Rows and
Columns. Notice the keyboard shortcuts are listed to the right, saves
you time.
Try merging and splitting cells. This gives you a huge amount of
options as to how you can organize you web page.
Cell dimensions can be finicky; you can select a cell or a row or
column of cells and set the width or height in the Properties panel.
You can set some properties for cells and selections of cells in the
same panel. Here you can set the alignment of text within the chosen
cell/cells.
Notice the scale bar at the bottom of the table. This shows you the
total width of the table and that of each column. Notice how I forced
the width of each cell to 50 pixels, but in parentheses there is a
slightly smaller number. These numbers in parentheses indicate some
inconsistency in the widths I you have chosen and actual widths that
will be displayed in the browser. This can be for a number of different
reasons and is nothing to worry about. In this case it is because I
have a 1 pixel border on each cell, therefore Dreamweaver scales back
the width of each cell to compensate. There will be many cases when
this happens and you shouldn't worry about it too much. Preview your
page in a browser to make sure it looks good and then move on. When
your tables get rather complicated you will have width inconsistencies;
don't waste time over a few pixels.
Insert a photo. Images are treated different from text in a cell. You
can adjust the alignment like text. However, the cell where you insert
the photo must be big enough for the picture or Dreamweaver with
readjust the dimensions of the cell. This can radically change the look
of you layout. You can, however, adjust the size of the image in
Dreamweaver to fit the photo in your layout. I prefer to set the pixel
dimensions of the photo first in Photoshop, so that it fits into the
cell in Dreamweaver without changing my layout. It's just a matter of
preference.
Try applying tables to the tools we have learned in previous weeks to
design a layout. Attach you CSS file so you can use your style rules
and copy and paste some of the text and links you have from previous
web pages.
Here is an example:
Created 9/7/09 by GJM