Inserting and Working with Tables

If you can remember from Chapter 3, "Building a Web Page," the development of our Dorknozzle web page was severely limited to inserting text and images in a vertically linear fashion. Elements on the page were organized such that we inserted images, followed by a line break, then either another image or text, and then repeated the process until the page looked somewhat presentable. Although this process may work for simple web pages, it does expose immediate drawbacks that become obvious when large amounts of text are added to the page. As you can see from Figure 6.1, the background image that we added to the top of the page begins to repeat itself near the bottom of the companydirectory.htm page.

Figure 6.1. The background image begins to repeat itself near the bottom of the page.

The reason for this flaw may not seem immediately clear but begins to reveal itself with some explanation. The image we used for the background (header.gif) is 1 pixel wide by 2000 pixels high. The positive side is that the image always tiles horizontally no matter how wide we make the page. The downside is that the image is 2000 pixels high and because the natural viewing of pages is such that users navigate up and down, if the page exceeds that 2000 pixel height, the image tiles vertically just as it does horizontally. Another problem, visible in Figure 6.2, is the fact that there's no definitive break between paragraphs. Depending on how the page's width is resized, the text and images begin to run together.

Figure 6.2. Because there's no definitive break between paragraphs, everything begins to run together.

Although these design flaws are minor, they begin to demonstrate the complexity our designs could potentially hold. As your web pages become more intricate and complex, structuring your web pages using elements such as tables becomes a viable alternative.

Working with tables in Dreamweaver can be a complex process depending on how intricate your designs become. To walk you through all the table-based features exposed by Dreamweaver, we'll rebuild our Dorknozzle website from scratch. Not only will this help you understand all the features available for working with tables in Dreamweaver, rebuilding the website will show you how the small design flaws mentioned previously can be avoided by using tables to structure your designs. To insert a new table, create a new blank page and then choose the Table option from the Insert menu (press Ctrl+Alt+T in Windows or Contrl+Option+T on a Mac). The Table dialog appears, similar to Figure 6.3.

Figure 6.3. Insert and format basic properties for a table from the Table dialog.

The features outlined in the Table dialog should start looking relatively familiar. If you've used word processing, database, or spreadsheet programs, the concept of rows, columns, and headers should be somewhat recognizable.

NOTE

Tables were never meant as a way to structure HTML elements on the page; they were meant as a way of structuring large amounts of data in well-formed and ordered format. Over time, web designers realized that the concept of rows and columns could easily structure images, text, and media elements on a page. Although this method of page design has stood the test of time, newer methods in CSS have become more prominent and are slowly becoming the new standard for structuring elements in your web pages.

The features exposed to tables in HTML go far beyond the simplicities of just rows and columns. The Table dialog exposes a few options, separated into three parts: Table Size, Header, and Accessibility. A detailed list of the features in these three parts is given here:

Rows: Enter a number in this text box to set the number of rows that the table will contain.
Columns: Enter a number in this text box to set the number of columns (cells within a row) that a table will have.
Table width: Enter a number in this text box to set the width in either pixels or a percent that a table will have.
Border thickness: Enter a number in this text box to set the thickness of the border in pixels that the table will have. If you don't enter a value here, browsers will interpret the border thickness as 1. To avoid this problem, either enter a numeric value greater than 0 or if you don't want a border, enter 0.
Cell padding: Enter a number in this text box to set the padding value between the contents of a cell and the cell border. If you don't enter a value here, browsers will interpret the cell padding as 1. To avoid this problem, either enter a numeric value greater than 0 or if you don't want cell padding, enter 0.
Cell spacing: Enter a number in this text box to set the spacing in between cells. If you don't enter a value here, browsers will interpret the cell spacing as 2. To avoid this problem, either enter a numeric value greater than 0 or if you don't want cell spacing, enter 0.
Header: Headers are a quick way of formatting rows in a table such that the contents of the header are centered and bolded. Four options exist when working with headers. Choose None (the default) if you don't want a header in your table. Choose Left if you'd like to have the left side of the table designated as a header, choose Top if you'd like to designate the top portion of the table as a header, and finally choose Both if you'd like to designate both the top and left portions of the table as headers.
Caption: As an accessibility option, enter a value in this text box to have text appear outside the table, describing the contents of the table.
Align caption: Choose an option from this menu to set the alignment of the caption in relation to the table. There are five options including Default (Center), Top, Bottom, Left, and Right.
Summary: An important accessibility option is the summary attribute of the table. Because screen readers cannot decipher the contents of a table, entering a brief description here ensures that users with screen readers can get an accurate portrayal of the contents of your table.

For this demonstration, format your table so that you have 2 rows, 2 columns, a width of 400 pixels, and border, cell padding, and cell spacing of 0. When you've formatted the Table dialog appropriately, click OK to insert the new table into the page (see Figure 6.4).

Figure 6.4. The new table is inserted into the page.

Selecting Table Elements

Before we begin formatting the page using a table, it's important to glance over some important concepts including a topic as simple as selecting the table and elements such as rows and cells within the table. As your designs become more and more complex, you'll begin to work with numerous tables on a page including tables within table cells (also known as nested tables). When that time comes, the skills you learn in this section will become invaluable.

There are numerous ways to select a table. First, you can select the table by simply clicking, holding the cursor on the page, and then dragging it into the table. Second, you can place your cursor into any cell in the table, at which point the Table Widths Visual Aid appears. From the Table Widths Visual Aid drop-down menu, you can choose the Select Table option similar to Figure 6.5.

Figure 6.5. Choose the Select Table option from the Table Widths Visual Aid's menu.

TIP

You can hide the Table Width Visual Aid by selecting the Table Widths Visual Aid from the View Options menu in the Document bar. Alternatively, you can select the Hide Table Widths option from the Table Widths Visual Aid's drop-down menu.

Alternatively, you can select the table by simply placing your cursor in a cell and choosing the <table> tag from the Tag Selector in the Document window's status bar. Furthermore, you can select the table by right-clicking in a cell to access the context menu and choosing Table, Select Table.

Finally, you can select the table by choosing the Modify, Table, Select Table. For any of these methods you choose, the result is the same: the table is selected. This is obvious because of the black border that is placed around the table.

You can also select individual rows and columns by placing your cursor either just to the left of the table row to select a row or just above the table column to select a column. Doing so changes the cursor to a black arrow and also highlights the row or column in red similar to Figure 6.6.

Figure 6.6. Place your cursor just to the left of the row to select a row or just above the column to select a column. The cursor changes to an arrow and the row or column is highlighted in red.

Clicking the mouse selects the row or column and highlights the element(s) with the same black border you saw when you selected the table. Of course, you can also select a row by placing your cursor in any cell and choosing the <tr> tag from the Tag Selector. Additionally, you can select an individual cell by placing your cursor in the cell and choosing the <td> tag from the Tag Selector.

Formatting Tables Using the Format Table Command

Now that you have an idea about the many ways tables and table elements can be selected, let's jump directly into table formatting. Although dozens of possibilities exist for modifying tables and table elements, by far the simplest is the Format Table command, located in the Commands menu. To access the Format Table dialog, simply select the table using one of the methods described in the previous section and choose the Commands, Format Table. The Format Table dialog appears, similar to Figure 6.7.

Figure 6.7. The Format Table dialog allows for quick formatting of colors, alignment, and borders.

The Format Table dialog includes numerous options for formatting your selected table including the ability to customize a color scheme, set alignments, borders, and even text styles. A complete list of features exposed by the Format Table dialog is given here:

Style list and preview: Use this list to select from a pre-configured set of table styles, also viewable from the table preview to the right of the list. Choosing an option from this list causes the options below to change according to the pre-configured properties.
Row colors: Choose a color from the first color picker to set the color of the initial row in the table. Furthermore, you can select a color from the second color picker to set the color of every other row (alternating) in the table. You can choose an option from the Alternate menu to set how the color alternates in the table. You can decide not to have the color alternate or choose to have the color alternate for every other row or every two, three, or four rows.
Top row: Choose options from the this group of menus to set attribute values for the top row (header) of the table. Options include setting the alignment of every cell in the row, setting the text style for every cell in the row, setting the background color of the row, and setting the color of text in the row.
Left col: Choose options from these two menus to set the alignment and text style for the initial column in the table.
Table: Border: Enter a numeric value in this text box to set the border size in pixels for the table.
Table: Apply all attributes to TD tags instead of TR tags: As a matter of convenience and code minimization, alignment and background color attributes are set for the table's row (<tr>). You can opt to have these attributes and attribute values set for every cell as opposed to each row by enabling this check box.

