Creating tables is relatively easy to do. But can become confusing especially when you want a background image in them. The proper way to create a table with a background is written like this:

<table
style=”background-image: url(http://www.your-site/your-image.jpg); width: 100%;”
border=”2″ cellpadding=”2″
cellspacing=”2″>
<tbody>
<tr>
<td style=”text-align: center; vertical-align: middle;”></td>
</tr>
</tbody>
</table>


Notice the way the backround image is written. this way will validate according to the W3 ( The World Wide Web Consortium). Now you can use the “background=http://www.yoursite.com/image.jpg” but this will not validate and is actually incorrect. Notice the width is set to 100%. This can also be set to a value determined by pixels, such as 700 pixels which would fit most screens. I prefer to use percentages as they will adjust to fit different size screens. You can also set the border, cell padding and cell spacing to any value you wish. These values are all in pixels.
Notice also that the td style is set to text align center and verticle align to middle. default if you are using Nvu would be “<td align=”undefined” valign=”undefined”>” which again will not validate. to be correct you need to set these values. This is where your table cell content will go, between the td tags:

<td style=”text-align: center; vertical-align: middle;”>This is where your text, images or another table (nested) will go.</td>

I hope this has helped you. If you are not sure of this or need more explanations let me know in the comments box and I will be glad to add more to this or another post to elaborate further.

Leave a Reply