Table Tutor - Lesson 4

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>Geetham</TD>
<TD>Sultan</TD>
<TD>Ibrahim</TD>
</TR>

<TR>
<TD>Kassim</TD>
<TD>Naseer</TD>
<TD>Purusoth</TD>
</TR>

</TABLE>

Geetham Sultan Ibrahim

Kassim Naseer Purusoth

<TABLE BORDER=3> <TR BGCOLOR="#FF9999"> <TD>Geetham</TD> <TD>Sultan</TD> <TD>Ibrahim</TD> </TR> <TR BGCOLOR="#99CCCC"> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Sultan Ibrahim Kassim Naseer Purusoth <TABLE BORDER=3> <TR BGCOLOR="#FFCCFF"> <TD>Geetham</TD> <TD>Sultan</TD> <TD>Ibrahim</TD> </TR> <TR> <TD BGCOLOR="#FF0000">Kassim</TD> <TD>Naseer</TD> <TD BGCOLOR="#3366FF">Purusoth</TD> </TR> </TABLE> Geetham Sultan Ibrahim Kassim Naseer Purusoth 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">Geetham</TD> <TD>Sultan</TD> <TD>Ibrahim</TD> </TR> <TR> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Sultan Ibrahim Kassim Naseer Purusoth Let me take a minute to explain 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 and IE, 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 800x600 screen. Many people use 640x480 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 if Geetham in and Sultan out of the table. Just doing that, this is what we have. <TABLE BORDER=3> <TR> <TD>Geetham</TD> <TD>Ibrahim</TD> </TR> <TR> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Ibrahim Kassim Naseer Purusoth It just left an empty spot and Ibrahim slid over to fill the void. If we want Geetham to actually take possession of Sultan's cell and make the area part of its own, we have to use the COLSPAN attribute thusly. <TABLE BORDER=3> <TR> <TD COLSPAN=2>Geetham</TD> <TD>Ibrahim</TD> </TR> <TR> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Ibrahim Kassim Naseer Purusoth To emphasis the point I made earlier, about the browser trying to find an attractive solution, let's make Geetham span two columns but we'll put Sultan back in. We will deliberately introduce a discrepancy just to see how the browser handles it. <TABLE BORDER=3> <TR> <TD COLSPAN=2>Geetham</TD> <TD>Sultan</TD> <TD>Ibrahim</TD> </TR> <TR> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Sultan Ibrahim Kassim Naseer Purusoth 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 Sultan back out. <TABLE BORDER=3> <TR> <TD COLSPAN=2>Geetham</TD> <TD>Ibrahim</TD> </TR> <TR> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Ibrahim Kassim Naseer Purusoth Ibrahim leaves. Geetham takes over Ibrahim's cell too, and stands right in the middle of the cell. <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN=CENTER>Geetham</TD> </TR> <TR> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Kassim Naseer Purusoth All other html coding, by the way, can be used in a cell. We'll make Geetham <STRONG> as an example. <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN=CENTER><STRONG>Geetham</STRONG></TD> </TR> <TR> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Kassim Naseer Purusoth We'll make Geetham link to my homepage. <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN=CENTER> <A HREF="http://knrfriends.20m.com/home">Geetham</A></TD> </TR> <TR> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Kassim Naseer Purusoth Now get rid of all that stuff, bring back Sultan and Ibrahim and we'll dive into <ROWSPAN>. <TABLE BORDER=3> <TR> <TD>Geetham</TD> <TD>Sultan</TD> <TD>Ibrahim</TD> </TR> <TR> <TD>Kassim</TD> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Sultan Ibrahim Kassim Naseer Purusoth As you may have guessed, <ROWSPAN> is just like <COLSPAN> 'cept yall span rows instead of columns. If we remove Kassim and let Geetham take over his cell, this is the result. <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Geetham</TD> <TD>Sultan</TD> <TD>Ibrahim</TD> </TR> <TR> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Sultan Ibrahim Naseer Purusoth And of course, these tags can also be used in combination. <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Geetham</TD> <TD COLSPAN=2>Sultan</TD> </TR> <TR> <TD>Naseer</TD> <TD>Purusoth</TD> </TR> </TABLE> Geetham Sultan Naseer Purusoth <--BACK NEXT--> Introduction Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6