Table Backgrounds
Using Colour
You can use bgcolor="#hexadecimal" inside of the <table> and <td> tags. Plus, experiment with cellspacing - space between the cells and cellpadding - space within the cells. In the example below, we have set the cellspacing to 2. This allows 2 pixels between each cell to be visible, in this case you can see the table colour between each cell.
| Button |
Some interesting text about your site. |
| Button |
With clever anecdotes and whimsical stories... |
<table align="center" bgcolor="#68839E" width="300" height="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#ff00ff" width="95" height="50"><b>Button</b></td>
<td width="205"><b>Some interesting text about your site.</b></td>
</tr>
<tr>
<td align="center" bgcolor="#00ffff" width="95" height="50"><b>Button</b></td>
<td width="205" valign="top"><b>With clever anecdotes and whimsical stories...</b></td>
</tr>
</table>
Using Images
Using images as backgrounds inside of cells can be a bit tricky. It looks simple enough - background="source of image" inside of either a <table> or <td> tag.
First - make sure you have set the width="in pixels" and height="in pixels" in each cell to the exact width and height of the image. If the width and height are too small the image will be cropped. If the width and height are too big then the image will tile, or repeat.
Second - not all browsers see images as backgrounds in tables the same way. In Netscape, if you want one image to cover the whole of a table, you must create a clear or transparent gif image to place inside of the <tr> or row tag.
- this is the only time you can place an image inside of a row tag
- this stops the browser from repeating the image each time it encounters a new cell.
Plus, older versions of Netscape wont permit you to layer one background on top of another, so to be on the safe side, use both the background="" and a matching bgcolor="" so the cells don't load as empty and look silly.
| Button |
Some interesting text about your site. |
| Button |
With clever anecdotes and whimsical stories... |
<table align="center" background="/images/table_bg.jpg" bgcolor="#68839E" width="300" height="100" border="0" cellspacing="0" cellpadding="0">
<tr background="/images/clear.gif">
<td align="center" background="/images/table_button.gif" width="95" height="50"><b>Button</b></td>
<td width="205"><b>Some interesting text about your site.</b></td>
</tr>
<tr background="/images/clear.gif">
<td align="center" background="/images/table_button.gif" width="95" height="50"><b>Button</b></td>
<td width="205" valign="top"><b>With clever anecdotes and whimsical stories...</b></td>
</tr>
</table>
|