To demonstrate the look and feel that the Format Table command has, I'll select the AltRows:Earth Colors option from the Style list and click Apply. The table in the Document window is formatted to appear similar to the preview.

Because we're fairly limited in the styles we can use with the Format Table dialog, I'll opt to Cancel out of the Format Table dialog and choose the Undo Table option from the Edit menu (or press Ctrl+Z). Now that you have an idea how the Format Table command works, let's move directly into formatting the table manually using the Properties Inspector. The Properties Inspector gives us much more flexibility for customization.

Modifying Table Properties Using the Properties Inspector

Although the Format Table command is certainly a useful option, it is limited in the styles it supports. For more precise formatting of tables, it's essential that you become familiar with the options exposed by the table-based Properties Inspector. Shown in Figure 6.8, the table-based Properties Inspector becomes available when the table is selected.

Figure 6.8. Format table attributes from the table-based Properties Inspector.

The table-based Properties Inspector allows you to customize the following attributes (moving from left to right):

ID
Rows and Columns
Width and Height
Cell Padding and Cell Spacing
Alignment
Border
CSS Class
Clear Column Widths or Heights
Convert Table Widths or Heights to Pixels
Convert Table Widths or Heights to Percent
Background Color
Background Image
Border Color

To demonstrate the use and functionality of these attributes and formatting options, let's rebuild the main page (index.htm) of the Dorknozzle site.

If you haven't done so already, you can download the files for this chapter from www.dreamweaverunleashed.com. You'll want to save the files for Chapter 6 in an easy-to-find location. I'll place mine in C:\Dorknozzle\Chapter06.

If you open the index.htm file for this chapter, notice a couple minor changes. First, the title, margin widths, and margin heights have been set for you. Second, the header_bg.gif image has been resized from 1 pixel by 2000 pixels to 1 pixel by 177 pixels. You may be thinking that by shortening the image, the background will now tile as the user scrolls down the page. Although this would seem to be the case initially, you'll see how tables play a huge roll in resolving this dilemma.

To begin, insert a new table into the Document window by choosing the Table option from the Insert menu. When the Table dialog opens, format the dialog so that it contains 1 row, 1 column, has a width of 100 percent, contains no border, no cell padding, and no cell spacing. Click OK to insert the new table into the Document window.

With the table now in the Document Window, you'll notice a few details. First and most obvious is that the table spans the entire width of the Document window. Remember, this table is set to 100 percent. What that means is that no matter how I stretch the Files panel group on the right, the table always automatically adjusts to accommodate the width of the Document windowand it will do the same thing in the browser window as well. Second, notice that the Table Widths Visual Aid displays the width of the table as a percent but just to the right of that value displays the current width in pixels within parentheses. This value is simply for your information and is useful to reference in case you ever need to convert the tables' percent to a pixel value instead. Finally, notice that even though we didn't specify a border, the table appears to contain a dotted border surrounding the perimeter of the table. This is actually a visual aid and not a border. This visual aid, which can be hidden by disabling the Table Borders option from the Visual Aids menu in the Document bar, won't show in the browser.

With the table selected, you can now begin modifying various attributes from the Properties Inspector. Let's begin.

The Table ID

An attribute seldom used, the Table ID attribute simply allows you to uniquely identify the table so that it can be referenced from client-side and server-side programming languages. This attribute is entirely optional and has no effect on the table if it's left empty. We'll use the Table ID as a simple way of identifying the tables. If I say select the content table, you'll know what table to select. If I indicate to select the header table, again, you'll know what table to select. With our existing table selected, enter the value Header in the Table ID text box and press Enter.

Adding and Removing Rows and Columns

As you might expect, there are numerous ways for adding and removing rows and columns after you've inserted a table. Obviously, you could delete the table and reinsert it if you really wanted to, but there are simpler methods. For instance, to add a row, you could place your cursor in the cell and press the Tab key on your keyboard. Doing this adds a new row. Alternatively, you could use the Insert Row option, available from both the Table submenu in the context and Modify menus (or by pressing Ctrl+M). When the new row has been inserted, you can easily remove it by accessing the Delete Row option (press Ctrl+Shift+M) from the Table submenu in either the context or Modify menu. Another, more flexible, alternative for inserting rows is to use the Insert Rows or Columns dialog available from the Table submenu in both the context and Modify menus. Choosing this option opens the Insert Rows or Columns dialog (see Figure 6.9).

Figure 6.9. Use the Insert Rows or Columns dialog as an alternative method to inserting rows or columns in your table.

With the dialog open, you'll immediately notice that you can not only insert a new row below the existing row, but also insert a new row above the existing row. Even better, you have the option of inserting new columns before or after the column where your cursor is currently focused. Try entering the number 5 in the Number of Rows text box and click OK. As you can see from Figure 6.10, the five new rows are added to the table.

Figure 6.10. New rows are added to the table using the Insert Rows or Columns dialog.

It's important to note that the previous methods work only when your cursor is focused in a cell. You can change the overall count of rows and columns for the table while it's selected from the Properties Inspector by simply selecting the table and changing the text box values for Rows and Cols. To return my table back to its original state, I'll enter 1 in the Rows text box and press Enter. The table returns to its original state.

Changing Table Sizes

Aside from adding and removing rows and columns, you also have the ability to change the width and height of the table directly from the Properties Inspector. You already saw how you can use the Table dialog to initially set the width of the table; alternatively you can set the width and height of the table directly from the Properties Inspector. Because I know that the image header.gif will reside in this table, and I know that the height of the image is 177 pixels, I'll change the height of the table to this number by placing my cursor in the H text box, typing 177, making sure that pixels is selected from the menu, and pressing Enter. As you can see from Figure 6.11, the height of the table is affected.

Figure 6.11. Change the height of the table to 177 pixels from the Properties Inspector.

NOTE

Setting the height of the table isn't always necessary because you can allow the content of the table to dictate the table's height. It's for this reason that the Height option isn't available from the Table dialog. If the content of a table exceeds the height of the table, the table's height automatically adjusts to compensate for the excess content.

Obviously, if I wanted to remove the height and set it back to normal, I would simply remove the 177 pixel value from the H text box and press Enter.

NOTE

Even when a height is cleared from the table, the table never collapses to 0. By default, Dreamweaver inserts a non-breaking space ( ) character (visible only in Code view) into each cell to make it easier for you to place your cursor into the cell and begin working. If that non-breaking space weren't there, the table height would collapse to nothing and it would be difficult for you to place your cursor into the cell without having to switch to Code view.

As your web pages become increasingly complex, you'll begin to realize that keeping track of widths and heights for tables and cells can get out of hand. If you ever feel like starting over, you can clear all widths and heights from both the table and cells in the table using the Clear All Widths and Clear All Heights options. You can access these options in one of three ways: First, you can choose these options from the Table Widths Visual Aid's menu (refer back to Figure 6.5 to view the menu).

Second, you can clear column widths and column heights by clicking the Clear Column Widths and Clear Column Heights buttons located just underneath the Table ID menu in the Properties Inspector. Finally, you can choose Modify, Table, Clear Cell Heights and Clear Cell Widths options. Whichever method you choose results in the same action: either the height or width is removed.

NOTE

Unlike other table-based options such as cell padding, cell spacing, and border, leaving the Width and Height text boxes empty results in the browser interpreting the values as 0.

Setting a Background Color or Background Image

In Chapter 3, we discussed adding a background image to the page. The drawback to this method was twofold. First, if the text on the page exceeded the background image's height, the background image ended up tiling. To prevent the image from tiling, we could increase the height of the image using an image editing program. The tradeoff to this approach, however, is that the image size increases, causing the size of the page and ultimately the download time to go up as well. Fortunately we can fix this dilemma with the use of tables.

Up to this point, we've added a table to the page that is 100% wide by 177 pixels high. By simply adding the image we would normally use as the page background (header_bg.gif) as the background of the table instead, we can keep the horizontal tiling while eliminating the vertical tiling. This is possible thanks in part to the fixed 177 pixel height. Even better, because we're working with a fixed height of 177 pixels, we can crop the background image (header_bg.gif) using an image editing program from 2000 pixels down to 177 pixels, sparing us the bandwidth-hogging excess.

Before we add our background image however, let's quickly add a background color so that you can see how that process works. To set the background color for the table, select the table and choose a background color from the Bg Color Picker in the Properties Inspector similar to Figure 6.12.

