How to Set Background Image in HTML Table ?

Last Updated : 28 Apr, 2025

Setting a background image in an HTML table can enhance the visual appeal of your webpage. In this article, we will discuss two methods to set a background image in an HTML table i.e. using inline CSS and external CSS.

Set Background Image in HTML Table using Inline CSS

In this approach, we directly apply the CSS style to the <table> tag using the style attribute.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Background Image in Table</title>

    <style>
        table {
            margin: auto;
        }

        table, tr td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table style="background-image: url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'); width: 400px; height: 200px;">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </table>
</body>

</html>

Output

table-background-image

Explanation

The background-image property is used to set the image as the background of the table.
The url() function is used to specify the path of the image file.
The width and height properties are used to set the size of the table.

Set Background Image in HTML Table using External CSS

In this method, we use an external CSS file to style the table. This approach is more maintainable and scalable.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Background Image in Table</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <table class="background-table">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </table>
</body>

</html>

CSS

/* Filename: style.css */

table {
    margin: auto;
}

table, tr td {
    border: 1px solid black;
}

.background-table {
    background-image: url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png');
    width: 400px;
    height: 200px;
}

Output: