home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeWeb Design in a NutshellSearch this book

13.7. Standard Table Templates

Ever look at a table and wonder, "How'd they do that?" This section provides templates that give you shortcuts for creating standard table effects.

13.7.1. A Simple Announcement Box

Figure 13-21 depicts a simple one-cell table containing text. By setting the background to a bright color, it can be used as an effective attention-getting device for a special announcement. It could also be used as an alternative to a graphical headline for a page. By using the align attribute in the <table> tag, you can position the table along the left or right margin and allow text to wrap around it, making a nice space for a sidebar or callout.

You can use width and height attributes to make the bar any size. Try playing with the border and cell padding for different effects. Remember, placing the bgcolor within the cell will render differently than placing it in the <table> tag in Internet Explorer, so experiment and test to see what you like the best. Note that because height is a nonstandard attribute, it may not work in all browsers (including Version 6 browsers operating in "strict" rendering mode).

Figure 13-21

Figure 13-21. Announcement box

13.7.2. Centering an Object in the Browser Window

The table in the following code can be used to center an object in a browser window regardless of how the window is resized (as shown in Figure 13-22). It uses a single cell table with its size set to 100%, then centers the object horizontally and vertically in the cell.

   <TD align=center valign=middle>your object here</TD>
Figure 13-22

Figure 13-22. Centering an object

13.7.3. Creating a Vertical Rule

This sample table creates a vertical rule between columns that resizes with the height of the table. The trick is to create an extra column only one pixel wide (or the desired thickness of the vertical rule) and fill it with a background color. This cell is indicated in bold. The result is shown in Figure 13-23.

The cell cannot be totally empty or it will collapse in Navigator and its background color won't display, so I've added a <br>. For this to display correctly, the cell padding must remain at zero, or the 1-pixel wide column will plump up with extra space. Add space between columns with the cellspacing attribute instead.

Figure 13-23

Figure 13-23. A vertical rule that resizes with the depth of the table

13.7.4. Creating a Box Rule

Although Microsoft Internet Explorer recognizes the proprietary bordercolor, bordercolorlight, and bordercolordark attributes, there is no method for specifying border colors using standard HTML for all browsers.

To create a colored rule around a box of text using standard HTML, place one table within another as shown in Figure 13-24. To nest tables, place the entire contents of one table within a <td> of the other.

Figure 13-24

Figure 13-24. Two examples of creating box rules with nested tables

In Example 1 in Figure 13-24, cell width and height are set in the interior table. In the exterior table, a cell padding of 0 results in a one-pixel rule around the table. You can increase the thickness of the rule by increasing the cellpadding value. Note, however, that this will also increase the overall dimensions of the table. The color of the rule is specified by the bgcolor attribute in the <table> tag for the exterior table:

   <TD BGCOLOR="#333333" ALIGN=center VALIGN=center>
      <TR><TD BGCOLOR="#999999">cell contents</TD></TR>

In Example 2 in Figure 13-24, to restrict the dimensions of the table, set specific dimensions for the exterior table and set the dimensions of the interior table slightly smaller (to a difference twice the desired rule thickness). In this example, the desired rule thickness is 10, so the interior table's dimensions are 20 pixels less than the exterior table's dimensions.

<TABLE WIDTH=200 HEIGHT=200 cellpadding=0 border=0>
   <TD BGCOLOR="#333333" ALIGN=center VALIGN=center>
      <TR><TD BGCOLOR="#999999">cell contents</TD></TR>

13.7.5. Two-Column Page Layouts

Many sites use a two-column table to lay out the structure of their pages. This grid creates a narrow column on the left for navigational options and a wider column on the right for the page's contents, as shown in Figure 13-25. These sample tables can be used to provide a basic structure to the page; you can place any elements (including other tables) within either table cell to create more complex layouts.

Figure 13-25

Figure 13-25. Typical two-column layout

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.