Table Tutor- Lesson 4
Let's get rid of CELLPADDING and CELLSPACING and go back to our simple little table.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Tom | Rick |
| Larry | Curly | Mo |
A cool feature of the newer browsers is the ability to specify background colors for a table cell, row or the whole table. You use BGCOLOR just like you would in the <BODY> tag.
<TABLE BORDER=3 BGCOLOR="#FFCC66">
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Tom | Rick |
| Larry | Curly | Mo |
<TABLE BORDER=3>
<TR BGCOLOR="#FF9999">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR BGCOLOR="#99CCCC">
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Tom | Rick |
| Larry | Curly | Mo |
<TABLE BORDER=3>
<TR BGCOLOR="#FFCCFF">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD BGCOLOR="#FF0000">Larry</TD>
<TD>Curly</TD>
<TD BGCOLOR="#3366FF">Mo</TD>
</TR>
</TABLE>
| Ed | Tom | Rick |
| Larry | Curly | Mo |
Here's a handy chart I use to choose background colors.
One more thing about these table background colors... a <TD> bgcolor will override a <TR> bgcolor and a <TR> bgcolor will override a <TABLE> bgcolor. Not that this needs further explanation but I'm kind of having fun with this so here's an example:
<TABLE BORDER=3 BGCOLOR="#FF6633">
<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Tom | Rick |
| Larry | Curly | Mo |
Let me take a minute to esplain something. A browser has to
interpret the instructions you give it the best way it can. If
something has not been specified one way or another, most
browsers will try to come up with an attractive solution. The
best thing you can do as an author is to specify as much as you
can, especially those things that are important for your page to
look right. It is also important to view your work through those
browsers that people actually use. Since most people use
Netscape, that is a good start. You may also want to have a copy
of a couple other popular browsers to be sure that you look right
to them too.
Another consideration is screen resolution. I work on a 640x480
screen. Many people use 800x600 and a few have theirs set to
1024x768. This simple difference has the potential to seriously
mess with your page design. There is a little utility that I use
called QuickRes
that can change your screen resolution back and forth with the
click of a button. It's not a bad idea to view your pages through
other resolutions.
Now we will play with COLSPAN (Column Span) and ROWSPAN (Row Span maybe??). Let's suppose Ed beats the crap out of Tom and throws him out of the table. Just doing that, this is what we have.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Rick | |
| Larry | Curly | Mo |
It just left an empty spot and Rick slid over to fill the void.
If we want Ed to actually take possession of Tom's cell and make the area part of his own, we have to use the COLSPAN attribute thusly.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Rick | |
| Larry | Curly | Mo |
To emphasise the point I made earlier, about the browser trying to find an attractive solution, let's make Ed span two columns but we'll put Tom back in. We will deliberately introduce a discrepancy just to see how the browser handles it.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Tom | Rick | |
| Larry | Curly | Mo | |
The point is 1) The browser is very forgiving in that it does the best it can with what you give it. 2) It is very important to specify what is important and make sure there are no discrepancies or you may end up with a surprise. And 3) nothing you do with html will crash the other person's browser no matter how badly you may have messed it up, so don't worry about that. (Unfortunately the same cannot be said for JAVA and animated gifs.)
OK... let's take Tom back out (the poor sap).
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Rick | |
| Larry | Curly | Mo |
Rick gets scared and he leaves. Ed takes over Rick's cell too and just cause he's that way, he stands right in the middle of the cell.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>Ed</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | ||
| Larry | Curly | Mo |
All other html coding, by the way can be used in a cell. We'll make Ed <STRONG> as an example.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER><STRONG>Ed</STRONG></TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | ||
| Larry | Curly | Mo |
We'll make him a link to my homepage.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://junior.apk.net/~jbarta/">Ed</A></TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | ||
| Larry | Curly | Mo |
Now get rid of all that stuff, bring back Tom and Rick and we'll dive into <ROWSPAN>.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Tom | Rick |
| Larry | Curly | Mo |
As you may have guessed, <ROWSPAN>
is just like <COLSPAN> 'cept yall span rows
instead of columns. (Not exactly brain surgery... is it?)
If we remove Larry and let Ed take over his cell, this is the
result.
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Tom | Rick |
| Curly | Mo |
And of course, these tags can also be used in combination.
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Ed</TD>
<TD COLSPAN=2>Tom</TD>
</TR>
<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
| Ed | Tom | |
| Curly | Mo | |
