• Post category:CSS

How to Set Table Background Image in HTML

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:

table background image in html

READ ALSO  Good Example to Understand Why CSS Flexbox align-self ?

Leave a Reply