• 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 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>
  1. In this example, we have created a <table>. Then set the “background-image” and ‘size’ using CSS ‘style’ attribute.
  2. Inside the <table> tag, we have created 3 <tr> tags and we have created 2 <td> tags inside each <tr> tags.
  3. See the below output, the background-image is perfectly set to whole table.

Output:

table background image in html

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.

Leave a Reply