Figure 6.12. Set the background color for the table by choosing a color from the Bg Color Picker in the Properties Inspector.

As you can see, adding a background color is fairly simple. Now to add a background image, I'll undo the addition of the background color, then use the point-to-file icon located just to the right of the Bg Image text box to select the header_bg.gif image from the Images directory, as shown in Figure 6.13.

Figure 6.13. Use the point-to-file icon to select the header_bg.gif image from the Images directory.

With our background image now firmly in place, we can insert our header image in the cell to finish off this portion of the design. You can do this by simply dragging the header_withnav.gif image into the table's only cell, as shown in Figure 6.14.

Figure 6.14. Drag the header image into the table's only cell.

Modifying Cell Padding and Cell Spacing

Now that you have the header of the page squared away, it's time to build the bottom portion of the site. We could insert the contents of welcome.txt (located in the Assets folder) directly underneath the existing table; unfortunately, doing this causes the text to align flush right against the edge of the Document window and, ultimately, the browser window (see Figure 6.15).

Figure 6.15. Inserting text below the existing table causes the text to align flush against the Document window and, ultimately, the browser window.

This happens because the page has its margin widths set to 0. Although we could fix this by adding a margin width, unfortunately, doing that would cause our table at the top of the page to shift to the right to compensate for the margin width. Instead, we could create a table below our existing table and adjust its cell spacing or cell padding to make up for the necessary spacing. To do this, we'll begin by adding a new table. You can begin the process by following these steps:

1.	Select the Header table by choosing the Select Table option from the Table Widths Visual Aid.
2.	With the Header table selected, choose Insert, Table from the main menu. The Table dialog appears.
3.	Give your new table 4 rows, 2 columns, a width of 640 pixels, a border thickness of 0, a cell padding of 0, and a cell spacing of 5.
4.	Click OK. Your new table is inserted into the Document window as shown in Figure 6.16. Figure 6.16. The new table is inserted and includes a cell spacing to protect the content from the left edge of the page.
5.	Assign your table the ID Content by typing `Content` in the Table ID text box in the Properties Inspector.

Now that the table is firmly in place, you can see that the cell spacing is available. Unlike the Header table (which doesn't contain spacing around the edges of the table), our Content table contains spacing around the table and in between cells. This becomes more obvious when you insert text into a cell.

You can also add spacing between the content and the cell borders by modifying the cell padding. You've seen how to manipulate the table's properties using the Table dialog, now let's modify the cell padding using the Properties Inspector. To do this, simply select the Content table by choosing the Select Table option from the Content table's Table Widths Visual Aid. Next, enter 3 in the CellPad text box in the Properties Inspector. Notice that spacing between the cell's content and the cell's borders are adjusted according to the new cell padding value.

Table Alignment

Now that we have a header table and a Content table, let's finish off the table structure of our page by adding a Footer table. If you remember from the previous design, the content at the bottom of the page was aligned to the center of the page. Although technically we don't need a table devoted to the content that will reside in the footer, creating a Footer table provides us with an opportunity to discuss table alignments. Before we discuss table alignments however, let's add the Footer table to the page:

1.	Place your cursor just to the right of the Content table.
2.	With your cursor blinking to the right of the Content table, choose the Table option from the Insert menu. The Table dialog appears.
3.	Give your table 1 row, 1 column, a width of 250 pixels, a border thickness of 0, a cell padding of 10, and a cell spacing of 0.
4.	Click OK. Your new table is inserted into the Document window, similar to Figure 6.17. Figure 6.17. The new table is added at the bottom of the page.
5.	Assign your table the ID Footer by typing `Footer` in the Table ID text box in the Properties Inspector.

With the Footer table now at the bottom of the page, you can adjust the alignment by simply selecting the table and choosing one of the alignment options from the Align menu in the Properties Inspector. Choose the Center option so that your table is center aligned at the bottom of the page.

It's important to point out that the table itself is aligned on the page, not the content within the table. To align the content within the table, select that content and choose the Center align option.

Finally, add the footer.txt content (located in the Assets folder) to the Footer table, format it, align it, and create a mailto link for Questions or Comments. When finished, your footer will resemble Figure 6.18.

Figure 6.18. Format the contents of the new table.

Working with Table Borders

There are a couple different methods for adding borders to your tables, but none is more obvious than the Border text box option located in the Properties Inspector. Selecting a table and adding a value here creates a traditional, ordinary-looking border similar to Figure 6.19.

Figure 6.19. Add a table border to your table.

You can even customize the color of the border by choosing a color from the Border color picker in the Properties Inspector, located below the Border text box option. We'll discuss a second, more flexible option later in the chapter.

Converting Table Widths to Percent or Pixels

Every now and then, you might have a need to convert an existing table created using pixels into a percentage value (or vice versa). For instance, our Footer table is displayed at the bottom of the page and has a fixed width of 250 pixels. Looking at the table and its width on the page, it appears to take up roughly 30% of the page. If I like this width, but prefer the width to be expressed in percentages as opposed to pixels, I can easily perform a conversion with a simple click of a button. To do this, I would simply select the table and choose the Convert Widths to Percent option available from the Modify, Table submenu. Although you won't notice a significant difference initially, the Table Widths Visual Aid does in fact display the table width as a percent followed by the pixel width within parenthesis. Just below that value is the width of the cell expressed as a percent, again followed by the pixel width in parentheses.

NOTE

Notice that the cell width (in pixels) displays at 230 pixels. Remember that we have a cell padding of 10 pixels on each side. Since this is the case, the 20 total pixels are deducted from the total size of the cell.

Of course, other options exist from the same menu including the ability to Convert Widths to Percent, Convert Heights to Pixels, Convert Heights to Percent. Furthermore, you can access these options directly from the Properties Inspector by clicking the icons located in the bottom-left corner of the Properties Inspector (refer back to Figure 6.8).

Modifying Cell Properties Using the Properties Inspector

As you've seen thus far, numerous options exist for modifying properties associated with a table. You've seen the basic properties that exist when a table is initially inserted from the Table dialog. You've also seen that by simply selecting a table, the Properties Inspector tailors itself to accommodate the modification of attributes associated with the table. Although many options exist for modifying properties associated with a table, so too do options for modifying the cells within that table.

As a matter of fact, different properties exist for the table as opposed to cells within the table. Cells can be merged, split, vertically aligned, horizontally aligned, and so on. Also, content within cells can be formatted using the text formatting properties you learned about in Chapter 3. The content can also be aligned within the cells, prevented from wrapping within the cells, or even converted to a header. The table, on the other hand, doesn't support these properties (for instance, the content as a whole can't be formatted and cells can't be manipulated). In general, it's safe to say that the properties exposed by the table are broad and specific to the table as a whole while properties exposed for individual cells are more refined and thorough and allow for cells to be formatted independently of one another. As you can see from Figure 6.20, you can access the cell-based Properties Inspector by simply placing your cursor within a cell.

Figure 6.20. The cell-based Properties Inspector becomes available when you place your cursor into a cell.

The top portion of the Properties Inspector exposes the text-based formatting options covered in Chapter 3, but the bottom portion of the Properties Inspector outlines key properties (moving from left to right) supported by table cells including:

Merging and Splitting Cells
Horizontal and Vertical Alignment
Width and Height
No Wrap

Header
Background Image
Background Color
Border Color
Page Properties

To demonstrate these properties, let's format the cells in the Content table.

Changing Cell Widths and Heights

So far, you've seen how to manipulate the width and height of the table as a whole. The cells within a table however, function slightly different. Earlier in the book, we selected the Content table and assigned it a width of 640 pixels. The table is inserted at the 640 pixel width, but by default, the width of each cell is given a width equal to the width of the table divided by the number of cells in the specific row. So in our case, the cells appear to have a width of roughly 320 pixels each. Although this may have seemed to be the case, in fact, inserting images (subheader_about.gif and subheader_companyevents.gif) into the first and third cells of the first column reveals otherwise. As you can see from Figure 6.21, inserting content into the first cell shifts the cells out of proportion.

Figure 6.21. Insert an image into the first cell to see the cells shift out of proportion.

Although this outcome doesn't seem all that clear at first glance, it becomes obvious with some explanation. Dreamweaver initially makes an attempt to proportionately size your tables, but it always relies on your manually setting the size of the cells individually. Because we didn't set the size of each cell, Dreamweaver accommodates the addition of content in the first cell by automatically moving the cells over to the right, essentially freeing up room for you to work.

The lack of cell widths are also evident from the Table Widths Visual Aid. As Figure 6.22 indicates, while a set width exists for the table, the two individual width values for the columns are empty.

Figure 6.22. Cell width values are missing from the Table Widths Visual Aid.

Setting the width of columns (which sets the width of each cell within the column) in the Properties Inspector is just as simple as it was for the table. To set the widths of our two columns, follow these instructions:

1.	Place your cursor into a cell in the first column. Immediately the Table Widths Visual Aid becomes available.
2.	Choose the Select Column option from the cell's visual aid menu (not the table's visual aid menu), as shown in Figure 6.23. Figure 6.23. Choose the Select Column option from the cell menu in the Table Widths Visual Aid.
3.	In the Width (W) text box in the Properties Inspector, enter the value `275` and press Enter. The table's column resizes accordingly.
4.	To make the table functionally correct, repeat the process for the second column, this time entering a width of `338` in the Width (W) text box in the Properties Inspector.

