Lesson 3
You can specify background colors for a table cell, row or the whole table.Use BGCOLOR just like you would in the <BODY> tag.
<TABLE BORDER=3 BGCOLOR="#FFCC66">
<TR>
<TD>Edwin</TD>
<TD>Tom</TD>
<TD>Richard</TD>
</TR>
<TR>
<TD>Lara</TD>
<TD>Daisy</TD>
<TD>Moly</TD>
</TR>
</TABLE>
Will display the table with yellowish background color.
| Edwin |
Tom |
Richard |
| Lara |
Daisy |
Moly |
<TABLE BORDER=3>
<TR BGCOLOR="#FFCC66">
<TD>Edwin</TD>
<TD>Tom</TD>
<TD>Richard</TD>
</TR>
<TR BGCOLOR="#99CCCC">
<TD>Lara</TD>
<TD>Daisy</TD>
<TD>Moly</TD>
</TR>
</TABLE>
Will display the rows in different colours - in FFCC66 & 99CCCC.
| Edwin |
Tom |
Richard |
| Lara |
Daisy |
Moly |
<TABLE BORDER=3>
<TR BGCOLOR="#FFCCFF">
<TD>Edwin</TD>
<TD>Tom</TD>
<TD>Richard</TD>
</TR>
<TR>
<TD BGCOLOR="#FF0000">Lara</TD>
<TD>Daisy</TD>
<TD BGCOLOR="#3366FF">Moly</TD>
</TR>
</TABLE>
Save it and view the colour change of table in browser. Here the second row is having 3 different colours.
| Edwin |
Tom |
Richard |
| Lara |
Daisy |
Moly |
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. See the example:
<TABLE BORDER=3 BGCOLOR="#FF6633">
<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Edwin</TD>
<TD>Tom</TD>
<TD>Richard</TD>
</TR>
</TABLE>
Here Edwin will be displayed in colour 9999FF. The other two cells will be in green due to 009900.
COLSPAN (Column Span) and ROWSPAN
Tom is out of the table and we have.
<TABLE BORDER=3>
<TR>
<TD>Edwin</TD>
<TD>Richard</TD>
</TR>
<TR>
<TD>Lara</TD>
<TD>Daisy</TD>
<TD>Moly</TD>
</TR>
</TABLE>
The out put will be as
| Edwin |
Richard |
| Lara |
Daisy |
Moly |
It just left an empty spot and Richard slid over to fill the void.
If we want Edwin to actually take possession of Tom's cell and make the area part of his own, we have to use the COLSPAN attribute.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Edwin</TD>
<TD>Richard</TD>
</TR>
<TR>
<TD>Lara</TD>
<TD>Daisy</TD>
<TD>Moly</TD>
</TR>
</TABLE>
The out put will be as
| Edwin |
Richard |
| Lara |
Daisy |
Moly |
Here in first row first two rows will be occupied by Edwin and the last cell in first row is by Richard.
All other html coding, by the way, can be used in a cell. We'll make Edwin bold as an example.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER><B>Edwin</B></TD>
</TR>
<TR>
<TD>Lara</TD>
<TD>Daisy</TD>
<TD>Moly</TD>
</TR>
</TABLE>
The out put will be as
Here in first row Edwin will be bold and centralised.
You can also add a hyperlink to the data in a cell - Edwin - as,
<A HREF="http://gallery.bizhat.com/">Edwin</A> .
As you may have guessed, <ROWSPAN> is just like <COLSPAN>. It span rows instead of columns.
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Edwin</TD>
<TD>Tom</TD>
<TD>Richard</TD>
<TR>
<TD>Daisy</TD>
<TD>Moly</TD>
</TR>
</TABLE>
The out put will be as
| Edwin |
Tom |
Richard |
| Daisy |
Moly |
Here Edwin will occupy the first coloumns in both rows.
And of course, these tags can also be used in combination.
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Edwin</TD>
<TD COLSPAN=2>Tom</TD>
<TR>
<TD>Daisy</TD>
<TD>Moly</TD>
</TR>
</TABLE>
The out put will be as
Here Edwin will occupy the first coloumns in both rows. Tom will occupy two coloumns - second and third - in first row.
<--BACK
NEXT-->
|
