Home > Advanced > Advanced Tables

Table Elements

Since you are in the Advanced HTML section, I assume you must be at least basically familiar with using tables. If not, then you may want to go here to brush up on the basics.

In this section we will deal with tables as defined in HTML 4.0, and toward the end of this primer we will get into some of the nifty IE-specific variations. I suppose the best place to start our little journey is by presenting the various table elements:

In HTML 4.0 you may also specify a background image for a table header and individual table data cells. And by the way, for purposes of clarity I am using capitol letters here; but if you intend to go further in web authoring (or on to real application programming), it's a good idea to develop the habit of using lower case letters because the trend is towards DHTML, XML or XHTML in the near future and these, especially the latter two, are case-sensitive.

Using Headers

Now to really get started, here's the use of table headers:

<TABLE BORDER>
<TR>
<TH>Goodies</TH><TH>Baddies</TH>
</TR><TR>
<TD>Computers</TD><TD>Politicians</TD>
</TR><TR>
<TD>Chocolate</TD><TD>Headaches</TD>
</TR>
</TABLE>

The output:

About all that table headers really do is print the text in the headers bolder than normal. It's simply a little easier to use headers than to use <STRONG> in a regular data cell. Notice also that BORDER can be used without having to insert a number for the size; a border size of 1 is the default. Leave out the word BORDER and you just won't get a border.

Table and Text Alignment

Here's an example of using the ALIGN tag:

Here's the code used in the above examples:

<TABLE ALIGN="left" WIDTH=40% BORDER>
<TR>
<TD>&nbsp;<br><br><br></TD>
</TR>
</TABLE>
The table is aligned 'left' and this text is automatically aligned to the right.
<BR CLEAR=ALL>
<br>
<TABLE ALIGN="right" WIDTH=40% BORDER>
<TR>
<TD>&nbsp;<br><br><br></TD>
</TR>
</TABLE>
This table is aligned 'right' and this text is automatically
aligned to the left.
<BR CLEAR=ALL>
<br>
<TABLE ALIGN="center" WIDTH=40% BORDER>
<TR>
<TD>&nbsp;<br><br><br></TD>
</TR>
</TABLE>
And this table is aligned 'center' and as you can see
the text just falls below it...just showing you what
would happen in case you were curious. 8~)
<BR CLEAR=ALL>

If you are wondering what '<BR CLEAR=ALL>' is all about: it's necessary to keep from having some placement problems from happening with some browsers. I won't go into all the possibilities here... just use it to save yourself some headaches.

Something else should be mentioned: Don't confuse the alignment attributes above with the use of "align" in a table data (TD) cell. When used in a <TD> tag, ALIGN refers to the alignment of the cell contents.

The CAPTION element

From this point on, we will be getting into a lot of things that will be browser-specific. In order to save a ton of typing, only the two most common browsers will be mentioned, Internet Explorer (IE) and Netscape (NS). It's a pain in the neck to deal only with these two, and if we tried to require all the myriad other browsers in use I would soon run out of website space.

<ALIGN>

(NS) TOP or BOTTOM caption placement. (default: TOP)
(IE only) LEFT, RIGHT, CENTER.

<VALIGN>

(IE) TOP or BOTTOM caption placement.

<TITLE>

(IE 4+) tool tip to appear on hover.

<LANGUAGE>

(IE) specifies which scripting language IE should use.

<CLASS>

used to specify the use of a style sheet class.

<STYLE>

In line style setting.

<ID>

Unique Identifier; used as a reference with style sheets or scripting.

Here's a simple table using most of the above; if you are using IE, place the cursor over both the table and the caption text to see the TITLE attribute action.

Here's the coding for the above:

<TABLE ALIGN="center" TITLE="Table Title Demo" BORDER
CELLPADDING="10">
<CAPTION ALIGN="center" VALIGN="bottom" TITLE="Caption Title Demo"
CLASS="tutor.css">Table Caption</CAPTION>
<TR>
<TD>
Table Content
blah blah
</TD>
</TR>
</TABLE>

The THEAD element (IE)

<THEAD> isn't so different from <TH>, unless used with DHTML. Here's a sample below, using the same code as in the above example, but with <THEAD BGCOLOR="yellow">THEAD TEXT</THEAD> replacing the CAPTION element.

You can find more details on this element and others at the excellent site, HTML Reference Library.

The TBODY element

<TBODY> is nearly useless as far as the display of your table goes; this tag is used mainly for informational purposes in the source of the document.

The COLGROUP Element (IE)

This is IE-specific; it's used to group columns together and in setting their alignment. It has the following attributes, as explained above:

• ALIGN
• VALIGN
• CLASS
• ID
• WIDTH
• SPAN (used to set the number of columns)
• STYLE (setting in-line style)
• TITLE

While every element in <COLGROUP> is an object that can be referenced in scripting using IE, Netscape supports no scripting for this.

Here's a simple example using <COLGROUP>...

...and here's the code used:

<TABLE ALIGN="CENTER" BORDER HEIGHT="100" 
WIDTH="30%">
<COLGROUP ALIGN="CENTER" SPAN=2>
          <TR><TD>
text
    </TD><TD>
text
          </TD></TR>
          <TR><TD>
text
    </TD><TD>
text
          </TD></TR>
</COLGROUP>
</TABLE>

The COL Element

<COL> is used to set individual column text alignment and has the same atttributes as <COLGROUP>.

That's about it for table elements in HTML 4.0. These are just some of the more common and useful examples and you can find more detailed information here and here. Keep in mind that many of these examples can be a bit tricky to implement effectively in a website unless they will be viewed by the newer browser versions, especially IE 4.0+. Most websites you visit are still using the older HTML 3.2 standard. HTML 4.0 is a great improvement, but you may still run into quirky problems from time to time as with anything new.

Table Positioning

One of the desirable things to have is any website is a fast-loading page. One way to do this in an apparent manner, besides keeping graphics to a minimum, is to use tables. This is especially useful in larger pages and will load the top of the page first, and after the top comes into view the rest of the page will load.

This is because most browsers will load and show the first table on a page first, then will begin to load and show the 2nd table and so on. If your page is all inside one large table, nothing will display until the whole page is loaded.

However, you can make page loading apparently speed up by putting your logo in one table, your menu or links column in another table. then the part of your page content that will fill the browser window first in a third table. Iknow, that's a lot of tables; but the effect can be worth the work if you have a long page such as this one which you are reading. Here's the basic format of the layout of this page:

Here's the basic code example for the above layout, minus the explanatory text:

<TABLE BORDER="1" WIDTH="100%">
<TR><TD>
Table 1- logo
</TD></TR></TABLE>

<TABLE VALIGN="TOP" ALIGN="LEFT" BORDER="1" 
WIDTH="100" 
HEIGHT="200">
<TR><TD>
Table 2- menu
</TD></TR></TABLE>

<TABLE ALIGN="LEFT" BORDER="1" WIDTH="*" 
HEIGHT="200">
<TR><TD>
Table 3 Content
</TD></TR></TABLE>
<BR CLEAR=ALL>

<TABLE BORDER="1" WIDTH="100%">
<TR><TD>
Table 4 Content
</TD></TR></TABLE>

The important things to remember as far as this method is concerned are the use of ALIGNMENT WIDTH, and HEIGHT properties and to use the asterisk (*) in Table 3 for the width of the table. If you try to set the width of Table 3 to 100% your layout will go nuts in some browsers. By giving Table 2 an exact pixel width and setting the width of Table 2 with the asterisk wild card symbol the browser will figure things out on its own.

The height values of Tables 2 and 3 will take a little figuring and some trial and error on your part, depending on your page content. Both table heights should be the same. Don't forget to use the <BR CLEAR=ALL> tag after your Table 3 code.

Now, let's get into some of the things that can be done with IE 4.0+ browsers. This is DHTML for the most part, which is a sort of mixture of CSS and a little "javascript". Let's start with borders.

This effect is achieved by using the border method 'GROOVE'. While you're looking at the table, pass you cursor over any part of the right-hand cell and watch the text color change. Here's the code:

<TABLE STYLE="BORDER: GROOVE;
                 BORDER-WIDTH: 15PX;
                 BORDER-COLOR: BLUE;
                 HEIGHT: 100;
                 WIDTH: 50%">
<TR STYLE="BACKGROUND-COLOR:YELLOW"><TD>
CONTENT
</TD><TD>
CONTENT
</TD><TD ALIGN="center"
  onmouseover=""javascript":this.style.color='#FF00FF'"
  onmouseout=""javascript":this.style.color='#000000'">
CONTENT
</TD></TR></TABLE>

Try using INSET, OUTSET or RIDGE in place of 'Groove" for some other interesting results, and change the border width to various values.

A Blinking Table

There you have it, for what it's worth. In my opinion it is distracting and a little annoying but there may be times when you might want particular attention drawn to a table. Here's the code:

<TABLE ALIGN="CENTER" BORDER="0" WIDTH="30%"
id="thisexample" STYLE="border:5px solid red">
<TR><TD ALIGN="center">

Content...
</TD></TR></TABLE>
<script language="JavaScript1.2">
<!--hide
function blink(){
if (!document.all)
return
if (thisexample.style.borderColor=="red")
thisexample.style.borderColor="blue"
else
thisexample.style.borderColor="red"
}
setInterval("blink()", 600)
//-->
</script>

Notice the connecting factor between the table and the "javascript", namely id. This identifies the table as an object which can be referenced by thisexample in the "javascript" code. The rate of change of color is set by setinterval()- the lower the value in milleseconds, the faster the rate.