When you're finished, the table is resized proportionally and the Table Widths Visual Aid contains width values for each column.

TIP

You might be thinking that 640 pixels (the width of the table) minus 275 pixels (the width of the first column) doesn't equal 338 pixels, but instead 365. When sizing columns, it's important to take cell spacing and cell padding into consideration. If you have cell padding and cell spacing, those values must also be deducted from the total size of the table.

If you need to clear the widths for a column, you can do one of two things. First, you can select the entire column (which also selects every cell in that column) and physically remove the numeric pixel value from the Width (W) text box in the Properties Inspector. Second, you can easily remove the width of a column by accessing the column-based menu from the Table Widths Visual Aid and choosing the Clear Column Width option.

Of course, cell heights can also be modified. There are two reasons mdoifying cell heights has not been covered in more detail. First, it's just as simple to modify the height as it is to modify the width. When you've learned how to modify the width, modifying the height on your own should be easy. Second, it's not important that you set a cell height. Generally, you'll allow the contents within the cell to adjust the height automatically.

Splitting and Merging Cells

After you've inserted a table onto the page, more often than not, you might have to merge cells to create more space in the table. For instance, although you might have to work with two independent cells in a row, you might have a bigger image that needs more space than what has been allotted for the columns. Instead of creating a whole new table, you can simply merge cells in an existing row into fewer cells, essentially freeing up the needed space.

