Modifying a Table Structure

---

You can modify the number of rows and columns or adjust the width, height, border, and other properties for a table in the Property inspector or, in some cases, the Modify ® Table menu options.

Select the <table> tag; then enter new values in the Rows and Columns fields to add or remove rows and columns. You can also modify the table tag and properties by hand in Code view or by using the Tag editor. Add new rows or columns by clicking Modify ® Table ® Insert Rows, or in the Columns dialog box. To remove a row or column, select it; then press Delete (Backspace), or use the Modify ® Table ® Delete options.

Setting table width and height

To control the width of a table from the Property inspector, select the table tag, enter a value into the Width field (W), and choose the table type from the drop-down menu. Table heights are seldom used because actual content in the table's cells determines the total height of the overall table.

Caution 

Although Dreamweaver contains a feature to drag the borders of a table for sizing the table, rows, or columns, I don't recommend using it. This feature does a lot more than is obvious while you are using it, such as setting values in unexpected places that will later interfere with your layout.

Modifying rows and columns

Because each part of the table controls specific properties, you must select the proper tag to access the properties of the tag using the inspector. Use the Property inspector to set widths, heights, and horizontal and vertical alignment for rows or cells. Some properties, such as horizontal or vertical alignments, are shared by the row and cell tag (Figures 34-5 and 34-6). When the values are the same, you should set the values using the <tr> row rather than the <td> cell. This writes the values to the row so you don't have to write them in each cell, reducing excessive coding to create a smaller download. That being said, you can set a row's properties and then override them in a single cell by setting different properties to that tag. Simply select the specific cell by clicking into it; then set new properties.

When to Use a Table Structure

In some cases, you'll use a table to display data, either in static form or dynamically from a data source. But the majority of your tables will be used as solutions for placement of content. For example, you cannot place two small images directly to the side of a larger image without using a table.

Tables make tricky layout possible.

Of course, it is possible (even easy) to overuse tables and to build overly complex table structures. Your goal should be to build the simplest table structures possible. The following good rules to follow are covered in-depth later in this chapter:

• Avoid nesting too many tables — placing a table inside of another table and so on.

• Build modular tables to avoid overly complex row and column spanning.

• Don't attempt to build one big table that holds everything.

• If you can position elements without a table, you can put the same elements in a single table cell.

• Do the math; be sure that column widths add up to match the table's width.

• Provide every column's width; this is the secret to getting Netscape 4x browsers to behave!

Finally, keep in mind that you are the logic behind the tools, whether working in Dreamweaver or any other Studio MX program.

Fixed-width tables use pixels values for column widths. By default, the value you add in the Cell Width field is in pixels and it is not necessary to specify it. Percentage-based tables generally use percentage values for column widths. To set a cell's width to a percentage value, type the percentage sign after the value without adding any space between the number and sign.

Figure 34-5: A cell selected makes the cell proper-ties available in the Property inspector (notice the table icon in the left corner showing the approxi-mate location of the selected cell).

Figure 34-6: A selected row showing the proper-ties available in the Property inspector

---