Home > Articles > Graphics & Web Design > Dreamweaver & Flash

This chapter is from the book

This chapter is from the book

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

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

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

    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

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

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

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

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

    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

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

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

    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.

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

    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.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020