Fun with Tables and Cells

For the new user of any Web development package, the fuss made about tables and cells in this chapter might seem a bit overkill. Why should you care? How does this really help the Web development process (instead of making it more complicated)? We'll answer those questions here.

The first issue is simply one of layout. Although you can set text and picture to appear next to each other through a slight massaging of HTML, the most basic of layout capabilities require tables to provide the desired effects. Because tables and cells can (and more times than not, most often do) contain pixel-less borders, only the developer knows they exist.

As you dive deeper into these layout issues, you will realize the simple fact that tables and cells let you do some pretty fun things with your site hence the name of this section.

We'll look at how included content and tables provide a very simple, yet powerful, content management system. We'll also look at fun background image and color effects. We'll even examine some border effects that don't require the more complicated layout tables.

Using Included Content

The Included Content Web component lets you pull HTML files from within your Web site and place them within your Web page. Popular uses for this feature include, but are not limited to, navigational elements and page headers/footers. By producing a single version of these included content files and then reusing the content throughout your site, a simple change to the original source files can result in the automatic updating of an entire site.

For more on the Included Content Web component, see "Using Web Components, Shared Borders, and Link Bars," p. 167.

In some instances, included content needs no layout because it contains layout content of its own. Examples of this might be a header or footer included file. A simple include at the top and bottom of the page can result in the desired effect.

Sometimes, you will want to place the content in a specific area of the page and have specific requirements for size, position, and so on. This is done by placing content in, or around, tables.

In Figure 10.30, a simple table with four cells is shown. A user could quickly insert header, footer, and menu included content. Not that this isn't a layout table (or layout cells), but the same approach could be used for these as well.

Figure 10.30. A simple table with four cells is used to contain header, footer, menu, and content information.

TIP

The power provided by included text in tables and cells can't be overemphasized. Instead of having to create content one page at a time, you can create content used on multiple pages while maintaining a site-wide look and feel.

Adding Background Images and Colors

Both tables and cells (layout and regular) can contain their own background colors or images. This can be used to produce additional effects on your page that can't be done any other way. In addition, the ability to put a background color in a table or cell enables a certain emphasis effect as the eye is drawn to color. Place important content in a color table or cell, and the user has a much better chance of viewing it. Figure 10.31 shows the Cell Properties dialog box with the option to add a background image to a cell selected, and Figure 10.32 shows the editing of a table to include a yellow background in the Table Properties dialog box.

Figure 10.31. The Cell Properties dialog box lets you set either a background color or image. In this example, a background image is set.

Figure 10.32. Set a background color or image through the Table Properties dialog box.

NOTE

Not all browsers support table (or cell) background color or images.

Border Effects

Layout cells, although impressive, aren't the only option for border effects. If you know that your audience is going to be viewing your content on machines that can quickly render these effects, go ahead and use them (and impress your audience with the effects). If your audience is using older machines or simpler browsers (or you are creating alternate content for them), consider alternative options.

If you'd like to produce some border effects that are more HTML related than graphic intensive, there are a number of ways to do so:

On the most basic level, any table or cell can have a border that helps separate content elements away from others. The properties dialog boxes for both tables and cells will let you add border thickness and color with a few clicks of the mouse.

As shown previously, the border size and coloring can be set in any table. Cells can be placed within a table and given their own border and color options. This effect can be repeated over and over again to give the effect desired. Although the black and white nature of this book can't show the subtlety of such an effect, simple experimentation by the user will quickly provide interesting results.

The other added benefit of producing border effects this way is that browsers will have little to no problem rendering the HTML on any screen type. If needed, they'll simply ignore the border-related HTML and present the content without the GIF images produced through the other approach.