To merge two or more cells in a table, highlight by clicking, holding, and dragging the cells you want to merge. With the cells highlighted, merge the cells by choosing the Merge Cells icon in the Properties Inspector, by selecting the Merge Cells option from the Table submenu in the context menu, or by choosing the Merge Cells option from the Modify, Table submenu. Any method you choose merges the cells. With the cells now merged, add the subheader_about.gif image (if it hasn't been added already) to the cell. Repeat the process for the last two rows, adding the image subheader_companyevents.gif to the third cell. The result of the merger and image addition will resemble Figure 6.24.

Figure 6.24. Merge two or more cells into a a single cell by highlighting the cells to merge and clicking the Merge Cells icon in the Properties Inspector.

Aside from simply merging cells, you can also split bigger cells into smaller cells. For instance, I can place my cursor within a recently merged cell and click the Split Cells icon in the Properties Inspector. Doing this opens the Split Cells dialog box (see Figure 6.25).

Figure 6.25. The Split Cells dialog allows you to split cells into smaller individual cells.

The Split Cells dialog defaults to the Split Cell into Columns option. You can enter a value to split the cell into columns and click OK. The cell splits back into two individual cells as opposed to one. The cell splits into the width values already set for the table.

NOTE

Dreamweaver's Split Cell dialog always defaults its values to the natural development of the table. Because the table's structure appears to contain two columns overall, Dreamweaver defaults to a two-column split. Also, entering a number greater than the column count of the table results in the split occurring within the left-most cell. Try it on your own to see the results.

Of course, the Split Cells option is also available from the Table submenu in both the context and Modify menus.

An alternate way of splitting and merging cells and rows is to use the Increase/Decrease Row and Column Span options available from the Table submenu in either the Context or Modify menus. To use these options, simply place your cursor in the cell that has been merged and select Decrease Column Span or press Ctrl+Shift+[. To split the same cells back up, choose the Increase Column Span option or press Ctrl+Shift+]. These methods are quick alternatives to using the split and merge cell features.

Setting Horizontal and Vertical Alignments

You can specify horizontal and vertical alignments for a cell by choosing from options available from the Horizontal (Horz) and Vertical (Vert) menus in the Properties Inspector. To demonstrate an alignment, I'll add the intranetsymbolism.gif image to the cell just below the company intranet subheader image. As you would expect, the image looks fine in the cell. The same can't be said after I insert the welcome text (available by dragging welcome.txt into the page) into the cell next to the image. As you can see from Figure 6.26, the image is shifted to the vertical center of the cell.

Figure 6.26. Inserting text into one cell causes elements in a second cell that are shorter to align to the vertical center of the cell.

Although this result is perfectly normal, it may not be what you intend. A more desirable result would be to align the image to the top of the cell so that it appears as though the text and image are both aligned to the top of the page. To do this, simply place your cursor into the cell that contains the image and select the Top option from the Vert menu. The image shifts to the top, similar to Figure 6.27.

Figure 6.27. The image is aligned to the top of the cell.

TIP

It may not seem possible to insert your cursor between the image and the cell because both are sized to 275 pixels. You can however, select the image and then press the right arrow key on the keyboard. This action forces the cursor between the image and cell border, allowing you to choose the Top option from the Vert menu. A second way of selecting the cell is to choose the <td> tag from the Tag Selector.

It's up to you to select the specific alignments for your cells. Fortunately, content can be aligned virtually anywhere in the cell by simply using the options from both menus.

NOTE

It may seem redundant to have alignment icons in the top half of the Properties Inspector and a Horizontal Alignment menu that list essentially the same options. The difference, however, is element specific. Choosing an option from the Horizontal Alignment menu creates an align attribute within the <td> tag similar to <td align="center">. Depending on the content of the cell, the align icons create a <span align="center"> or a <div align="center"> tag in the <td> tag. The former is much more efficient code.

Setting the Background Color, Image, Border Color, and Cell Wrapping

Looking at the text to the right of the intranetsymbolism.gif image in Figure 6.27, you can see that the text is cleanly formatted with spacing and line breaks. Of course, we didn't add the spacing or the line breaks at the end of each line; Dreamweaver does it automatically for us. When a line reaches the end of the cell, the text breaks and keeps going on to the next line as you might expect. But what if you didn't want that to happen? What if you wanted the text to keep going and automatically stretch the width of the table regardless of the pixel size we explicitly set? A good way to prevent text within a cell from wrapping is to use the No Wrap check box in the Properties Inspector. The question becomes, "Why would I want to prevent the text from wrapping within the cell?" Assume for a moment that you had a website that contained a tabbed navigation bar at the top of the page. Depending on the page you happen to be on, those tabs change based on the page and the content within the page. Assuming that you have a few dozen web pages in your site, your tabs could number in the hundreds. Would you want to create a few hundred different images for every tab in your website? Probably not, right? Instead, you could create dynamic tabs that stretched (using the No Wrap option) based on the content in the cell. This way, you're only creating the tab structure once; the text within the tab is the only part that changes. Doing this would make your tabbed navigation much easier to manage. To demonstrate my point, let's do a quick example:

1.	Create a new blank HTML page by choosing the New option from the File menu, choosing HTML from the Basic Page category, and clicking Create. The new blank page appears.
2.	Create a new table by choosing the Table option from the Insert menu. When the Table dialog appears, create a table with 1 row, 3 columns, a width of 150 pixels, a border thickness of 0, cell padding of 0, and cell spacing of 0, and click OK. The new table appears within the page.
3.	Resize the first column to 24 pixels and the third column to 30 pixels.
4.	Add the `lefttab.gif` image to the left cell and the `righttab.gif` image to the right cell. These images are both located in the NoWrap folder in the Images folder of the project.
5.	Set the middle column's background image to `bg.gif` by placing your cursor in the cell and using the point-to-file icon located to the right of the Bg text box in the cell-based Properties Inspector. After it's added, the table should resemble Figure 6.28. Figure 6.28. Create a table to mock the functionality and look of a tab.
6.	With your cursor still focused in the middle cell, choose the Center option from the Horz menu and the Bottom option from the Vert menu in the Properties Inspector.
7.	Select the table, choose edit, Copy from the main menu, place your cursor just after the table and press Shift+Enter twice to create two line breaks. Then choose Edit, Paste. Now you'll have two tables that look like tabs.
8.	Place your cursor in the middle cell of the first table and choose Insert, Hyperlink. When the Hyperlink dialog appears, enter the text `Option 1` and type the `#` (to create an anchor with no link) symbol in the Link text box. Click OK.
9.	Place your cursor in the second cell of the second table and choose Insert, Hyperlink. When the Hyperlink dialog appears, enter the text `This is a really long Option` and type the `#` symbol in the Link text box. Click OK.

With everything done, the two tabs should resemble Figure 6.29.

Figure 6.29. The two tables that resemble tabs are added to the page. One tab has little text and fits perfectly in the tab. The second tab contains long text that wraps.

Because of the fixed width of the table, the second cell in the second table automatically wraps the contents within it. To allow the tab's size to fluctuate, place your cursor in the middle cell of the second table and choose the No Wrap check box. As you can see from Figure 6.30, the tab's size automatically adjusts.

Figure 6.30. The No Wrap check box in the Properties Inspector prevents the table's cell from wrapping to the next line.

The upside to this method is that the tabs will never be smaller than 150 pixels no matter how short the contents. Because you can guarantee that there will only be three images used, the contents within the cells are all that change. You may even want to create a snippet from this design so that you can just drag in the table whenever you want to create a new tab.

Aside from setting the No Wrap option in the Properties Inspector, you also saw how to use the Background Image (Bg) in a cell. Although the background image can be set for the entire table, the cell-based background image sets only the background image for the selected cell. Of course, the background color can also be set by choosing the Bg color picker available from the Properties Inspector. To demonstrate this feature, follow these steps:

Create a new table by choosing the Table option from the Insert menu. When the Table dialog appears, create a table with 1 row, 1 column, a width of 200 pixels, a border thickness of 5, cell padding of 0, and cell spacing of 0, and click OK. The new table appears within the page.

Add a background color to the cell by choosing a color from the Bg color picker in the Properties Inspector. The table appears in a beveled state similar to Figure 6.31.

Figure 6.31. Adding a background color to a table that has a border causes the table to appear in a beveled state.

Converting a Cell to a Header

You've already seen how to work with headers in the Table dialog. Dreamweaver also supports the ability to convert an existing cell into a table header through the use of the Header check box in the Properties Inspector. To use this functionality, simply place your cursor in a table cell and enable the Header check box. The cursor in the cell is centered, and any text typed into the cell is made bold.

WHY A SEPARATE TAG FOR A TABLE HEADER?

Tables without headers are inserted with the following code:

 <table> <tr> <td colspan="2">Header cell</td> </tr> <tr> <td>Cell 3</td> <td<Cell 4</td> </tr> </table>

In this case, the table has 2 rows (represented by <tr>) and 3 cells (represented by <td>). The first cell uses the colspan attribute to merge the cells into one cell that spans the width of the bottom 2 cells. Converting a cell into a header removes the row and cell containing the colspan and replaces it with a <th> tag as follows:

 <table> <th>Header cell</th> <tr> <td>Cell 3</td> <td<Cell 4</td> </tr> </table>

As you can see, the addition of the table header results in cleaner and more concise code, which ultimately means faster loading of the web page by the browser. Try both code blocks in Dreamweaver on your own to see the effects.

Nesting Tables

As you can see from the design thus far, our page is becoming complex in its structure. So far, we have three tables: one for the header, one for the content, and a third for the footer. Obviously, it doesn't have to stop there. Let's assume we wanted to add a fourth table to structure the events that will reside under the company events header. If that's the case, we'll need to add a nested header in the cell just below the company events header image. A nested table is just that, a table that nests within a cell of an existing table. An events table is a perfect example of a nested table within a cell. Because we have four events, complete with dates and times, we'll need to add another table to structure that content so that its presentation is cleaner than the bulleted list we used in Chapter 3. To create the nested table, follow these instructions:

1.	Place your cursor in the last cell of the Content table (or more specifically, in the cell just below the company events header) and merge the two cells if you haven't done so already.
2.	Create a new table by choosing Insert, Table. When the Table dialog appears, create a table with 5 rows, 3 columns, a width of 400 pixels, a border thickness of 0, cell padding of 2, and cell spacing of 0, and click OK. The new table appears nested within the cell.
3.	Resize the first column to 30 pixels, the second column to 185 pixels, and the third column to 185 pixels.
4.	Add the `icon_calendar.gif` image to the bottom four cells in the leftmost column.
5.	Add some content that represents typical company events and format the text. When you finish, the table should resemble Figure 6.32. Figure 6.32. Add the icon and some generic company events to the new nested table.

As you can see, nesting tables provides us with much more flexibility in our design. Because of nesting, we're no longer limited to a stringent design, instead we now have the opportunity to fine-tune and precisely position elements within our page.

Working with Expanded Tables Mode

Up until this point, we've focused on one mode of development: the Standard mode. The Standard mode, which is the default form of development, allows you to add and work with tables as you have done so far. It's important to note however, that two other modes exist: the Expanded Tables mode and the Layout mode. Although we'll discuss the Layout mode soon, the Expanded Tables mode warrants discussion now.

As you can see, our table structure has gotten fairly complex especially now that we have a nested table. You've probably noticed that selecting rows, cells, and even the nested table is a bit more difficult than it was at the beginning of the chapter when we were working with just one table. Although it certainly may seem frustrating to get your cursor in the right place in between nested tables and cells, it's important to note that there is relief using the Expanded Tables mode. The Expanded Tables mode, available from the Layout category in the Insert bar, temporarily adds cell spacing and cell padding to your cells in Design view, essentially making it easier for you to place your cursor in between and to work with cells and nested tables. You can use the Expanded Tables mode by clicking the Expanded button located in the Layout category of the Insert bar similar to Figure 6.33.

Figure 6.33. Enter Expanded Table mode by choosing the Expanded button from the Layout category in the Insert bar.

After you click the Expanded button, Dreamweaver provides you with a Getting Started in Expanded Tables Mode dialog, explaining the mode. Simply click OK to close the dialog and return to your page. Expanded Tables mode creates spacing between cells, essentially allowing easy placement of the cursor in between cells and nested tables.

To exit the Expanded Tables Mode, simply click the exit link in the blue shaded menu bar located just below the Document bar. Your page returns back to the Standard mode.

Inserting and Working with Tables in Layout Mode

The last mode of development when working with tables is the Layout mode. Layout mode allows you to work in a print program-like environment where tables and cells are drawn onto the page. After they are drawn onto the page, you can easily manipulate basic properties for the tables and cells by clicking the border of the drawn table or cell and dragging until you find the right width.

To demonstrate Layout mode, let's open the companydirectory.htm file. As you'll notice, the content for this file has been completely stripped out so that we can redevelop it using tables, and more specifically, tables in Layout mode. With the page now open, you're ready to navigate to the Layout mode option. You can find all the options for working with Layout mode by choosing the Layout category from the Insert bar and clicking the Layout button. Dreamweaver switches to Layout mode, as shown in Figure 6.34.

Figure 6.34. Switch to Layout mode when you'd rather draw tables and cells on the page.

Now that the page is in Layout mode, the following functionality is exposed:

Layout Table: Choosing this option allows you to draw a table onto the page.
Draw Layout Cell: Choosing this option allows you to draw cells within a drawn table.

After you've drawn cells within a table, the following four options become available:

Insert Row Above: Inserts a row above a cell.
Insert Row Below: Inserts a row below a cell.
Insert Column to the Left: Inserts a column to the left of a cell.
Insert Column to the Right: Inserts a column to the right of a cell.

Now that you have a basic idea about the functionality exposed within Layout mode, let's use it to lay out a table with some cells.

Drawing Tables

In Chapter 3, we added content to the page using the basic text formatting properties available to us from the Properties Inspector. If you viewed the page in a browser, you may not have been happy with the overall layout and the shifting that occurred in the layout when the browser was resized. As was the case in index.htm, we can remedy the situation by adding a table to control the structure of images and text for the employees in our fictitious company. We'll begin by drawing new tables in Layout mode. To draw tables, follow these steps:

1.	We don't want to just randomly draw a table on the page. Instead we'll want to enable our rulers so that we can create a table with a precise width and height from the onset. To show your rulers, choose View, Rulers, Show or press Ctrl+Alt+R (in Windows) or Contrl+Option+R (on the Mac).
2.	With your rulers now visible, we can use the new guides feature in Dreamweaver 8 to initially create the structure of the `companydirectory.htm` page. This features allows us to draw layout tables that snap to the preset width and height of the guides. To create the guides, click, hold, and drag out of the rulers until you've created a guide structure that mocks Figure 6.35. Notice that guides are set horizontally at 177, 222, and 322 pixels, and vertically at 640 pixels. Figure 6.35. Drag guides onto the page to create an initial structure for the layout tables. TIP If you're having trouble setting the guides at the exact positions, double-click the guide. The Move Guide dialog opens, which allows you to precisely position the guide based on a pixel value you set.
3.	With the guides now set, place your cursor onto the page and click the Layout Table icon in the Insert bar's Layout category. Your cursor changes to a crosshair.
4.	Using the new tool, draw a square by clicking, holding, and dragging from the top, leftmost edge and moving down and right until the table's width is the 640 pixel width and the 177 pixel height, consuming the first rectangular area outlined by the guides. Although Dreamweaver doesn't allow you to set an ID for a table in Layout mode, we'll assume that this is the Header table. Later, we'll explore the Autostretch option to make this table span 100% of the browser region. The result resembles Figure 6.36. Figure 6.36. Draw a new table on the page that is 640 pixels wide and 177 pixels high.
5.	Draw another table below the Header table. To do this, click the Draw Layout Table icon again, then click, hold, and drag from the top, leftmost edge (below the existing Header table) and moving down and right until the table's width snaps to the guide set at 640 pixels and snaps to the guide at 322 pixels. The result resembles Figure 6.37. Figure 6.37. Draw a new table on the page that spans 640 pixels wide and reaches the 322 pixel guide.
6.	With your table now in place, switch to Standard mode to see the table transformation. You can temporarily hide the guides by choosing View, Guides, Show Guides. As you can see from Figure 6.38, the table looks exactly as it would had you added it using the Table dialog. The difference in this case is that the drawing tools are a bit friendlier to use and much more flexible to manipulate than tables are in Standard mode. Figure 6.38. Even though it doesn't look like much of a table in Layout mode, the transformation is exact in Standard mode. NOTE To make it easier to draw tables, press Ctrl+Shift+I to hide all visual aids that seem to get in the way and prevent you from drawing a new table under the existing one. When you finish drawing all your tables, press Ctrl+Shift+I again to redisplay the visual aids.
7.	Switch back to Layout mode to continue the editing process for the new table.

NOTE

If you draw a layout table in the middle of an empty document, Dreamweaver creates it as a table nested inside a larger table. If this isn't what you intended to happen, undo, and try redrawing.

With the new table drawn and firmly in place, manipulating properties such as width and height in Layout mode are effortless and much more straightforward than they are in Standard mode. For instance, to change the width or height, simply click, hold, and drag the table's selection handles until we reach the desired width or height. Although this is certainly simple enough, it's even more precise when you use the features in the Properties Inspector. As you can see from Figure 6.39, these properties are slightly different from those exposed when the table is in Standard mode.

Figure 6.39. The Properties Inspector supports basic table formatting options while in Layout mode.

The following list details the properties shown in callouts for Figure 6.39:

Fixed Width and Height: Sets a width and height in pixels for your table. The table is considered a fixed width and remains the specific width and height even if the user expands the page in the browser.
Autostretch: Autostretch is the term given to tables in Layout mode that are set to percentage values. Our Header table (the layout table we created first) for instance, could be considered an autostretch table since it stretches the width of the browser window regardless of browser width. Again, we'll autostretch this table soon.
Background Color: Sets the background color of the table.
Cell Padding and Cell Spacing: Sets the table's cell padding or cell spacing based on a pixel value entered in these text boxes. To make our table consistent with the Content table we inserted in the index.htm page, select the second layout table and enter values of 3 for cell padding and 5 for cell spacing.
Clear Row Heights: Allows you to quickly remove the height of the table. This option is also available from the Table Widths Visual Aid menu.
Make All Widths Consistent: If you have fixed-width cells in your layout, choosing this option makes the cell widths match their apparent width on the screen. When you enable the Make All Widths Consistent option, Dreamweaver resets the width specified in the HTML for each cell in the table to match the width of the content within that cell.
Remove All Spacer Images: Choosing this option removes spacer images from your layout table. Used specifically with autostreched tables, spacer images are transparent images used to control the spacing in your layout.
Remove Nesting: Removes a nested table without losing its contents. When the nested table is removed, the layout cells (mentioned in the next section) that it contained become part of the outer table.
Class: You can apply CSS styles to your tables by selecting a created class from this menu. CSS is covered in more detail in the next chapter.

Now that you have an idea about how tables are inserted into the page, let's move on to adding cells.

Drawing Cells

After you've drawn a table on the page, you're ready to begin structuring the overall layout of the table by drawing cells. To draw cells within your table, follow these steps:

1.	Select a table to draw a layout cell into. Now select the Draw Layout Cell icon from the Insert bar. Your cursor immediately changes to the crosshair when you mouse over the layout table.
2.	Draw a cell in the first Header table that spans 640 pixels wide by 177 pixels high. The layout cell snaps to the guides. The result appears similar to Figure 6.40. Figure 6.40. Draw a layout cell that covers the Header table.
3.	Draw a cell in the Content table that spans from the top left all the way over to the far right and down to the first guide set at 222 pixels. This cell will hold the `subheader_about.gif` image (see Figure 6.41). Figure 6.41. Draw a layout cell that covers the top third of the Content table.
4.	Draw another cell that spans a square of about 100 pixels and that reaches the bottom of the Content table. This cell will eventually hold the employee's headshot image. The result resembles Figure 6.42. Figure 6.42. Draw a second layout cell in the Content table to hold the headshot image.
5.	Draw a third cell to consume the final area of our Content table. This cell will hold the bio text for the employee. When you've finished, the result resembles Figure 6.43. Figure 6.43. Draw a third cell to hold the bio text.

You'll begin to notice a few interesting aspects when drawing cells. First, the cells attempt to snap themselves to the border of the layout table when you're within 8 pixels of the border. Second, the cell can't be resized past the boundary of its containing table. Also, you'll notice that a cell is highlighted in white while areas not defined as cells are highlighted gray. (You may or may not see the gray areas. It ultimately depends on how you drew the cells within the table.) This gray area is part of the layout table and cannot have content added to it in Layout mode.

In general, keep these points in mind when drawing cells within a layout table:

Cells and nested tables automatically snap to existing cells when within 8 pixels of an existing cell or guide.
A layout table cannot be resized so that it is smaller than the cells it contains.
A layout cell cannot be resized beyond the borders of its containing table.
No overlapping is allowed.
A layout cell is always at least as large as the content it contains.

After the cells have been added to the layout table, you can select them in an effort to modify their properties in the Properties Inspector. To select a cell in a layout table, simply select the border of the cell to which you want to make modifications. Notice that as you get close to the border of the cell, the cell highlights from the blue border to the red border. When this happens, you can select the cell. With the cell selected, the Properties Inspector changes to accommodate property modifications, as the callouts in Figure 6.44 show.

Figure 6.44. The cell-based Properties Inspector supports various property modifications while in Layout mode.

A complete list of the properties supported by the cell-based Properties Inspector in Layout mode is given here:

Fixed Width and Height: Sets a width and height in pixels for your cell. The cell is considered a fixed width and remains the specific width and height even if the user expands the page in the browser.
Autostretch: Assign a value in this text box to have the cell span a width of 100% in its layout table.
Background Color: Sets the background color of the cell.
Horizontal and Vertical Alignment: Sets the horizontal alignment (Left, Center, Right) and the vertical alignment (Top, Middle, Bottom, Baseline) of the content in the cell. Layout cells always default to a vertical alignment of Top.
No wrap: Check this box to prevent text within a cell from wrapping to the next line.
Class: You can apply CSS styles to your cells by selecting a created class from this menu. CSS is covered in more detail in the next chapter.

With your cells now created, you're ready to begin adding content.

Adding Content to Layout Cells

Adding content to layout cells is just as easy as it would be if the table were in Standard mode. To add content such as images, select the image from the Files panel and drag it into the cell. For instance, I'll drag the header_withnav.gif image into the Header cell. Next, I'll drag the subheader_companydirectory.gif image into the first cell of the Content table. Finally, I'll drag the head_adatheadminassistant.gif into the second cell.

Adding content is just as easy. For instance, you can open the companydirectory.txt file located in the Assets folder, copy Ada's bio, and then paste it into the cell next to her picture. Of course, you can format the content once it's in the cell as well. When you're finished, your design should resemble mine pictured in Figure 6.45.

Figure 6.45. Adding text into a layout cell is simply a matter of copying and pasting.

Of course, Ada isn't the only employee in our directory. The problem becomes adding more rows to our layout table. In Standard mode, we had numerous options for adding a new row to our table. For instance, we could place our cursor into the last cell and press Tab to create a new row; we could access the Insert Row option from the Table submenu in both the context and Modify menus; and we could also use the Insert Rows or Columns dialog available from both the context and Modify menus. The Layout mode however, doesn't support these options. Instead, we must use the Insert Row Above or Insert Row Below buttons located in the Layout category of the Insert bar. Clicking one of these buttons effectively creates a new row in our layout table. To use this feature, simply place your cursor in the last cell and click the Insert Row Below button. A new row with the same dimensions as the previous row is added directly underneath (see Figure 6.46).

Figure 6.46. Use the Insert Row Below button in the Layout category of the Insert bar to create a new row in a layout table.

Repeat the process, adding Agnes's picture and bio. When you're done with Agnes, add a new row and continue adding employee images and bios until you have all the bios added to the page. When you're finished, you can switch to Standard mode and format the cells to your liking.

TIP

Aside from just adding new rows above or below the existing layout cell, you can also use the Insert Column to the Left and Insert Column to the Right buttons to create new columns in your layout table.

Working with Autostretch Tables

As I mentioned earlier, Dreamweaver refers to tables and cells that span a width of 100% as Autostretch tables in Layout mode. Although tables and cells are assigned fixed widths when they're drawn on the page, you can always convert a fixed-width table or cell to an Autostretch table or cell by selecting the Autostretch radio button in the Properties Inspector when either the layout table or layout cell is selected. A second option is to choose the Make Column Autostretch option from the Column Widths Visual Aid's menu.

To demonstrate the use of the Autostretch option, select the Header layout table. Next, click the Autostretch radio button in the Properties Inspector. The Choose Spacer Image dialog appears, similar to Figure 6.47.

Figure 6.47. Selecting the Autostretch radio button in the Property Inspector opens the Create Spacer Image dialog.

Spacer images are generally 1-pixel by 1-pixel transparent GIF images and can be inserted into a table cell and given a fixed width attribute in pixels. The spacer image stabilizes the column containing that cell, preventing it from shrinking any smaller than the dimensions of the spacer. If you define a column as Autostretch, and other columns in the table don't have some sort of content in them propping them open, the stretching column shrinks the other columns down to nothing, regardless of what their fixed-pixel widths are. If your table's fixed columns contain content such as images, the images will keep the columns from shrinking. But in case they don't, this is the time to use a spacer image. As you can see from Figure 6.47, the Choose Spacer Image dialog contains the following options:

Create a spacer image file: Choose this option to have Dreamweaver automatically create the 1-pixel by 1-pixel transparent GIF image for you. Dreamweaver places this image in the Default Images folder or, if this folder is not defined, in the root of your project.
Use an existing spacer image file: Choose this option if you've created a spacer image already and would prefer to use it.
Don't use spacer images for autostretch tables: Choose this option when you'd prefer not to use spacer images. This option is handy when you already have an image in a table or cell that is marked as Autostretch.

You can also add a spacer image by selecting the Add Spacer Image option from the Column Widths Visual Aid menu. If you'd prefer to remove existing spacer images from all columns in a table, you can select the Remove All Spacer Images option from the Table Widths Visual Aid menu or select the Remove All Spacer Images icon from the Property Inspector.

You can set Dreamweaver to automatically add spacer images when working with Autostretch tables by opening the Layout Mode category in the Preferences window. In Chapter 5, "Defining Preferences," we learned that the Layout Mode category contains options for setting color preferences in Layout mode as well as various spacer image preferences including a radio button that allows you to tell Dreamweaver to always use a spacer image when working with Autostretch tables. Refer to the previous chapter for more information.

To round out our design, choose the Don't Use Spacer Images for Autostretch Tables option and click OK. Notice that the Header layout table now stretches to consume 100% of the Document window. To add the background image to the table, simply switch to Standard mode, select the table, and use the point-to-file icon in the Bg Image text box of the Property Inspector to point to the header_bg.gif image file in the Files panel. The result resembles Figure 6.48.

Figure 6.48. Add the header_bg.gif image as a background to the Header table of our design.

That's it! You've effectively created a table-based structure for your site using the Layout mode.

Importing Tabular Data

Earlier in the chapter, we built a table in the index.htm file to hold the company events. Remember that we created a table with 5 rows and 3 columns and then manually added an icon, a few company events, and a time for each event. In a real-world situation, however, it's safe to say that the process of adding company events would be much more dynamic than a web developer manually adding company events to a table in the organization's main web page. There are numerous options for making this solution more dynamic. One solution, using a database to feed company events to a table on the main page, is discussed in Part V, "Dynamic Web Page Creation." For now, let's discuss a simple alternative: the Import Tabular Data feature, available from Dreamweaver's Insert menu.

The Import Tabular Data option, available from the Table Objects submenu in the Insert menu, allows you to quickly build an HTML table based on preformatted tab-, comma-, semicolon-, or colon-delimited files. What this means is that Herbert over in HR can maintain a spreadsheet of company events. When he's ready to have a set of new events posted on the website, he can export his spreadsheet to one of the delimited options, and then send it to you for quick import using the Import Tabular Data feature.

For our example, we'll use a tab-delimited file located in the Assets folder called companyevents.txt. Opening the file reveals that the text in the file is in fact separated by tabs similar to Figure 6.49.

Figure 6.60. A tab-delimited file contains text separated by tabs.

Dreamweaver, recognizing that the file is separated by tabs will pick apart all text elements in this file and place them into their own cells in a new table. To see this feature for yourself, first open index.htm, remove the existing company events table (leave your cursor in the cell), and choose Insert, Table Object, Import Tabular Data. The Import Tabular Data dialog appears (see Figure 6.50).

Figure 6.50. The Import Tabular Data dialog allows you to import a file based on a delimiter option and then format the table that will be created for the content.

Notice that the Import tabular Data dialog contains options for importing the file to use, choosing a delimiter option, and formatting the table that will be created for the content. The complete list of functionality exposed by the dialog is outlined here:

Data file: Click the Browse button next to this field to look for and select the file to use. For our example, browse to the companyevents.txt file located in the Assets folder.
Delimiter: Choose a delimiter option. Options include Tab, Comma, Semicolon, Colon, and Other. Choosing Other enables a text box allowing you to type in the delimiter symbol. For our example, choose Tab.
Table width: Choose the Fit to Data radio button to have the newly generated table added to the page with no widths specified. Because no widths will be specified, the table will be as wide as the longest text element in the cells. You can also choose the Set option to specify a width in either pixels or percent manually. For example, choose the Set To radio button, type the value 100 in the text box, and choose the Percent option from the menu.
Cell padding and Cell spacing: Assigns a cell padding, a cell spacing, or both to your table. For our example, enter 2 for cell padding and 0 for cell spacing.
Format top row: Select an option from this menu to format the top row of your table. Options in this list include Bold, Italic, and Bold and Italic. For our example, we'll choose Bold.
Border: Enter a value in this text box to assign a border to your table. For our example, I'll enter 0.

When you've finished reviewing the options and have made the appropriate additions and selections, click OK. Instantly, the dialog closes and the new table is added to your page similar to Figure 6.51.

Figure 6.51. The new table is created based on the content of our tab-delimited file.

The final task is to format the table, add a new column in front of the existing content, and then add the calendar icon to the cells in the new column. When you're finished, the table will resemble Figure 6.52.

Figure 6.52. Format the table, add a new column in front of the content, and add the calendar icon to the cells in the new column.

Sorting Tables

In the previous section, we imported data that created a table with four rows of content. Imagine that instead, you imported data that created hundreds of rows in a table. Even worse, imagine that all your rows were unsorted in the table. Trying to manually sort a table that contained hundreds of rows could take hours. Instead, you can use the Sort Table command to have Dreamweaver automatically sort the table based on a column that you choose. To use this feature, select the newly created company events table and choose the Commands, Sort Table command. The Sort Table dialog appears (see Figure 6.53).

Figure 6.53. The Sort Table command allows you to sort a table based on a specified column.

The Sort Table command allows you to sort the table based on a primary and secondary column. A complete list of features is provided here:

Sort by and Order: Choose an option from the Sort By menu to specify the column from the table on which the sort will be performed. Furthermore, you can select options from the Order menus to specify how the sort should be performed. You can perform alphabetic and numeric sorts and then choose whether to sort the values in the column in an ascending or descending order.
Then by and Order: Choose a column from the Then By menu when you want to perform a sort on a second column after the primary sort is complete.
Sort includes the first row: Generally, the first row of a table contains a header describing the content in the columns. If your table doesn't have such a header row, you can include the first row in the sort by enabling this check box.
Sort header rows: Check this option to sort all the rows in the table's <thead> section (if it exists) using the same criteria as the body rows.
Sort footer rows: Check this option to sort all the rows in the table's <tfoot> section (if it exists) using the same criteria as the body rows.
Keep all row colors the same after the sort has been completed: Check this option so that the table row attributes (such as color) remain associated with the same content after the sort. For instance, if your table rows are formatted with two alternating colors, do not select this option to ensure that the sorted table still has alternating-colored rows.

For our example, simply choose the Column 2 option from the Sort By menu and click OK. The dialog closes and the company events table is sorted based on the event name.

Tracing Images

Many times, our design prototypes become so complex that it is difficult to figure out exactly how to structure the page with tables using Dreamweaver. To aid you with this obstacle, Dreamweaver allows you to include a tracing image. Tracing images allow you to build your page prototype using your favorite image editing program, save the prototype as a GIF or JPG image, and then lay it down as a temporary background to your page so that you can build your page structure over it. To demonstrate the use of tracing images, follow these instructions:

1.	Create a new blank page by choosing the New option from the File menu. When the New Document dialog appears, choose the HTML option from the Basic Page category and click Create. A new blank page is created.
2.	With the page now open, select the Page Properties option from the Modify menu. The Page Properties dialog appears.
3.	Enter `0` for each of the Left Margin, Top Margin, Margin Width, and Margin Height text boxes in the Appearance category.
4.	Switch to the Tracing Image category, which exposes two options: First, a file field which allows you to select the tracing image to use, and second, a transparency slider bar to select the opacity of the tracing image in the Document window.
5.	In the Tracing Image text box, browse to the `prototype.gif` image located in the Assets folder.
6.	Slide the Transparency slider to 30% and click Apply. As you can see from Figure 6.54, the prototype design is faintly visible in the background. Figure 6.54. The tracing image is faintly visible in the background of the page.
7.	Click OK to close the Properties dialog.

With the prototype faintly visible in the background, you can switch to Layout mode and begin developing the table structure using Layout Tables and Layout Cells over the image as if you were working with tracing paper. As you can see from Figure 6.55, layout tables have been drawn on the page, using the tracing image as a reference.

Figure 6.55. Layout tables are drawn on the page using the tracing image as a reference.

When you've finished creating the structure based on the tracing image, you can revisit the Tracing Image category in the Page Properties dialog and simply remove it.

Figure 6.1. The background image begins to repeat itself near the bottom of the page.

Figure 6.2. Because there's no definitive break between paragraphs, everything begins to run together.

Figure 6.3. Insert and format basic properties for a table from the Table dialog.

Figure 6.4. The new table is inserted into the page.

Selecting Table Elements

Figure 6.5. Choose the Select Table option from the Table Widths Visual Aid's menu.

Figure 6.6. Place your cursor just to the left of the row to select a row or just above the column to select a column. The cursor changes to an arrow and the row or column is highlighted in red.

Formatting Tables Using the Format Table Command

Figure 6.7. The Format Table dialog allows for quick formatting of colors, alignment, and borders.

Modifying Table Properties Using the Properties Inspector

Figure 6.8. Format table attributes from the table-based Properties Inspector.

The Table ID

Adding and Removing Rows and Columns

Figure 6.9. Use the Insert Rows or Columns dialog as an alternative method to inserting rows or columns in your table.

Figure 6.10. New rows are added to the table using the Insert Rows or Columns dialog.

Changing Table Sizes

Figure 6.11. Change the height of the table to 177 pixels from the Properties Inspector.

Setting a Background Color or Background Image

Figure 6.12. Set the background color for the table by choosing a color from the Bg Color Picker in the Properties Inspector.

Figure 6.13. Use the point-to-file icon to select the header_bg.gif image from the Images directory.

Figure 6.14. Drag the header image into the table's only cell.

Modifying Cell Padding and Cell Spacing

Figure 6.15. Inserting text below the existing table causes the text to align flush against the Document window and, ultimately, the browser window.

Figure 6.16. The new table is inserted and includes a cell spacing to protect the content from the left edge of the page.

Table Alignment

Figure 6.17. The new table is added at the bottom of the page.

Figure 6.18. Format the contents of the new table.

Working with Table Borders

Figure 6.19. Add a table border to your table.

Converting Table Widths to Percent or Pixels

Modifying Cell Properties Using the Properties Inspector

Figure 6.20. The cell-based Properties Inspector becomes available when you place your cursor into a cell.

Changing Cell Widths and Heights

Figure 6.21. Insert an image into the first cell to see the cells shift out of proportion.

Figure 6.22. Cell width values are missing from the Table Widths Visual Aid.

Figure 6.23. Choose the Select Column option from the cell menu in the Table Widths Visual Aid.

Splitting and Merging Cells

Figure 6.24. Merge two or more cells into a a single cell by highlighting the cells to merge and clicking the Merge Cells icon in the Properties Inspector.

Figure 6.25. The Split Cells dialog allows you to split cells into smaller individual cells.

Setting Horizontal and Vertical Alignments

Figure 6.26. Inserting text into one cell causes elements in a second cell that are shorter to align to the vertical center of the cell.

Figure 6.27. The image is aligned to the top of the cell.

Setting the Background Color, Image, Border Color, and Cell Wrapping

Figure 6.28. Create a table to mock the functionality and look of a tab.

Figure 6.29. The two tables that resemble tabs are added to the page. One tab has little text and fits perfectly in the tab. The second tab contains long text that wraps.

Figure 6.30. The No Wrap check box in the Properties Inspector prevents the table's cell from wrapping to the next line.

Figure 6.31. Adding a background color to a table that has a border causes the table to appear in a beveled state.

Converting a Cell to a Header

WHY A SEPARATE TAG FOR A TABLE HEADER?

Nesting Tables

Figure 6.32. Add the icon and some generic company events to the new nested table.

Working with Expanded Tables Mode

Figure 6.33. Enter Expanded Table mode by choosing the Expanded button from the Layout category in the Insert bar.

Inserting and Working with Tables in Layout Mode

Figure 6.34. Switch to Layout mode when you'd rather draw tables and cells on the page.

Drawing Tables

Figure 6.35. Drag guides onto the page to create an initial structure for the layout tables.

Figure 6.36. Draw a new table on the page that is 640 pixels wide and 177 pixels high.

Figure 6.37. Draw a new table on the page that spans 640 pixels wide and reaches the 322 pixel guide.

Figure 6.38. Even though it doesn't look like much of a table in Layout mode, the transformation is exact in Standard mode.

Figure 6.39. The Properties Inspector supports basic table formatting options while in Layout mode.

Drawing Cells

Figure 6.40. Draw a layout cell that covers the Header table.

Figure 6.41. Draw a layout cell that covers the top third of the Content table.

Figure 6.42. Draw a second layout cell in the Content table to hold the headshot image.

Figure 6.43. Draw a third cell to hold the bio text.

Figure 6.44. The cell-based Properties Inspector supports various property modifications while in Layout mode.

Adding Content to Layout Cells

Figure 6.45. Adding text into a layout cell is simply a matter of copying and pasting.

Figure 6.46. Use the Insert Row Below button in the Layout category of the Insert bar to create a new row in a layout table.

Working with Autostretch Tables

Figure 6.47. Selecting the Autostretch radio button in the Property Inspector opens the Create Spacer Image dialog.

Figure 6.48. Add the header_bg.gif image as a background to the Header table of our design.

Importing Tabular Data

Figure 6.60. A tab-delimited file contains text separated by tabs.

Figure 6.50. The Import Tabular Data dialog allows you to import a file based on a delimiter option and then format the table that will be created for the content.

Figure 6.51. The new table is created based on the content of our tab-delimited file.

Figure 6.52. Format the table, add a new column in front of the content, and add the calendar icon to the cells in the new column.

Sorting Tables