The address for this web page is: http://fishcaro.crosswinds.net/day_35_some_table_techniques.htm
On to the next lesson! Back to the COURSE SYLLABUS

35. SOME TABLE TECHNIQUES

This lesson offers some standard "tricks of the trade" to get some basic table effects.

INDEX CARD #35:

CENTERING AN OBJECT
IN A BROWSER WINDOW (35a)

To center an object in a browser window, no matter how the window is re-sized, create an HTML file with the following code:

<HTML> <BODY> <TABLE WIDTH=100% HEIGHT=100% BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR> <TD ALIGN="center" VALIGN="middle">put_your_object_here</TD> </TR> </TABLE> </BODY> </HTML>

Try it out by clicking here! Notice that, no matter how the window is re-sized, the object remains centered.

CREATING A VERTICAL RULE (35b)

Sometimes, you may want one or more vertical rules, without having borders around the entire table and every cell. To do this, just add a very thin column in a desired color, as follows:


<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=10>

<TR ALIGN=left VALIGN=top>

  <TD width=100>first<BR>text<BR>column;</TD>

  <TD WIDTH=3 BGCOLOR="green"><BR></TD>

  <TD>second<BR>text<BR>column<BR>goes<BR>here</TD>

</TR>

</TABLE>

You must keep cellpadding=0, or else the colored line will get much thicker than you want. Add space between columns with the cellspacing attribute instead.

In Netscape, an empty cell disappears; the <BR> keeps this from happening.

See the results of this code below this card!

TABLE ILLUSTRATING A VERTICAL RULE
first text column		second text column goes here

CREATING A COLORED BORDER
AROUND A BOX OF TEXT (35c)

Here's a way to create a colored border around a box of text, that will work for all browsers. It works like this:

Create a table with cellpadding equal to the desired thickness of your border.
This table will have ONE horizontally and vertically centered element, which has the desired BGCOLOR of the border.
The single element is itself a table, containing your desired text, with the desired horizontal and vertical alignment, and desired interior color.

The code in (35d) gives a template to use. There are examples following (35d).

CODE FOR A COLORED BORDER (35d)

<TABLE CELLPADDING="desired_border_thickness_in_pixels" BORDER=0>
<TR>
<TD BGCOLOR="border_color" ALIGN=center VALIGN=middle>
    <TABLE BORDER=0
           WIDTH="width_in_pixels"
           HEIGHT="height_in_pixels" 
           CELLPADDING="desired_in_pixels">
    <TR><TD BGCOLOR="inside_color"
            ALIGN="desired_text_alignment"
            VALIGN="desired_vertical_alignment">
         cell contents
        </TD></TR></TABLE>
</TD>
</TR>
</TABLE>

All these examples use a 100 pixel by 100 pixel interior cell, with CELLPADDING=10.

cell contents