O'Reilly logo

Web Design in a Nutshell by Jennifer Niederst

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required