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: