Although spurned by snobby professionals using the latest in Cascading Style Sheet technology, tables are still the best introduction to page layout a HTML novice can get, in my humble opinion. Keep in mind that this topic is the precursor to becoming a pro at cross-browser design. Even though its impossible to please all browsers, we should be allowed to adhere to the "industry standard" which include the following two browsers: Microsoft Internet Explorer and Netscape Navigator. I've also heard that more recent versions of the text-based Linux browser Lynx has introduced support for tables (finally)! Check out our cross-browser strategies section if you're interested in hearing more about how to be a pro :)

Anyway, let's get cracking; this one's a toughie. We'll start off with the basics of the <TABLE> tag. Generating a simple table will be our first task to accomplish. Tables are predominantly used to order information in a spreadsheet fashion. If you've used MS Excel or worked with databases, the format may be familiar to you.

What They're Made Of

Tables consist of cells. The follow is a single cell (not necessarily of any fixed size):

They can be stacked, spanned, highlighted, linked, made invisible, manipulated to hold information, used to align images, create menus... the sky's the limit (well...almost)! Nevertheless, cross-browser incompatabilities can frustrate even a veteran designer. I wouldn't say that I'm a veteran, but they sure do frustrate me when they don't behave the way I want them to =\

Ok, now that you've gone through this pep talk, let's actually build a table. We have the container elements, the starter tag <TABLE> and the end tag </TABLE>. Now, between these two tags, you use the <TR> </TR> and <TD> </TD> tags to create the cells in a table. <TR> denotes a Table Row and <TD> denotes the Table Data.

Create a table with a row:

<Table Border>
<TR>  </TR>
</Table>

But it only shows up when you denote that there is table data in that row:

<Table Border>
<TR> <TD> The data in the table. </TD> </TR>
</Table>

I put in the "Border" attribute so as to specify that the table visibly show a border around all its cells and rows. And it would look like the following, in the browser:

The data in the table.

If you want the cell to be blank, just leave out the data inside the <TD></TD> tags. This will cause the cell not to be rendered in the browser, however, what you can do is insert whitespace; write inside the table data tags the following: &nbsp; or insert an image in the data cell.

<Table Border>
<TR> <TD><IMG SRC="necklace.jpg" WIDTH="52" HEIGHT="50"></TD> </TR>
</Table>

The one thing you cannot do is put Javascript code in a table. (The simple fix is to use Javascript to write the table HTML into the document but we'll cover that later.)

So let's say we want a table with that has the format of the following:

That could basically be summed up as a table with 2 columns and 5 rows. Well, we know that we can create rows by using the Table Row tag <TR>. And on/in each row of the table, there are two cells (left and right, which make up the two columns). So, each row of the table would have code that looks like this:

<TR><TD> </TD><TD> </TD></TR>

So, since there are 5 rows altogether, the final code for the empty table should look like:

<Table Border>
<TR><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD></TR>
</Table>

And fill it in with some list information:

Names	Rank
Joe	#1
Mary	#2
Bob Dole	#3
Alice in Wonderland	#4

<Table Border>
<TR><TD>Names</TD><TD>Rank</TD></TR>
<TR><TD>Joe</TD><TD>#1</TD></TR>
<TR><TD>Mary</TD><TD>#2</TD></TR>
<TR><TD>Bob Dole</TD><TD>#3</TD></TR>
<TR><TD>Alice in Wonderland</TD><TD>#4</TD></TR>
</Table>

Resize and Remake

Well what we've accomplished so far is all well-and-nice, but we still haven't done anything particular spectacular have we? Ok, well let's get through some of these spiffy customizations of your cells and the table in general.

We can ALIGN the entire table to the right, left, or center (which works like the ALIGN attribute for an image). We can pre-determine the width of the entire table. Just insert a WIDTH attribute into the <TABLE> tag. It can be either relative (as a percentage) or absolute (in pixels). You can check out an example here.

Now let's build a simple 2x2 table (row x column) that takes up 50% of the width of the browser window.

<TABLE Border Width="50%">
<TR><TD>cell 1.1</TD><TD>cell 1.2</TD></TR>
<TR><TD>cell 2.1</TD><TD>cell 2.2</TD></TR>
</TABLE>

The Result

cell 1.1	cell 1.2
cell 2.1	cell 2.2

Each individual cell (created by <TD> </TD>) of the table can also have a specified width (in either percentages or pixels). Also, there's a handy little tag set called <CAPTION> </CAPTION>, which creates gives you a "captioning" area (little blurb) about the table's contents. Normally, I put this set of tags right after the <TABLE> tag, however, you can place it anywhere in between rows or right before the closing </TABLE> tag. For "meta-data" purposes (helping search engines index the content of your site), there is a SUMMARY attribute for the <TABLE> tag which works much like the ALT attribute for an <IMG> tag; <TABLE SUMMARY="In here you can write a short synopsis of either your site's contents or the table's contents for spiders to index.">

It automatically centers the text at the top of the table. You can, of course, add text formatting in the caption. Check out the first example and its source code (tables1.txt) to see how it works.

An attribute that can be applied to an individual cell as well as the entire table is BGCOLOR, which stands for background color. I think that's pretty self explanatory, but here's an example of use of BGCOLOR in individual cells in this table:

Chess Anyone?

But specifying the BGCOLOR in the <TABLE> tag will cause every cell (and any visible spaces) to be filled with that color (unless, of course, if you hardcode a individual cell with a different BGCOLOR. The following 2x2 table has a total width of 150 px, a black background (specified in the <TABLE> tag) and the left/top-most cell with a background color of white:

What you see in the Browser

The Code: <TABLE Border BGCOLOR=black width=150> <TR> <TD BGCOLOR=white>&nbsp;</TD><TD>&nbsp;</TD> </TR> <TR> <TD>&nbsp;</TD><TD>&nbsp;</TD> </TR> </TABLE>

Another attribute which can be either specified for <TD> or the entire <TABLE> is BACKGROUND. This works like it does in the <BODY> tag. It specifies some sort of image to be tiled in the background of the table or a specific cell. Note: Netscape Navigator literally tiles background images. You will see the beginning of the image/pattern in each cell, regardless of whether or not the BACKGROUND attribute was specified in the <TABLE> or <TD> tag. Internet Explorer doesn't seem to have this problem, but keep this discrepancy in mind when using background images in tables (I'd opt for a seamless texture).

Finally, we have the BORDERCOLOR attribute, which denotes the color of the line drawn around the table. This one doesn't seem to be very compatible between browsers and shouldn't show up in earlier browsers. If you see the following table outlined in red, your browser is compatible :)

