| 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 ( ). 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> </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. ;-) |
| ||||||||