Answer 1

Firstly, get your background image and make a note of the height and width. Then, upload your image to your hosting provider. Make sure you test the URL for the image. One of the most common reasons why images don't display is because there is a typo in the URL.

Once you've finished that step, put a CSS style block in the head of your document:

<style type="text/css">
</style>

Write your CSS for the background on your table and put it inside the style block:

table { background: url("URL to image from step 2") no-repeat; }

Place your table in the HTML:

<table>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr></table>

Set the width and height of the table to match the image width and height.

<table style="width:400px;height:500px;"> …​​

Remember that if your table contents are larger than the image height and width, the background image will only display once.

PUT A BACKGROUND ON JUST ONE TABLE

The above instructions will set the same background image on every table on the page. If you want to put the background on only specific tables, you need to use a class attribute.

Change your CSS to read:

table.background { background: url("URL to image from step 2") no-repeat; }

Add the class “background” to any table you want to have that background image. Be sure to set the width and height for those tables.

<table class="background"style="width:400px;height:500px;> …

LET THE TABLE BACKGROUND IMAGE REPEAT

Larger tables, or tables with more content may need to have the background repeat so that the entire table is filled. Change the value in your CSS so that the image repeats on the y-axis, the x-axis, or is tiled on both.

background: url("URL to image from step 2") repeat;

By default the repeat value will be tiled, but you can also set the repeat value to repeat-x or repeat-y to tile horizontally or vertically, respectively..