Background Images In Tables
Note: Adding a background image to a table or a table cell in this manner has never been part of any official HTML specification. But, it's been consistently recognized by web browsers for years and there's no reason to believe that will change anytime soon. I just wanted you to know that. Carry on....
We'll use this image (myback.gif)...
And use it in this table...
|
|
|
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td width="50" align="center">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center">4</td>
<td width="50" align="center">5</td>
<td width="50" align="center">6</td>
</tr>
</table>
|
First though, we'll kill the table borders...
|
|
|
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="50" align="center">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center">4</td>
<td width="50" align="center">5</td>
<td width="50" align="center">6</td>
</tr>
</table>
|
Insert background="myback.gif" into the TABLE tag...
|
|
|
<table cellspacing="0" cellpadding="0" border="0" background="myback.gif">
<tr>
<td width="50" align="center">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center">4</td>
<td width="50" align="center">5</td>
<td width="50" align="center">6</td>
</tr>
</table>
|
Specifying a background by row <tr> should be avoided (due to unpredictable results), but doing it by cell <td> is no problem...
|
|
|
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="50" align="center" background="myback.gif">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center" background="myback.gif">4</td>
<td width="50" align="center" background="myback.gif">5</td>
<td width="50" align="center" background="myback.gif">6</td>
</tr>
</table>
|
Simple enough, wouldn't you say?
Note I kept cellspacing at 0. Omitting the cellspacing attribute will result in the default cellspacing (usually 2) and white spaces between your cells...
|
|
|
<table cellpadding="0" border="0">
<tr>
<td width="50" align="center" background="myback.gif">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center" background="myback.gif">4</td>
<td width="50" align="center" background="myback.gif">5</td>
<td width="50" align="center" background="myback.gif">6</td>
</tr>
</table>
|
