Resizing Columns and Rows in Tables

This tutorial illustrates resizing columns and rows in tables in Dreamweaver CS5.

Although Dreamweaver can take care of row height and column width automatically, there are various situations where you may need to intervene.

Let's look at this table again.

One way of changing a column width is to drag its right border with the mouse. If I drag the right border of Column 2 to the right it gets wider, and Column 3 loses some of its width to pay for this.

However (and see the tool tip), if I start again and this time I hold the Shift key down and drag the right border (i.e. do Shift + drag) Column 2 still gets wider, but all of the other columns retain their widths. This obviously means that the whole table gets wider.

Looking again at the the table, note the widths (in pixels) at the bottom of each column, next to the small arrow. A column width can be variable, fixed or consistent. The numbers indicate a fixed width, which effectively means that you have told Dreamweaver the width for the column. To clear this and once again let Dreamweaver adjust the width to the prevailing circumstances, click on the arrow and select Clear Column Width.

Select Clear Column width and the number next to the arrow disappears. However, the width of the column does not change, as there is no reason for Dreamweaver to change it. We have not changed the width of the whole table, and the other three columns have fixed widths, so why change the width of this column? There is no reason.

However, if we now Clear Column Width for Column 3, we now have two columns with fixed width (1 and 4) and two without, so Dreamweaver looks at the content of Columns 2 and 3. The content is very similar, so it divides the available space evenly between the two columns.

To change the height of a row, drag it by its bottom border. Here I've made the height of Row 3 greater.

At the bottom of the table here you can see the Table Header Arrow, with the overall width next it. Click on the arrow and you see a useful menu.

These commands can be used to resize the whole table in various ways.

Clear All Widths not only makes each column of optimum width, but it optimizes the width of the whole table as well. This effectively means that all excess width is removed. The table now looks like this.

Similarly, Clear All Heights removes all excess vertical space in the whole table.

Note that, where a table has a header, the column widths and table header appear at the top of the table, not the bottom.

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: Resizing Columns and Rows in Tables in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!