Table Background Image in HTML
Learn how to set table background image in html with simple steps.
Steps to set background image in table
1. Create a table in HTML
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” or “background” property. And we must set the “background-image” to <table> tag as in the above code. Then bg-image 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>
- In this example, we have created a <table>. Then set the “background-image” and ‘size’ using CSS ‘style’ attribute.
- Inside the <table> tag, we have created 3 <tr> tags and we have created 2 <td> tags inside each <tr> tags.
- See the below output, the background-image is perfectly set to whole table.
Output:
If you want to set the background-image for a specific row, you need to set it using the “background” attribute of the <tr> tag. If you set background to <td> tag, it will display the particular table dimension.