Web Page Structuring Using Tables in Adobe Dreamweaver CS4

This chapter is from the book

Adobe Dreamweaver CS4 Unleashed

Learn More Buy

This chapter is from the book

This chapter is from the book 

Adobe Dreamweaver CS4 Unleashed

Learn More Buy

Modifying Cell Properties Using the Property 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 within the Table dialog. You've also seen that when you select a table, the Property inspector tailors itself to accommodate the modification of attributes associated with the table. Just as there are many options for modifying properties associated with a table, so too are there many options for modifying the cells within that table. In 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 text formatting properties that you learned in Chapter 2. 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 a lot of these properties. For instance, the content as a whole can't be formatted, cells can't be manipulated, and so on. In general, it's safe to say that the properties exposed by the table are broad and specific to the table as a whole, whereas properties provided 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 4.18, you can access the Table Cell Property inspector by placing your cursor within a cell.

Figure 4.18 The Table Cell Property inspector becomes available when you place your cursor into a cell.

As you can see from the callouts in Figure 4.18, the upper half of the Property inspector reveals simple text-based formatting options covered in Chapter 2, but the bottom portion outlines key properties (moving from left to right) supported by table cells, including the following:

• Merging and Splitting Cells
• Horizontal and Vertical Alignment
• Width and Height
• No Wrap
• Header
• Background Color
• Page Properties

To demonstrate these properties, let's format the cells within the content table.

Changing Cell Widths and Heights

So far you've seen how to manipulate the width of the table as a whole. The cells within a table, however, function somewhat differently. If you recall, earlier in the book we selected the content table and assigned it a width of 697 pixels. The table is inserted at the 697 pixel width; however, by default the width of each cell is given a width equal to the width of the table divided by the number of cells within the specific row. So in our case, the cells appear to have a width of roughly 348–349 pixels each. Although this might have seemed to be the case, in fact, inserting the image subheader_welcome.gif into the first cell of the second column reveals otherwise. As you can see from Figure 4.19, inserting content into the cell shifts the cells out of proportion.

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

Although Dreamweaver initially makes an attempt to proportionately size your tables, it will always rely on you to manually set the size of the cells individually. Because we didn't set the size of each cell, Dreamweaver accommodates the addition of content within the second cell by automatically moving the cells over to the left (or right, had we inserted the image in the left column), essentially freeing up room for you to work.

The lack of cell widths is also evident from the Table Widths Visual Aid. As Figure 4.19 also indicates, although a set width exists for the table as a whole, the two individual width values for the columns are empty. Setting the width of columns, which sets the width of each cell within the column within the Property inspector is just as simple as it was for the table. To set the widths of our two columns, follow these steps:

1. Place your cursor into the first cell within the first column. Immediately the Table Widths Visual Aid becomes available.
2. Choose the Select Column option from the cell menu, similar to Figure 4.20.
   

   Figure 4.20 Choose the Select Column option from the cell menu in the Table Widths Visual Aid and then change the width of the cell to 220 pixels.

3. Within the Width (W) text box in the Property inspector, enter the value 220 and press Enter. The table's column will resize accordingly.
4. To make the table functionally correct, we'd now have to set the width on the second column. Rather than trying to figure out what 697 pixels minus 220 pixels is, we can take a shortcut. From the Table Widths Visual Aid menu, select the Make All Widths Consistent option. Immediately you'll notice that a value of 465 pixels is assigned to the second column.

When you're finished, the table will be resized proportionally, and the Table Widths Visual Aid will contain width values for the each column similar to Figure 4.21.

Figure 4.21 The cells are resized proportionally and the Table Widths Visual Aid includes cell widths as well.

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 within that column, and physically remove the numeric pixel value within the Width (W) text box in the Property 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.

Cell heights can also be modified. The reason it has not been covered with more detail is twofold. First, it's just as simple to modify a height as it is to modify the width. After 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 govern the height for you.

Splitting and Merging Cells

After you've inserted a table onto the page, you'll often need to merge cells to create more space within the table. For instance, although you might need to work with two independent cells within 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 merge the cells within an existing row into fewer cells, essentially freeing up the needed space.

To merge two or more cells within a table, you would highlight by clicking, holding, and dragging the cells that you want to merge. With the cells highlighted, you can merge the cells by either choosing the Merge Cells icon within the Property inspector, selecting the Merge Cells option from the Table submenu within the context menu, or by choosing Modify, Table, Merge Cells. Any method you choose merges the cells.

Let's try it out on our example using one of these methods. Left-click, hold, and drag across from the first cell in the second row over to the second cell of the same row. Choose Modify, Table, Merge Cells. The cells will merge into one cell. Now find the footer.gif image located within our Images folder and drag it into the newly merged cell. The result of the merger and image addition will resemble Figure 4.22.

Figure 4.22 Highlight the cells that you want to merge by clicking, holding, and dragging over from the first cell over to the second cell.

In addition to merging cells, you can also split bigger cells up into smaller cells. For instance, I can place my cursor within a recently merged cell and click the Split Cell icon from the Property inspector. Doing this opens the Split Cell dialog box, as shown in Figure 4.23.

Figure 4.23 The Split Cell dialog box allows you to split cells into smaller individual cells.

As you can see from Figure 4.23, the dialog box defaults to the Split Cell into Columns option. You can enter a value to split the cell into columns and then click OK to commit the changes.

The Split Cell option is also available from the Table submenu in both the context and Modify menus.

An alternative way of splitting and merging cells and rows is to choose Modify, Table, Increase/Decrease Row and Column Span. To use these options, place your cursor in the cell that has been merged and select Decrease Column Span. To split the same cells back up, choose the Increase Column Span option. 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 within the Horizontal (Horz) and Vertical (Vert) menus in the Property inspector. To demonstrate alignments, I'll add a navigation menu to the first cell. To do this, place your cursor within the first cell and enter the text Home followed by a line break (Shift+Enter or Shift-Return). Repeat this process, adding About Us, Solutions, Support, and Contact Us navigation items to the cell. You might also want to format the font for the navigation menu by selecting all the text, right-clicking, and then choosing Font, Arial, Helvetica, San-serif from the context menu that appears.

As you would expect, the text looks fine within the cell. The same can't be said after I insert the welcome text (available by opening home.txt, selecting all the content, copying it, and then pasting it) into the second cell (the cell next to the one that contains our navigation menu). As you can see from Figure 4.24, the navigation is shifted to the vertical center of the cell.

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

Although this result is perfectly normal, it might not be what you intend. A more desirable result would be to align the navigation menu to the top of the cell so that it appears as though the welcome text and navigation menu are both aligned to the top of their respective cells. To do this, place your cursor into the cell that contains the navigation menu and select the Top option from the Vert menu (located within the bottom half of the Table Cell Property inspector just to the right of the split and merge cells icons). The navigation menu text will shift to the top of its cell. You might also want to do this for the cell that contains our welcome text. You never know when you'll have a page that contains text that results in a cell that is smaller than the navigation menu.

Of course, if you ever want to horizontally align content within the cell, you can select from one of the options in the Horz menu. To give you an idea as to how this works, place your cursor within the navigation menu's cell and choose the Center option from the Horz menu in the Cell Property inspector. Your navigation menu will immediately center itself within the cell.

You might want to round out the design by creating hyperlinks for each navigation menu item: index.html for the Home menu item, aboutus.html for About Us, solutions.html for Solutions, support.html for Support, and contactus.html for Contact Us.

Setting the Background Color and Cell Wrapping

Looking at the welcome text, you can see that the text is cleanly formatted with spacing and line breaks. 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 within the Property 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 happened to be on, those tabs changed and varied based on the page and the content within the page. Assuming you had a few dozen web pages within 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 within the cell. This way, you're creating the tab structure only once, and 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. To follow along, review these steps:

1. Create a new blank HTML page by choosing File, New. Choose HTML from the Blank Page category, choose the <none> option from the Layout category, and click Create. The new blank page appears. Immediately save your work as nowrap.html.
2. Create a new table by choosing Insert, Table. When the Table dialog box 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; then click OK. The new table appears within the page.
3. Resize the first column to 24 pixels and the third column to 30 pixels. Again, this can be accomplished by placing your cursor within the specific cell and adding the value to the W text box within the Table Cell Property inspector.
4. Locate the images lefttab.gif and righttab.gif located within the Assets\NoWrapExample folder for the exercise files that you downloaded for this chapter. Insert (by either dragging the image from the Files panel or by choosing Insert, Image) the specific image into its respective cell (lefttab.gif will go in the first cell and righttab.gif will go in the third cell.)
5. Use the Tag Editor (covered in more detail later in the book) to set the middle column's background image to bg.gif. You can do this by right-clicking within the middle cell and then choosing Edit Tag <td>. The Tag Editor dialog box will appear. Select the Browser Specific category and then click the Browse button located just to the right of the Background Image text box. Find bg.gif located within the same folder that contained our two tab images. Click OK to close the Tag Editor. Now the table should resemble Figure 4.25.
   

   Figure 4.25 Create a table to resemble the functionality and look of a tab.

