Changing Table Properties

This tutorial will illustrate changing table properties in Dreamweaver CS5.

Earlier we looked briefly at some table properties. We're now going to look at them in more detail.

If we look again at one of our earlier tables, we can see that it has a certain number of rows and columns, that some cells have been merged, and so on. However, some of the properties are more difficult to see. For a more complete view, select the table and look at the Properties Panel, which relates to the whole table.

We can see that the width is 618 pixels. Change it to 80% and it now occupies 80% of the available page width. If the page width changes - and it will on different visitors' browsers - the actual table width will vary as well. If you specify table width as a percentage, you will need to take this into account.

The Table ID needs to be assigned if you want to call the table from a script, which we won't be doing now.

The table has 3 rows and 3 columns, although the cells in the second column have been merged. You should now know how to split them again if you need to. If I change the number of columns to 4 Dreamweaver adds a new column. The new column is relatively thin as it has no contents, but the overall width of the table is maintained.

Cell padding (the space between the content of the cell and the cell border) and cell spacing ( the space between cells) are both set at 2 pixels. The border is set at 5 pixels. We set these when we created the table, but will change them now. Note the effect.

Align refers to the alignment of the table with the rest of the page, not to the alignment of its contents. If I change it to Center, note the effect.

The table is now centered on the page.

There are some useful command buttons in the Properties Panel as well. One of them is Convert Table Widths to Pixels.

This button causes Dreamweaver to set the width of each column in the table to its current width. Note that the widths are expressed as pixels.

There is another button that converts table widths to percentages.

There are also buttons to clear all column widths and row heights.

We will return to Class later.

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Changing Table Properties in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!