HTML From the Ground Up

by L. Downs

An Introduction to Tables

By now you've probably begun to realize that when it comes to spreading things out over a page, HTML is a bit on the limited side. Although you can center headings, actually placing a block of text off to one side of a page like this:

Hi, there. I am a block of text, floating out in the middle of nowhere on the right side of the page.

is not possible using the HTML you've learned.

(Hey, wait a minute! How did you do that?!)

The answer is tables. With tables, you can place text and/or graphics virtually anywhere you want on a page. Although with the increasing popularity of style sheets using tables for this purposes is gradually falling into disrepute, it's still the only reliable way to do it.

What exactly is a "table?" Think of it as one or more rectangles, arranged into columns and rows. (Each rectangle is called a "cell.") It can extend all the way across the page, or only occupy part of the width of the page. It can be just one row high, or can be so long that it covers dozens of screenfuls. And, best of all, you can hide parts of the table so that things seem to just be floating in mid-page.

Here is a very simple table, consisting of four cells arranged into two rows and two columns:

Row 1 Column 1	Row 1 Column 2
Row 2 Column 1	Row 2 Column 2

And here's the code for that table:



<TABLE BORDER="1" ALIGN="LEFT">


<TR>


<TD>Row 1<BR>Column 1</TD>


<TD>Row 1<BR>Column 2</TD>


</TR>


<TR>


<TD>Row 2<BR>Column 1</TD>


<TD>Row 2<BR>Column 2</TD>


</TR>


</TABLE>

There are just three tags needed to create basic tables. First, you enclose the entire table between <TABLE> and </TABLE> tags. Second, you enclose each row between <TR> and </TR> tags. And finally, you enclose the contents of each cell in each row between <TD> and </TD> tags. (Compare the table above with the code carefully and make sure you understand how it works before you continue.)

If you just want a bare-bones table, for presenting a chart or other data, this is all you really need. However, if you want to use tables for page layout, there are a few additional ingredients needed. The two most important ones are the BGCOLOR and the WIDTH attributes.

You've already seen the BGCOLOR attribute used for setting the background of your page. In tables, it's very powerful for this reason: you can set a different background color for each cell in a table. Repeat that sentence to yourself until it sinks in.

Let's set the two leftmost cells in our table to have white backgrounds and no text, and the rightmost cels to have light blue backgrounds. The results look like this:

	Row 1 Column 2
	Row 2 Column 2

Actually, we had to cheat a bit to do this. If you have an empty cel (containing no text or graphics), the browser will make it as narrow as possible, meaning that our leftmost cells would have just disappeared, leaving the two rightmost cells almost butted up against the left margin. Here's what our code actually looked like to accomplish the above:



<TABLE BORDER="0" WIDTH="20%">


<TR>


<TD BGCOLOR="#FFFFFF" WIDTH="10%">&nbsp;</TD>


<TD BGCOLOR="#CCFFFF" WIDTH="10%">Row 1<BR>Column 2</TD>


</TR>


<TR>


<TD BGCOLOR="#FFFFFF" WIDTH="10%">&nbsp;</TD>


<TD BGCOLOR="#CCFFFF" WIDTH="10%">Row 2<BR>Column 2</TD>


</TR>


</TABLE>

In order to keep the empty (and invisible) cells from collapsing completely, we had to do two things: put something in them, and force a specific width. The strange-looking contraption   is called an entity: a way to enter special characters that otherwise can't be used in HTML. An entity always begins with an ampersand and ends with a semicolon, and the characters in between tell what kind of character to display. In this case, "nbsp" stands for "non-breaking space," which is a kind of space that isn't treated as "white space"--in other words, you can string as many of these together as you want and your browser won't just collapse them into one space. In this case we need this, as a cell with just an ordinary space in it would be considered to be empty.

The second thing we did was to manually force the width by assigning the table as a whole a width of "20%"--meaning the table will take up 20% of the horizontal width of the page. Each of the cells was then assigned a width of "10%", so that each cell would be of equal size and take up exactly half of the table's width. You can also set the width of a cell in pixels, by leaving out the percent (%) sign, but this is not recommended: you don't know what video resolution the user on the other end will be using, and you also don't know how wide they may have set their browser's window. "Hard-coding" the width of a cell or table is strongly discouraged for this reason.

In the next lesson we'll again take a few steps back from the technicalities of all this, and discuss the issue of structure vs. appearance.

Terms to know from this lesson

<TABLE> and </TABLE> tags: Enclose a table structure.

<TR> and </TR> tags: Enclose one horizontal row of cells of a table.

<TD> and </TD> tags: Enclose the contents of a single cell within a row of a table.

WIDTH attribute: Sets the width of a structure such as a table, cell, graphic, etc., most commonly as a percentage.

Entity: A sequence of characters that "stand in" for a special character that cannot be typed on a keyboard, or that cannot be typed directly into an HTML document for other reasons. For example, ">" stands for the ">" sign, which cannot be typed directly into an HTML document because it is used to close tags.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.