Table Tutor - Lesson 3

Let's go back to plain old `Ed`.

    <TABLE BORDER=3 WIDTH=100 HEIGHT=75>
    <TR>
    <TD ALIGN="left" VALIGN="middle">Ed</TD>
    </TR>
    </TABLE>

Ed

And for the sake of clarity and simplicity let's remove the alignment attributes. We know what will happen because we know what the default values are. By the way, a `TAG` tells the browser to do something. An `ATTRIBUTE` goes inside the `TAG` and tells the browser how to do it.

    <TABLE BORDER=3 WIDTH=100 HEIGHT=75>
    <TR>
    <TD>Ed</TD>
    </TR>
    </TABLE>

Ed

Now we will make our table a fuzz bigger.

    <TABLE BORDER=3 WIDTH=300 HEIGHT=75>
    <TR>
    <TD>Ed</TD>
    </TR>
    </TABLE>

Ed

You should know that fuzz is a technical term. Its full definition is so broad and complicated that it would only be suitable for advanced html students.

Ed's friend Tom is back and this time he wants his own cell.

    <TABLE BORDER=3 WIDTH=300 HEIGHT=75>
    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    </TR>
    </TABLE>

Ed | Tom

When no instructions are given to the browser, each cell may (but not always) be different in size. It's often a fine idea to specify how big each cell is. Make sure your arithmetic is correct or what people see may be drastically different than what you want them to see!

    <TABLE BORDER=3 WIDTH=300 HEIGHT=75>
    <TR>
    <TD WIDTH=150>Ed</TD>
    <TD WIDTH=150>Tom</TD>
    </TR>
    </TABLE>

Ed | Tom

These `WIDTH` attributes can also be expressed as a percentage.

    <TABLE BORDER=3 WIDTH=300 HEIGHT=75>
    <TR>
    <TD WIDTH=50%>Ed</TD>
    <TD WIDTH=50%>Tom</TD>
    </TR>
    </TABLE>

Ed | Tom

FAQ: I've laid out my table with my dimensions but the table doesn't show up right. Or it's fine in Browser A but looks different in Browser B. A: Getting too specific with table cell dimensions is a tricky business. Often the browser doesn't render a table exactly how we've specified. The best way I've found to overcome this is to design tables that are more like rubberbands than a rigid framework. That is they flexibly hold everything together rather than rigidly box everything together. Design your table in such a way so that minor differences in the way a browser renders it won't destroy what you're trying to do.

Lets give Ed a bigger cell since he's been here from the beginning.

    <TABLE BORDER=3 WIDTH=300 HEIGHT=75>
    <TR>
    <TD WIDTH=80%>Ed</TD>
    <TD WIDTH=20%>Tom</TD>
    </TR>
    </TABLE>

Ed | Tom

Now Rick is back and of course he wants his own cell. We need to decide how much of the row we will give him. I suppose 20% is fair. Make sure to adjust Ed's share also.

    <TABLE BORDER=3 WIDTH=300 HEIGHT=75>
    <TR>
    <TD WIDTH=60%>Ed</TD>
    <TD WIDTH=20%>Tom</TD>
    <TD WIDTH=20%>Rick</TD>
    </TR>
    </TABLE>

Ed | Tom | Rick

Three yahoos from across the street see what's going on and they want to be in your table. I think we will give them their own row.

    <TABLE BORDER=3 WIDTH=300 HEIGHT=75>

    <TR>
    <TD WIDTH=60%>Ed</TD>
    <TD WIDTH=20%>Tom</TD>
    <TD WIDTH=20%>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

The `WIDTH` attributes in the first row carry over to the second row.

If Moe leaves, we still have a perfectly good table, it just has an empty spot.

    <TABLE BORDER=3 WIDTH=300 HEIGHT=75 >

    <TR>
    <TD WIDTH=60%>Ed</TD>
    <TD WIDTH=20%>Tom</TD>
    <TD WIDTH=20%>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly

What we may want to do, just to keep the browser from guessing, is to actually leave that empty cell there and just put a blank space in it (`&nbsp;`). Normally for a simple table this isn't necessary, however as your tables become more complex, the less guesing the browser has to to, the better off you'll be.

    <TABLE BORDER=3 WIDTH=300 HEIGHT=75 >

    <TR>
    <TD WIDTH=60%>Ed</TD>
    <TD WIDTH=20%>Tom</TD>
    <TD WIDTH=20%>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>&nbsp;</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly |

Let's put Moe back and remove all attributes except `BORDER`.

    <TABLE BORDER=3>

    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    <TD>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

Next are a couple of attributes called `CELLPADDING` and `CELLSPACING`. Both are used up front in the `<TABLE>` tag. `CELLPADDING` is the amount of space between the border of the cell and the contents of the cell.

    <TABLE BORDER=3 CELLPADDING=12>

    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    <TD>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

The default value for this attribute is normally 1. The reason it is 1 and not 0 is so that any text in the cells won't be banging up against the borders. (Although you could specify 0 if you wanted to).

If we substitute `CELLSPACING` for `CELLPADDING` we get a slightly different effect.

    <TABLE BORDER=3 CELLSPACING=12>

    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    <TD>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

The default value for the `CELLSPACING` attribute is usually 2.

We can, of course, use these attributes in combination.

    <TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>

    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    <TD>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

And, to see what it would look like, we can set them both to 0.

    <TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0>

    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    <TD>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

Before we continue there's an issue I'd like to touch on. I've seen more and more lately that some HTML authors are omitting closing cell `</TD>`, row `</TR>` and table `</TABLE>` tags. Even the W3C's html recommendation suggests that at least the closing cell and row tags can be left out. The idea is that the browser should know that when another cell begins, the last one must have ended. Unfortunately, as your tables become more complex, some browsers don't always understand this and the table goes goofy. The easiest way to completely sidestep this issue is to always include those closing tags. This also leads up to our next FAQ...

FAQ: I made my page using SooperCoder and my page is fine in Browser A but it's completely invisible in Browser B. What's going on? A: Whenever a whole page, or large portions of a page just "disappear", the culprit is usually one or more missing `</TABLE>` tags. Make sure all closing tags are there (especially `/TABLE`) and then the problem disappears. ;-)

`<--BACK` `NEXT-->`

General Table of Contents | Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 | Quick Reference | Barebones HTML Guide
PROFESSIONAL WEB DESIGN