Standard Table Templates

Ever look at a table and say “how’d they do that?” This section provides templates that give you shortcuts for creating standard table effects.

A Simple Announcement Box

Figure 10.20 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.

Of course, you can specify any background color you choose. Try playing with the border and cell padding for different effects. You can use width and height attributes to make the bar any size. 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.

Announcement box

Figure 10-20. Announcement box

Centering an Object in the Browser Window

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

<HTML>
<BODY>
<TABLE WIDTH=100% HEIGHT=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
   <TD align=center valign=middle>your object here</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Figure 10-21. Centering an object

Creating a Vertical Rule ...

Get Web Design in a Nutshell now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial