Table Tutor - Lesson 8

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>Moe</td>
</tr>
 
</table>

Ed

Tom

Rick

Larry

Curly

Moe


It's often very useful to be able 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="#ff9933">
 
<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


 
<table border="3">
 
<tr bgcolor="#ff6666">
<td>Ed</td>
<td>Tom</td>
<td>Rick</td>
</tr>
 
<tr bgcolor="#66cccc">
<td>Larry</td>
<td>Curly</td>
<td>Moe</td>
</tr>
 
</table>

Ed

Tom

Rick

Larry

Curly

Moe


 
<table border="3">
 
<tr bgcolor="#dd44dd">
<td>Ed</td>
<td>Tom</td>
<td>Rick</td>
</tr>
 
<tr>
<td bgcolor="#ff0000">Larry</td>
<td>Curly</td>
<td bgcolor="#3366ff">Moe</td>
</tr>
 
</table>

Ed

Tom

Rick

Larry

Curly

Moe


Here are a couple handy charts I use to help choose background colors... one with 216 colors and another with 1536 colors. You can also use ColorPicker for playing around with 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="#ff9933">
 
<tr bgcolor="#00bb00">
<td bgcolor="#9999ff">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

FAQ: Can I use an image as a table background?

A: Yes, learn about it here

<< BACK NEXT >>