Web Design in a Nutshell, 2nd Edition

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.

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. Announcement box

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%, ...