Vol. 1, No. 3
TABLES

Greetings Better Builder,

We hope everyone had a nice St. Patty's Day and that all the green dye has finally worn off. If it didn't, maybe you can go to Easter dinner dressed as a green egg. That's our plan anyway. To take our minds off of our grass-green hair (the label said "temporary," I swear), we've decided to immerse ourselves in HTML. The result? We've got a juicy lesson for you today.

Yes, today we'll be introducing you to the wild, woolly world of creating HTML tables. We'll start off nice and slow with an explanation of basic table tags and attributes. But by the end of the lesson, you'll be able to gussy up your site with a fancy color table, featuring every possible shade of green (assuming, of course, you'd want to do such a thing).

If you've created tables in Word, or have had any exposure to Excel, then you're already familiar with the whole table concept. Tables help organize content by breaking things down into individual cells. When it comes to the Web, however, tables can be used as more than just a way to organize information — they can become part of the actual page design.

Before we tackle the artsy capabilities of tables (color, layout, etc.), let's start with the basics. See this simple table?

1	2
3	4

To create this table, you would use the following HTML:

<TABLE BORDER="1" WIDTH="100">
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>

What's all this, you ask? TR? TD? Tsk, tsk! Unfortunately, HTML tables aren't as easy to generate as the tables you're used to creating in Word. HTML tables really aren't too, too hard, once you get the hang of them. The key is to understand what all the elements of the table represent. Here, take a look at these tags:

<TABLE> is pretty straightforward. BORDER="1" indicates the width of the border that outlines each cell in the table. If you don't want a border at all, simply use BORDER="0". Sadly, you can't have the border appear only around specific cells — with HTML table borders, it's all or nothing. WIDTH="100" indicates the width of the entire table in pixels. You can also express width as a percentage of the overall window width — so it will scale if users resize their browser windows — simply by using a percentage, like so: WIDTH="95%".

<TR> indicates a horizontal table row.

<TD> indicates an individual table cell.

In the example above, there are two rows, each with two cells in them; thus two sets of <TR> </TR> tags, each with two sets of <TD> </TD> tags. Things like BORDER and WIDTH are attributes, and almost all of them (with the exception of the BORDER and a few others) can be applied to individual rows or cells as well as the table as a whole. Once you understand those basic concepts, you're ready to "go outside the box" with various table attributes.

Now let's try monkeying around with the layout of our basic table using the attributes ROWSPAN (referring to rows <TR>, which run horizontally) and COLSPAN (as in columns, which run vertically). That said, this HTML:

<TABLE BORDER="1" WIDTH="100">
<TR>
<TD ROWSPAN="2">1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
</TR>
</TABLE>

... would create a table like this:

1	2
	3

ROWSPAN="2" indicates that the specified cell should span two rows (thus the "2"). The same principle applies to columns. Take a look:

<TABLE BORDER="1" WIDTH="100">
<TR>
<TD COLSPAN="2">1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
</TABLE>

Now, that would look something like this:

1		2
3	4	5

Simple, no? Now let's mess around with the oh-so-exciting alignment attributes, VALIGN and ALIGN. This HTML:

<TABLE BORDER="1" WIDTH="100">
<TR>
<TD ROWSPAN="2" VALIGN="TOP">1</TD>
<TD ALIGN="RIGHT">2</TD>
</TR>
<TR>
<TD ALIGN="CENTER">3</TD>
</TR>
</TABLE>

... would create a table like this:

1	2
	3

As you may have noticed, VALIGN refers to vertical alignment and can equal TOP, CENTER, and BOTTOM. However, it defaults to CENTER, so there's rarely an occasion where you'd have to say VALIGN="CENTER". ALIGN refers to horizontal alignment and can equal LEFT, CENTER, or RIGHT. However, it defaults to LEFT. If you want all the cells in a row to have the same alignment, simply add the attribute to the <TR> tag, like so: <TR VALIGN="TOP">. Using ALIGN="RIGHT" in the <TABLE> tag will align the entire table to the right, and any non-table text that follows will wrap around the table. Similarly, you can also use VALIGN attributes within the <TABLE> tag. For more information, and more detailed examples of what you can do with a basic table, check out:

http://go.webmonkey.com/html/96/47/index3a.html/659

http://go.webmonkey.com/html/96/48/index2a.html/659

Now let's add a little color to our tables. First, pick out some colors you like by going to the Freeform editor in Tripod's Homepage Studio.

Select "Color Palette" from the "Select Building Supplies" pull-down menu. Point and click on the colors that catch your eye to get each color's hex value. Here's what we came up with:

lime green = #33FF00
olive green = #009933
yellow green = #99CC33

To create a table that would look like the last example, only with the background of each cell a different shade of green, you'd drop in the following BGCOLOR (as in "background color") attributes:

<TABLE BORDER="1" WIDTH="100">
<TR>
<TD ROWSPAN="2" VALIGN="TOP" BGCOLOR="#33FF00">1</TD>
<TD ALIGN="RIGHT" BGCOLOR="#009933">2</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR="#99CC33">3</TD>
</TR>
</TABLE>

Voila!

1	2
	3

For more information about adding color to your tables, read Webmonkey's "The Well-Dressed Table."

You can see all of the tables we've covered in this issues at this "Lesson is Action."

Another thing you can do to tables is play around with the amount of "white space" you have around your content using the CELLSPACING and CELLPADDING attributes, which go in the <TABLE> tag, and only in the <TABLE> tag. (Like the BORDER attribute, they can't be used with the <TR> or <TD> tag.) CELLPADDING increases the size of each cell in the table. Indicate how fat you want each cell to be, like so: <TABLE CELLPADDING="10">. CELLSPACING, on the other hand, leaves the natural size of the cell alone and beefs up the space between the cells and the border. While both these tags appear to have a similar effect on a table with a white background, once you start playing around with the BGCOLOR attribute, you'll notice quite a difference.

When it comes to tables, the key is to play around with them. You can only get used to their awkward ways by using them. Spend some time with tables, and you'll soon fall in love and start using them everywhere. You may even find yourselves using tables within tables (called "nesting tables," this process involves putting a table within the cell of another table, which can get mighty confusing). Be careful, though — only use tables when you absolutely need to because all the extra code they require can clog up a page and cause it to take longer for your users to load.

Another thing to watch out for when it comes to tables is the use of WYSIWYG (What You See Is What You Get) HTML editors, like HomePage, for example. While programs like these can do all the generic <TR> and <TD> tags for you, they tend to generate lots of extraneous HTML code. The best way to use these tools is only after you know your way around tables. That way, you'll know how to go in and clean up after them.

That said, we now want you to go out there and practice, practice, practice those tables!

HINTS, POINTERS, AND TIPS 'O THE TRADE: We've made mistakes so you don't have to!

• Font tags, like <B>, <I>, or even <FONT COLOR="[hex value]"> or <FONT SIZE="[number]"> need to be repeated within each cell. You can't simply slap tags around an entire table and call it a day.
• Tables are very fragile things. Even one missing </TR> can cause a table to act strangely, and an absent </TABLE> tag can cause the entire table to disappear completely. So be very careful to dot your i's and cross your t's when you're dealing with tables.
• When you're on a super-steep hill, and you're driving a car with a manual transmission, make sure your car's in first gear, and not reverse, before you slam your foot on the accelerator.

Handcrafted Archive