Aligning Data

What would tables be without a few customization features? In addition to the ALIGN attribute <TD> has VALIGN (vertical alignment) powers. Take this one for example:

Before

July 7th

Just been working on the HTML tutorials. Compiled a pretty long list of Flash tutorials and resources to check out. Hmmm...and I'm wavering on what "web programming" languages to undertake next...

The left table might look better if it was up top where the news clip did. What I can do is use the VALIGN in that table data cell to set it's vertical alignment to top, although the value can be either center or bottom as well. This is how it would look if vertically aligned at the top:

After

July 7th

Just been working on the HTML tutorials. Compiled a pretty long list of Flash tutorials and resources to check out. Hmmm...and I'm wavering on what "web programming" languages to undertake next...

Table Header

The Table Heading tags <TH> </TH> serves a purpose similar to the Heading tag <H#>. It simply denotes that the data within this cell is a heading (which means it centers and emphasizes that chunk of text). How is it used, you ask? Just use this in place of the <TD> </TD> tags. In fact, you can specify any attribute that <TD> uses in a <TH> tag, so they're fairly interchangeable.

Purely Useless List
Names	Rank
Joe	#1
Mary	#2
Bob Dole	#3
Alice in Wonderland	#4

Spanning

Another common term used for this is "merging." What it does is implement two possible attributes of the <TD> tag: COLSPAN and ROWSPAN. In this way you can have a single table data cell strech across two columns or down two rows. For example:

The first row's table data tag has a colspan of 2 (because it is as long as the two columns in the row below).

This table's first table data tag has a rowspan of 2 (because it stretches down as long as the two rows of the table).

How do we structure this with HTML code? Let's start with the COLSPAN example given above. Realize that this is originally a 2x2 matrix (two columns and two rows):

<TABLE Border>
<TR> <TD></TD><TD></TD> </TR>
<TR> <TD></TD><TD></TD> </TR>
</TABLE>

Then we merge the two data cells in the first row with a colspan attribute:

<TABLE Border>
<TR> <TD COLSPAN=2></TD> </TR>
<TR> <TD></TD>    <TD></TD> </TR>
</TABLE>

ROWSPAN code modifies the table code a bit differently. But you may have already guessed that you simply delete all the relevant <TD>s in the rows which are accounted for by the ROWSPAN. Let's see how the coding for the ROWSPAN example given above.

First we have the original 2x2 matrix again:

<TABLE Border>
<TR> <TD></TD><TD></TD> </TR>
<TR> <TD></TD><TD></TD> </TR>
</TABLE>

Then we merge the first data cell with the one below it (for ROWSPAN=2 rows that is) to get the following:

<TABLE Border>
<TR> <TD ROWSPAN=2></TD><TD></TD> </TR>
<TR>                                              <TD></TD> </TR>
</TABLE>

I coded some pretty complicated tables for illustrations in the frames tutorial (next), if you want to check those out.

Swapping Background Colors

As the title of this little blurb says, this is a quick trick to highlight your table cell when your mouse moves over it. Unfortunately, Netscape Navigator 4.03 (what I use) doesn't support it although later versions may. Nevertheless, it's a neat and extremely bandwidth efficient trick for faux mouseovers which utilizes some JavaScript syntax. All you need to do is insert the following code (with colors of your choice) in the italicized fields. Below is a sample implementation in a <TD> tag:

