HTML Table Background Image of a cell

How to add background image to HTML page body elements and tables with repeat and size

We can create attractive headers like modern web design sites using background images. We will use one simple image

to create one header like this below. To create one image like this please visit our gradient tutorial in our graphics section.

This is our text over the header

<table 
    width="100%" 
    border="0" 
    cellspacing="1" 
    cellpadding="0" 
    background="images/bg1.jpg">

    <tr>
        <td>
            This is our text over the header
        </td>
    </tr>

</table>

Adding Background image to table data cell

This is our text over the header

<table 
    width="100%" 
    border="0" 
    cellspacing="1" 
    cellpadding="0">

    <tr>
        <td 
            background="images/bg1.jpg">
            This is our text over the header
        </td>
    </tr>

</table>

In above script we have added background image directly. We can also use style sheet to display images inside table

Using Style

Globally ( for the page ) we can declare style of the table like this.

table { 
    background: url("https://www.plus2net.com/images/top2.jpg") no-repeat; 
}

All tables of the page will follow this property and all will use the same image as background image.
By adding class to it we can define another style to some other tables.

table.t1 { 
    background: url("images/bg1.jpg") repeat; 
}

We will add the above code to head section of the page and display two tables with this.
demo of Table background image with CSS
Here is the script of the above demo

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of table background image</title>
<style type="text/css">
table { 
    background: url("https://www.plus2net.com/images/top2.jpg") no-repeat; 
}
table.t1 { 
    background: url("images/bg1.jpg") repeat; 
}
</style>
</head>

<body>
<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

<br><br>

<table class="t1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

</body>
</html>

Table
HTML Page Structure

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

andy	07-12-2014
How can I put different tiling images into a table? I have a 9x9 table, and I want to use the 8 edge cells as the border. I have the corner images sorted (20x20pix), and i have 4 seperate images (20x1 and 1x20) that i need them to extend along the edges. The horizontal ones work, but not the vertical ones. Im using Dreamweaver and CSS. Any suggestions? Thanks

HTML table background image

Adding Background image to table data cell

Using Style

Subhendu Mohapatra