6. With your cursor still focused within the middle cell, choose the Center option from the Horz menu and the Bottom option from the Vert menu within the Property inspector.
7. Select the table, select the Copy option from the Edit menu, place your cursor just after the table, press Enter to create a paragraph break, and click the Paste option from the Edit menu. Now you'll have two tables that look like tabs.
8. Place your cursor in the middle cell of the first table and select Insert, Hyperlink. When the Hyperlink dialog appears, enter the text Option 1 and type the # (to create an anchor with no link) symbol within the link text box. Click OK.
9. Place your cursor in the second cell of the second table, select Insert, Hyperlink. When the Hyperlink dialog appears, enter the text This is a really long Option and type the # symbol within the link text box. Click OK.

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

Figure 4.26 One tab has little text and fits perfectly in the tab. The second tab contains long text that wraps.

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

Figure 4.27 The No Wrap check box within the Property inspector prevents the table's cell from wrapping to the next line.

The upside to this method is that no matter how short the contents, the tabs will never be smaller than 150 pixels, and you can guarantee that only three images will be used. The contents within the cells are all that change.

Aside from setting the No Wrap option within the Property inspector, you also saw how to use the Tag Editor to set the Background Image (Bg) within a cell.

Although a cell's background image can be set from the Tag Editor dialog box, the background color for a cell can be set directly from the Cell Property inspector. To demonstrate this feature, follow these steps:

1. Select the content table and change the cell spacing from 4 pixels to 0 pixels. This will eliminate the cell spacing, as it's no longer needed. You might need to readjust the cell's columns so that the first column is set to 220 pixels and the second column is set to 477 pixels, as opposed to the 465 pixels that we set previously.
2. Place your cursor within the table's first cell and add a background color by clicking the Bg color picker option from the Cell Property inspector. When your cursor changes to an eyedropper, sample the dark gray color from either the header or the footer images to make the navigation menu's background color appear to continue from the header down to the footer.
3. Repeat this process for the cell that contains the welcome text. Rather than sampling a color from the interface, simply select white, as this is the color that we need to make the design blend together. The result will look similar to Figure 4.28.
   

   Figure 4.28 Add background color for both the navigation cell and the welcome text's cell.

Converting a Cell to a Header

You've already seen how to work with headers within the Table dialog box. Dreamweaver also supports the capability to convert an existing cell into a table header through the use of the Header check box within the Property inspector. To use this functionality, place your cursor within a table cell and enable the Header check box. The cursor within the cell will then be centered, and any text typed into the cell will be made bold.

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

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

Nesting Tables

As you can see from the design thus far, our page is becoming relatively complex in its structure. So far we have two tables: one for the header and one for the content that also contains a footer. Obviously, it doesn't have to stop there. Let's assume we wanted to add a third table to structure the company's solution offerings underneath the welcome text. If that's the case, we'll need to add a nested table. A nested table as the name implies, is a table that nests within a cell of an existing table. Our solutions table is a perfect example of a nested table within a cell. Because we have three solutions, complete with an icon, a title, and descriptive text, 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 2. To create the nested table, follow these steps:

1. Place your cursor after the welcome text and click Enter (Return) to insert a paragraph break. Drag the subheader_solutions.gif image located within the Images folder over to the cell. Now place your cursor just to the right of the solutions image and click Enter (Return) one more time to create a paragraph break.
2. Create a new table by choosing Insert, Table. When the Table dialog box appears, create a table with 5 rows, 2 columns, a width of 450 pixels, a border thickness of 0, cell padding of 0, and cell spacing of 0; click OK. The new table will appear nested within the cell.
3. Resize the first column to 70 pixels and the second column to 380 pixels.
4. Add the logo_vprospect.gif, logo_vconvert.gif, and logo_vretain.gif images to the first, third, and fifth cells of the second column.
5. Open the solutions.txt file located within the Assets folder and copy each solution's representative description and paste it into its respective cell within the nested table. When you've finished, the table should resemble Figure 4.29.
   

   Figure 4.29 Add the images and respective descriptions to each cell.

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.