Table Background Image in HTML

Learn how to set table background image in html with simple steps.

Steps to set table Bg-image

1. Create a table

To create a table, we need to use <table>, <tr>, and <td> tags. All the tables’ rows and columns appear in the <table> tag. <tr> tag is used to create Table rows. <td> tag is used to create table dimensions.

Syntax:

<table>
<tr><td> row1 column1<td><tr>
</table>

2. Set background image using CSS

To set the background image to the table, we need to use the CSS “background-image” property. And we must set the “background-image” to <table> tag as in the above code. Then it will display your whole table. To fit your image to your table size, we should set the “background-size” property to “cover”.

Example:

<table border="2px" style="color: yellow; background: url('nature.jpg'); background-size: cover;">
<tr><td>R1 C1<td>
<td>R1 C2</td>
<td>R1 C3</td> </tr>
<tr><td>R2 C1<td>
<td>R2 C2</td>
<td>R2 C3</td> </tr>
<tr><td>R3 C1<td>
<td>R3 C2</td>
<td>R3 C3</td> </tr></table>

Output: