Designing with Tables


Using tables is really the tried and true method for giving your pages a solid structure. Table structures are supported by all major browsers, they are relatively straightforward to develop, and Dreamweaver makes it really simple to create and nest tables.

To create a table, open a new document and choose Insert, Table from the menu bar. In the Table dialog box, shown in Figure 26.1, you can choose how many rows and columns you want to include in the basic table. Don't worry if you don't know exactly what your table is going to look like; you can always add more rows and/or columns later.

Figure 26.1. The Table dialog box enables you to set up your new table.


In addition to the number of columns and rows, you can also adjust the table width, border thickness, cell padding, and cell spacing. The table width can be set to a static measurement in pixels or can be a percentage relative to the size of the browser. The border thickness is a simple numeric value, as are the cell padding and cell spacing. The cell padding refers to how much room you want between the content of a cell and the interior wall of that cell. Cell spacing, on the other hand, refers to the distance between the cells themselves.

You can also use the Table dialog to establish whether or not your table will have a header column, header row, both, or none by clicking the appropriate layout.

Finally, you can set accessibility options for your table by providing a caption, caption alignment, and summary of the table and its contents. The accessibility elements are becoming more important as more and more people with disabilities are using the web. By completing these fields, you ensure that everyone can enjoy your content.

After you have finished setting the table properties, click OK and Dreamweaver constructs the table for you and inserts it into your page, as shown in Figure 26.2. You can customize your table and its layout by selecting the element you want to modify and using the Property inspector.

Figure 26.2. A new table has been inserted into the page.


For instance, to modify the properties of the entire table, click just outside the outer border to select it. After it is selected, the Property inspector provides access to similar properties offered by the Table dialog box, along with added features such as border color, background image, and background color (see Figure 26.3).

Figure 26.3. The Property inspector enables you to adjust the various properties of the table and its elements.


If you want to adjust an element of the table such as a column, row, or cell, you can do that as well. Select columns by clicking on the topmost border of the column. The entire column is highlighted after it is selected (see Figure 26.4).

Figure 26.4. A table column has been selected.


Rows are selected in a similar manner: Click the leftmost border of the row or place your cursor inside any cell within the row and select the leftmost <tr> tag in the tag selector (see Figure 26.5).

Figure 26.5. A table row has been selected.


To select cells, place your cursor inside the cell and click the rightmost <td> tag in the tag selector. When the cell is selected, the cell border is darkened (see Figure 26.6).

Figure 26.6. An individual cell has been selected.


After the element is selected, you can adjust properties such as height, width, alignment, text styles, background color, and several others. You can also join elements together by selecting multiple items and clicking the Merge button on the Property inspector. Merging cells, shown in Figure 26.7, is an easy way to adjust your table layout to meet your design needs.

Figure 26.7. The cells in the top row have been merged together.


Drawing Table Layouts and Cells in Layout Mode

Dreamweaver also provides developers a second tool for generating tables, known as Layout mode. This environment is usually more comfortable for users who have a graphic design or page layout background, because it involves drawing the table as you want it, rather than letting Dreamweaver build it and then adjusting the properties after it is placed in the page.

To switch to the Layout mode, choose View, Table Mode, Layout Mode from the menu bar. As shown in Figure 26.8, Dreamweaver alerts you to some of the tools that are useful in this mode. Click OK to close the box.

Figure 26.8. Dreamweaver alerts you to some of the useful tools in the Layout mode.


One other thing you might have noticed about Layout mode is that Dreamweaver also activates the Insert toolbar (see Figure 26.9), if it isn't already open. The Insert toolbar gives you access to the tools necessary for using this mode.

Figure 26.9. The Insert toolbar in Layout mode provides access to the tools necessary to create tables.


Drawing a Layout Table

Drawing Layout tables is simple if you have ever used a graphics program. Basically, it's the same action as if you were to draw a rectangle on your page with a mouse. Just click the Layout Table button on the Insert bar and then draw a rectangle on your page that represents the outer borders of your table. The result is a rectangle drawn in your page, as shown in Figure 26.10.

Figure 26.10. A table has been added that has one column, one row, and one cell.


Drawing a Layout Cell

After your table is in place, the next step is to create the cells that are located within the table. The process of creating cells is almost identical to the process of creating the table, except that you'll be drawing inside the table boundaries.

To draw a cell within your table, just click the Draw Layout Cell button on the Insert bar and then draw your cell inside the table (see Figure 26.11).

Figure 26.11. The cell within the table has been drawn.


Be careful, however, about how many cells you draw and the layout design you choose. What appears to be a straightforward layout of columns and rows can quickly turn into a mess of nested tables, unnecessary spacer images, and tables that don't render properly in older browsers. To help avoid this, draw out a page plan on paper that indicates what the page structure should look like. Next, when creating your tables, be sure to follow the page plan carefully to ensure that your tables are as clean as possible and will render correctly.

Nesting a Layout Table

Nesting tables refers to the process of placing a table inside another table, and it is just as easy in Layout mode as simply drawing a new table. As shown in Figure 26.12, you can select the Layout Table button in the Insert bar, place the cursor inside the first table, draw the shape of the second table, and Dreamweaver then nests the second inside the first.

Figure 26.12. The table within the table has been drawn.


Take care, however, that you don't attempt to draw the second table on top of an existing cell. Dreamweaver does not allow you to draw a second, nested table when it would be placed on top of an existing cell.

Note

Nesting cells in Standard mode is just as easy as nesting them in Layout or Expanded mode. Just place your cursor in the cell where you want to nest the table and choose Insert, Table from the menu bar. After you specify the settings for the table and click OK, the second table is nested within the first.


Using the Expanded Mode to Assist with Table Layout

When using the Layout Mode to create tables, it's sometimes difficult to work with tables that have been drawn close to one another. In addition, the borders between the tables and cells are extremely light, so they are difficult to see. To address this issue, Dreamweaver includes an Expanded mode (see Figure 26.13), which makes it much easier to select tables and table objects and to visualize the relationships between the page objects. To switch to the Expanded mode, click the Expanded button on the Insert toolbar.

Figure 26.13. The Expanded mode provides a view that makes it much easier to select table objects or resize them.


Setting Layout Table and Cell Attributes

Regardless of which mode you use to insert your tables, the common element among all the modes is that the Property inspector allows you complete control over the various attributes of your tables, rows, columns, and cells. For the most part, the Property inspector, shown in Figure 26.14, remains the same for all table objects.

Figure 26.14. The Property inspector allows you full control over your table and table object attributes.


Although most of the elements of controlling table attributes via the Property inspector are straightforward, a couple of items should be pointed out. First are the Merge Cells and Split Cells buttons in the lower-left corner of the inspector. The Merge Cells button takes all selected cells and makes them one cell. This is a really cool tool that can help you avoid having to use nested tables. The Split Cells button does the opposite: It takes a single cell and splits it into as many columns or rows as you indicate.

A second element in the Property inspector that you should be aware of is the No Wrap check box. Usually, when text exceeds the specified width of a cell, column, or table, Dreamweaver wraps the text to the next line and expands the size of the row. When the No Wrap check box is checked, however, Dreamweaver ignores the width limitations set in the W field and expands the table to fit the textno matter how long it is. Wrapping is on by default.

Moving and Resizing Cells and Tables

Just when you have developed that perfect table layout that does exactly what your site needs is usually when you discover that something has to change. For example, a client may suddenly decide to use images that stretch the table design beyond its limitations. Luckily, Dreamweaver makes it relatively easy to go back and adjust your designs, either by selecting the appropriate item or items in the table and using the Property inspector to make numeric adjustments, or by placing your cursor on the gridlines within the table and adjusting the size of your rows vertically or adjusting your columns horizontally. If you choose the latter method, just place your cursor over the gridline that you want to move and Dreamweaver changes the cursor (see Figure 26.15) to show that you can adjust the line by clicking on it and dragging.

Figure 26.15. When you place your cursor over a gridline within a table, it changes to indicate that you can drag the line to adjust the row or column size.


Note

If you are adjusting the table, row, or column in Layout mode, click on the item you want to change first, and then change the shape of the object by clicking and dragging any of the object's handles.


Tip

When you make adjustments to rows and columns, the table design does not always automatically update in the design view. To force Dreamweaver to render the changes, simply click the <body> tag in the tag selector and Dreamweaver re-renders the page and displays the changes.


Adding Content

After your table structure has been created and the appropriate sizes set, adding content is a snap. Simply place your cursor in the cell where you want to add the text, image, or media displayed and choose the appropriate command to insert it (or simply type away). Keep in mind, however, that if you insert an image or media object that is larger than the height or width restrictions of a table, row, column, or cell, the table will expand beyond its limitations to accommodate the object. This means you need to carefully consider what sizes and types of images and media you might be inserting into your pages before you complete your table design. Believe me, it is frustrating to have to rebuild your table design when you realize that it won't accommodate an image or media object.

After your content is in place, keep in mind that you can apply styles to entire columns and rows by clicking on them and then choosing the style from the Style drop-down in the Property inspector.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net