Adding and Deleting Rows and Columns

Adding and Deleting Rows and Columns

After inserting your table initially into the document, you may decide you want to change the number of columns and rows your table has. If you were hand coding, this could end up being a nightmare, but with Dreamweaver it's a breeze .

The way you add and delete columns is very similar. Suppose, for example, you wanted to add an additional row or column. One thing you could do is select the table and in the Properties Inspector, type in a new value for how many rows and columns you want. This automatically adds the amount of rows you wanted to the bottom of the table and the amount of columns to the right of the table. If you had an extra row or column at either the bottom or right side of the table, all you have to do is decrease the number of rows and columns by the extra number and they'll automatically be removed. Well, this is great—but what if the columns and rows you wanted to add weren't at the bottom or right of the table; what if you wanted to add a column straight down the middle of the table? Fear not, the process is just as easy.

Inserting Rows and Columns

Suppose, for example, you had a table with six columns and you wanted to add a seventh. When you add the new column, you want it to appear between the third and forth column. To do this, place a blinking cursor in any cell of the third column. Next, choose Modify, Table, Insert Column, which automatically inserts a column to the right of the selected cell. You can also choose Modify, Table, Insert Rows or Columns. This launches the Insert Rows or Columns dialog box, as pictured in Figure 5.14. This dialog box offers the option of inserting more than one column or row at a time and placing the new columns in the cells in relationship to the selected cell.

TIP

You can always use the keyboard shortcut of Command+M (Mac) or Ctrl+M (Windows).

Deleting Rows and Columns

If you need to delete a row or a column, it's a bit more straightforward. Place a blinking cursor in the cell of the column or row you want to delete and choose Modify, Table, Delete Row or Delete Column. You can also contextual-click in a cell and in the context menu choose Table, Delete Row or Delete Column.

You can highlight multiple rows or columns and press the Delete key to remove them from the table as well.

TIP

You can easily delete a row by using the keyboard shortcut of Command+Shift+M (Mac) or Ctrl+Shift+M (Windows).

Resizing Tables

You can easily resize any attribute of a table. As you mouse over column and row borders, you might have noticed a two-way arrow. If you click and drag with the two-way arrow you can shift around the column or row.

You can also change the size of a table by selecting it and entering in values for the width and height. Normally, developers don't specify a height unless their design requires it. If you do need to specify a height for the table, keep in mind that the table will resize the height if you add content that will not fit into your specified table size . HTML tables always add room vertically before they resize horizontally.

Clearing Cell Heights and Widths

Sometimes after resizing the table a bit, you may get undesired sizing and effects. This happens to the best of us, but there is a way to deal with it in Dreamweaver. When you resize certain elements within the table, Dreamweaver is assigning values for the width and height of the table cells. Remember that the cells all need to equal the entire width value of your table. If that's not the case, you will run into situations where content is not being line up properly. The best way to deal with this is to clear all values from your <td> table data tags, which are generating your cells. The easiest way to do that in Dreamweaver is through the Properties Inspector. With your table selected, click the Clear Cell Heights and Clear Cell Width buttons , as shown in Figure 5.15. You can also access these options by choosing Modify, Table, Clear Cell Heights or Clear Cell Widths.

Converting Pixels to Percentages

There's a chance when you initially set up your table that you wanted to work in pixels instead of percentages, or vice versa. If you designed or laid out some content, you may think it's too late to switch from either pixels or percentages to the other. One thing you do not want to do is switch what is in the drop-down menu next to the Width text field in the Properties Inspector. If you do that, you could be changing your table from 90% to 90 pixels, which is a dramatic change in the size of your table, thereby ruining any design that you may have. Instead, convert the percent value into an equivalent pixel value. Press the Convert Table Widths to Pixels button in the Properties Inspector, as shown in Figure 5.16. You can also choose Modify, Table, Convert Widths to Pixels. Dreamweaver will do the calculation and change the size of the table to the appropriate pixel value. With the new edition of Dreamweaver MX, you have the option of converting cell heights as well.

Spanning Table Cells

When you're creating tables, you can use an option called Column Span and Row Span. These two attributes enable you to stretch a single table cell across one or more columns or rows. You may want to this because when you're laying out content and mixing images with text, different size elements will require different size cells. You can have a particular cell span across multiple columns or rows, as shown in Figure 5.17.

To create a Row Span, follow these steps:

1. Place a blinking cursor in the topmost cell of the column you want to Row Span. Row Span essentially combines cells vertically.

2. Choose Modify, Table, Increase Row Span. Notice that the cell you had selected and the cell underneath it are now combined.

3. Repeat steps 1 and 2 as many times you want to increase the Row Span. The keyboard shortcut is Command+Y (Mac) or Ctrl+Y (Win).

Creating a Column Span is very similar to creating a Row Span. To create a Column Span, follow these steps:

1. Place a blinking cursor in a table cell to the left of the cell you want to Column Span.

2. Select Modify, Table, Increase Column Span. The cell you had selected and the cell to the right have been united to create one cell.

3. Repeat steps 1 and 2 as many times as you want to increase the Column Span.

If you decide you want to remove a span, choose Modify, Table, Decrease Column or Row Span. Repeat that as many times as you would like to decrease the span.

Splitting and Merging Cells

You can also make adjustments to spans by splitting and merging cells. This way, you can divide or multiply the number of cells within your table. You can split a cell into different columns or rows. Again this is beneficial when designing pages with content that varies in size or dimension.

To merge two or more cells, follow these steps:

1. Place a blinking cursor into a cell of your choice.

2. Hold down the Shift key and click in an adjacent cell. Continue to do this until all the desired cells are selected.

3. Click the Merge Cell button in the Properties Inspector, as pictured in Figure 5.18. Notice that the selected cells become one.

   Figure 5.18. The Merge Cell button is located in the Properties Inspector.

   

Splitting cells is pretty much the same process; however, it yields the opposite result. Instead of transforming many cells into one, this option transforms one cell into many.

To split a cell into more than one column or row, follow these steps:

1. Place a blinking cursor into the cell you want to split to select it.

2. With the desired cell selected, click the Split Cell button in the Properties Inspector. This launches the Split Cell dialog box, as pictured in Figure 5.19.

   Figure 5.19. The Split Cell dialog box offers options for splitting the cell into rows, columns, and how many times to split the cell.

   

3. Type in a number to indicate how many times you want the cell to split. Also, choose whether you want Rows or Columns.

4. Click OK. Notice the cell has been divided into as many cells as you specified.

As you add more and more content to your Web page, splitting and merging cells will play a larger role. However, when you start splitting and merging a lot, the table may be a bit more difficult to control. Then you can use a combination of splitting, merging, and nesting, which is discussed next.

Nesting Tables

As previously mentioned, splitting and merging cells often can make managing a table difficult. That's why it sometimes makes sense to insert a table within a cell, offering a new set of columns and rows. This technique is called nesting. You can nest as many tables as necessary to get the results you're looking for.

Additional Table Properties

There are some additional table attributes that can help you get results that you're looking for. You have control over the horizontal and vertical placement of content within a cell. Notice in Figure 5.20 that you can use the drop-down menu to the right of the Horz and Vert options. You can align the cell content to the Left, Center, and Right horizontally or Top, Middle, or Bottom for vertical alignment.