tutor

TABLE LESSON NO 4

You can specify background colors for a <TABLE>, <TR> table row or a <TD> table cell. Just use BGCOLOR like you would in the <BODY> tag.

CELLSPACING controls the space between table cells. Although there is no official default, browsers usually use a default of 2 if not specified.
CELLPADDING sets the amount of space between the contents of the cell and the cell wall. The default is 1 if not specified.

Using The Professors Color Chart to pick your colors, you can create some very interesting colored Tables.

<TABLE BORDER=3 CELLPADDING=20 CELLSPACING=5
BGCOLOR="#996600">
<TR>
<TD>Lets</TD>
<TD>Make</TD>
<TD>Some</TD>
<TD>Cake</TD>
</TR>
<TR>
<TD>Flour</TD>
<TD>Milk</TD>
<TD>Sugar</TD>
<TD>Eggs</TD>
</TR>
</TABLE>

spacer
Lets Make Some Cake
Flour Milk Sugar Eggs

spacer

Style used for this table

.table2{border:3px solid #996600; border-spacing:5px;}
.table2 td{background-color:#996600;color:#ffffff;padding:20px;}

<TABLE class=table2>

Now lets add a color attribute to the <TR>row

<TABLE BORDER=3 CELLPADDING=20 CELLSPACING=5>
<TR BGCOLOR="#996600">
<TD>Lets</TD>
<TD>Make</TD>
<TD>Some</TD>
<TD>Cake</TD>
</TR>
<TR BGCOLOR="#cc00cc">
<TD>Flour</TD>
<TD>Milk</TD>
<TD>Sugar</TD>
<TD>Eggs</TD>
</TR>
</TABLE>

spacer
Lets Make Some Cake
Flour Milk Sugar Eggs
spacer

Style used for this table

.table3{ border:3px solid #996600; border-spacing:5px;}
.table3 .tr1{ background-color:#996600;}
.table3 .tr2{ background-color:#cc0066;}
.table3 td{ color:#ffffff; padding:20px; text-align:center;}

<TABLE class=table3>

Now lets add a color attribute to 2 <TD>cells keeping the 2 <TR> rows the same color

<TABLE BORDER=3 CELLPADDING=20 CELLSPACING=5>
<TR BGCOLOR="#996600">
<TD>Lets</TD>
<TD>Make</TD>
<TD>Some</TD>
<TD>Cake</TD>
</TR>
<TR BGCOLOR="#cc00cc">
<TD BGCOLOR="#9933FF">Flour</TD>
<TD>Milk</TD>
<TD>Sugar</TD>
<TD BGCOLOR="#3366FF">Eggs</TD>
</TR>
</TABLE>

spacer
Lets Make Some Cake
Flour Milk Sugar Eggs



spacer

Style used for this table

.table4{ border:3px solid; border-spacing:5px; }
.table4 .tr1{ background-color:#996600; text-align:center; }
.table4 .tr2{ background-color:#cc00cc; }
.table4 .td1{ background-color:#9933ff; }
.table4 .td4{ background-color: #3366ff; }
.table4 td{ color:#ffffff; padding:20px; text-align:center; }

<TABLE class=table4>

Did you notice that when the <TABLE BGCOLOR> and the <TD BGCOLOR> were not specified that the cell and border colors assumed were the page bgcolors?

One more thing about these table background colors... a <TR> bgcolor and a <TD> bgcolor will override a <TABLE> bgcolor. A <TD> cell will override a<TR>table row<.p>

All html coding works in a cell. We'll make The Professor a link to The Basic Signature Series and use text to make a link to the Tools Section.

<TABLE BORDER=1 CELLPADDING=10 CELLSPACING=5
BGCOLOR="#0000FF">
<TR>
<TD BGCOLOR="#3366ff" ALIGN=CENTER WIDTH=200>
Let's visit<br><br>The Professor's
<br><br><A HREF="tools.html">Tools Section</A></TD>
<TD ALIGN=CENTER BGCOLOR="#CC00CC" WIDTH=200>
<A HREF="prof.html">
<img src="grad.gif" width=152 height=199></A></TD>
</TR></TABLE>

spacer
Let's visit

The Professor's

Tools Section		 The Professor

spacer

Style used for this table

.table5 { border:1 px solid #0000ff; border-spacing:5px; background-color:#0000ff; }
.table5 td{ width:200px; text-align:center; }
.table5 .td1{ color:#ffffff; background-color:#3366ff; }
.table5 .td2{ background-color:#cc00cc; }

<TABLE class=table5>

Colspan & Rowspan Table Lesson

colspan and rowspan are attributes of the <TD> cell and are sometimes difficult to grasp. The Professor has decided to create a separate Tutorial that will be of interest to the advanced table student and urges those just starting a table course to have a look also as some of the techniques may be applied to basic tables.

All this Cake talk is making The Professor hungry. Lets go and make one.



The Professor's Table Navigation

Introduction

Lesson No 1Lesson No 2Lesson No 3Lesson No 4Lesson No 5

DESIGN BY
THE PROFESSOR

home Valid CSS! HTML Hit Counter