<TD onmouseover="this.style.background='Red' " onmouseout="this.style.background='White' ">

The first italicized value is the color of the background you see when you put your mouse over it; the second one is the color you see when your mouse moves out of the cell. (Often the latter is a "restoration color," which means that it returns to the color it was set at before the mouseover.) Check out our swapping bgcolors example page to see if you have an enabled browser.

Frames

What the heck are FRAMES doing in the <TABLE> tutorial? Well, it's a HTML 4.0 specification which allows you to control the borders of the table that appear. Naturally, Netscape Navigator 4.03- browsers do not support this (because the HTML 4 rules were still being drafted at the time). I don't find it particularly useful, but you may. The attribute is placed in the <TABLE> tag and valid values include:

• Above allows only the table border at the top to be show [single line]
• Below does the opposite of Above.
• Hsides draws the horizontal borders [top and bottom]
• Vsides draws vertical borders [left and right]
• Lhs draws a single vertical border on the left side of the table
• Rhs draws a single vertical border on the right side of the table

You can see the actual rendering of the table with FRAME attributes in your browser, or see snapshots of them (for unenabled browsers), and finally (last but not least) view the code.

Global Table Settings

This is probably the single best set of enhancements made to tables by HTML 4.0: the ability to specify text markup attributes for a group of table data cells (previously not possible). This is accomplished by enabling attributes for the <TR> tag to specify attributes that spans an entire row of data cells and the <COLGROUP> tag.

The <TR> tag, according to HTML 4.0 specifications, supports an ALIGN attribute, which sets the text alignment for every data cell in the table row.

As for <COLGROUP>, it has an entire slew of attributes which utilize Cascading Style Sheet syntax to customize the text formatting of each table column. There is also an ALIGN and VALIGN attribute for the <COLGROUP> tag, which, as you probably have already surmised, aligns the contents of every the data cell after the <COLSPAN> declaration. In addition to that, there is the STYLE attribute which allows you to declare the font, color, and font-weight of the text in that column. Let's take a quick 3x3 table example:

<TABLE Border>
<TR><TD> </TD><TD> </TD><TD></TD></TR>
<TR><TD> </TD><TD> </TD><TD></TD></TR>
<TR><TD> </TD><TD> </TD><TD></TD></TR>
</TABLE>

Now let's write the code that will show us the following [an image from IE 4.01]:

<TABLE Border>
<COLGROUP SPAN=3 STYLE="font:10pt Arial; color:red;">
<TR><TD>123</TD><TD>apple</TD><TD>hockey</TD></TR>
<TR><TD>456</TD><TD>orange</TD><TD>soccer</TD></TR>
<TR><TD>789</TD><TD>peach</TD><TD>basketball</TD></TR>
</TABLE>

What's SPAN, you ask? It works much like table cell merging (COLSPAN). What happened in that example above is that I specified this <COLGROUP> to be applied to all 3 columns in the table. In this way, you will be able to specify COLGROUP attributes for the entire table, among other things.

If I had wanted only to emphasize the middle column for example, it would look like this [an image from IE 4.01]:

<TABLE Border>
<COLGROUP> <!-- this line specifies nothing special for the first column -->
<COLGROUP ALIGN=Center STYLE="font-weight:bold;">
<TR><TD>123</TD><TD>apple</TD><TD>hockey</TD></TR>
<TR><TD>456</TD><TD>orange</TD><TD>soccer</TD></TR>
<TR><TD>789</TD><TD>peach</TD><TD>basketball</TD></TR>
</TABLE>

What if I put the second <COLGROUP> somewhere else? Hmm...well how about right after the first row?

<TABLE Border>
<COLGROUP> <!-- this line specifies nothing special for the first column -->
<TR><TD>123</TD><TD>apple</TD><TD>hockey</TD></TR>
<COLGROUP ALIGN=Center STYLE="font-weight:bold;">
<TR><TD>456</TD><TD>orange</TD><TD>soccer</TD></TR>
<TR><TD>789</TD><TD>peach</TD><TD>basketball</TD></TR>
</TABLE>

It would look like the following:

I've whipped up an example page with these COLGROUP combinations for you to view at your own discretion (once again, you may not see this in your browser unless it supports HTML 4.0 - the examples above were images taken on my IE 4.01 browser). Another thing that you can specify as an attribute of the COLGROUP is the column(s) WIDTH, which can be either relative or absolute.

There are a few more attributes (such as <THEAD>, <TFOOT> and <COL>) that basically don't affect the table presentation very much since you can create the same effect with current <HTML> tags, but it's been a long read already and you now should know more than you ever wanted (and need to know) about tables, so let's save the rest for another day. But if you really feel that I've left you hanging or if this tutorial hasn't been able to answer your question, you can email requests or questions to html@3dinfinity.com and we'll give you the low-down on it.

6 - Frames and Those That Float