Articles'
Contents

Virginia's HTML—Tables

©2005, Martin Rinehart html-intro-06.html

I love tables. They let you solve all sorts of problems. Look at the navigation bar on the left. That's five different tables, each table has a single column and from one to 5 rows. Each table cell holds a hyperlink tag. Look to the very top. In my beige title there is a table (with no border) that lets me space out the three elements across the top. Here's what it looks like with the border turned on and some formatting turned off.

Martin
Rinehart's 		Java Consultant Site Home of the Decaf Project

When you relize that most things can also hold most things the top of this page (light blue-gray) makes sense. It's another table that has two elements (with no border)—the link to the contents and this page's title. The hyperlink is itself another table of one row and one column (with a border), the contents being the hyperlink to the contents page. Here's what it would look like if I turned the border on.

Articles'
Contents

Virginia's HTML—Tables

I regularly use tables as the elements of other tables. You can do this too if you learn just the three most basic table tags.

Basic Tags

The three fundamental tags are these. If you indent these items in your HTML your tables will be readable. Here's a sample of an HTML table and it's result in your browser.

<TABLE ALIGN="center" BGCOLOR=#c0c0f0 BORDER=1 CELLPADDING=5>
    <TR>
                <TD>
                       row 1, datum 1
                </TD>
                <TD>
                       row 1, datum 2
                </TD>
        </TR>
        <TR>
                <TD>
                       row 2, datum 1
                </TD>
                <TD>
                       row 2, datum 2
                </TD>
        </TR>
</TABLE>

The BORDER=1 attribute is the narrowest border. (BORDER=0 turns the border off.) The CELLPADDING attribute is the number of pixels between the cells' edges and their contents. (5 is generous; 2 is cramped.) Study the example until you understand how a table is built from rows and rows are built from table data. This is the result.

row 1, datum 1 row 1, datum 2
row 2, datum 1 row 2, datum 2

Common Attributes

Here I'll mention some of the attributes that I use constantly.

ALIGN

This is your old friend from the <H1> through <H6> tags and <P> tags. ALIGN is one of "left", "center" or "right". Default is "left", as always.

BGCOLOR

Same as <BGCOLOR> in the <BODY> tag. It can be used in the <TABLE> tag to override the page background. Omit it and the table's background will be the same as the page. It can also be used in the <TR> and <TD> tags. A datum color overrides the row's color; the row's color overrides the table's color. If you go back to the color page, you'll see how I got the table showing the colors, where this was just right. Try to resist the temptation to do stuff like this.

row 1, datum 1 row 1, datum 2
row 2, datum 1 row 2, datum 2

BORDER

Try your own tables and fiddle with the BORDER attribute. One word of advice—always start with at least BORDER=1 even if you don't want a border. It's the only way to see what's going on when you use tables within tables and other complicated stuff. Get it looking perfect before you switch to BORDER=0.

CELLPADDING

In the next example, I've omitted the CELLPADDING attribute, which is the same as CELLPADDING=0.

row 1, datum 1 row 1, datum 2
row 2, datum 1 row 2, datum 2

This is almost never what you want when you have text in your cells. It may be just right if your cells are holding images. (We'll get to images tomorrow.)

CELLSPACING

By default you get 2 pixels between cells. Here's the table above (no CELLPADDING) with three different CELLSPACING values.
0 2 (default) 5
row 1, datum 1 row 1, datum 2
row 2, datum 1 row 2, datum 2
row 1, datum 1 row 1, datum 2
row 2, datum 1 row 2, datum 2
row 1, datum 1 row 1, datum 2
row 2, datum 1 row 2, datum 2

A good rule is to specify CELLPADDING explicitly but don't include a CELLSPACING unless you really need to go for some special effect.

HEIGHT

By default, you get a height that fits your contents plus your CELLPADDING. Here I've set CELLPADDING=5 and changed the contents of the first datum to "row1,<P>datum 1".

row 1,

datum 1

row 1, datum 2
row 2, datum 1 row 2, datum 2

You see that the browser supplies the height needed to fit the content. You seldom need to specify a height. In fact, you usually don't want to specify a height because different users' browsers will be set to different widths, so the text contents of your table's cells will be wrapped differently. If you trust your browsers it will probably come out just fine.

Sometimes though, such as right now when I'm going to segué into the VALIGN attribute, it's handy to specify a height. Here I'm going to get that <P> tag out of the first cell and specify <TD HEIGHT=100>, instead.

row 1, datum 1 row 1, datum 2
row 2, datum 1 row 2, datum 2

You can't specify a HEIGHT for the row, unfortunately, but you can get the same effect by specifying the height of the first table datum in the row. As you can see, the default vertical alignment is in the middle.

VALIGN

The VALIGN can be omitted for the default (middle) or explicitly set to "top", "middle" or "bottom", as the next table shows.

VALIGN omitted VALIGN="middle"
VALIGN="top" VALIGN="bottom"

WIDTH

As with HEIGHT you often get the best result by letting the browser figure out how wide your table should be. Sometimes you want to take control yourself. When you do, you can specify WIDTH as a specific number of pixels or as a percentage. WIDTH can be an attribute of the <TABLE> tag or the <TD> tag. Here's an example.

<TABLE WIDTH=75%>
<TD WIDTH=150> <TD WIDTH=50%> <TD>

The table gets 75% of the browser window. The first table datum in the next row is 150 pixels wide. The second is 50% of the row's width and the last gets whatever space remains. Try resizing your browser window to see how this works dynamically.

Spanning Multiple Rows and Columns

In the previous example the table datum in the first row spans three table data in the second row. How's that done? I'll get my red pencil out to show you.

<TABLE>

        <TR>
                <TD COLSPAN=3>. . .</TD>
        </TR>

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

</TABLE>

The COLSPAN attribute makes a cell span multiple columns. Similarly, the ROWSPAN . . . Sorry. It should be perfectly obvious so I'll shut up.

One hint, though. When there's a ROWSPAN above, there's an implicit <TD> and </TD> pushed down into the row(s) below. If that's confusing, try COLSPANs before you go on to ROWSPANs.

Warning: this stuff can get tricky. Very tricky when you mix different COLSPAN and ROWSPAN attributes.

top
left row 2
row 3 last
cell

It is also very, very satisfying when you get a tricky one worked out to show the exact result you wanted. So your assignment is to do just that. Put a table in one of your pages and then work through this section, top to bottom, beginning with a plain, boring table and then work in every feature you've seen here until you have a mind-blowing table. (Or two or three.)

If you think you're getting the hang of this HTML stuff, try putting a table between the <LI> and </LI> tags of an ordered or unordered list. Try putting a list between the <TD> and </TD> tags of a table's row. Try putting a list that includes a table into another table.

I look forward to seeing it!

And if you've followed this far, you've learned everything you need to know to create every page you've seen in this tutorial. Tomorrow I'll show you how to use images. They're much easier than tables.

Yesterday         Tomorrow