How to Set Background Image in HTML Table ?

Setting a background image in an HTML table can enhance the visual appeal of your webpage. In this article, we will discuss two methods to set a background image in an HTML table i.e. using inline CSS and external CSS.

Set Background Image in HTML Table using Inline CSS

In this approach, we directly apply the CSS style to the <table> tag using the style attribute.

Output

👁 table-background-image

Explanation

• The background-image property is used to set the image as the background of the table.
• The url() function is used to specify the path of the image file.
• The width and height properties are used to set the size of the table.

Set Background Image in HTML Table using External CSS

In this method, we use an external CSS file to style the table. This approach is more maintainable and scalable.

Output:

👁 table-background-image

Explanation

• The .background-table class is defined in the external CSS file styles.css.
• The background-image property is used to set the image as the background of the table.
• The width and height properties are used to set the size of the table.
• The class is applied to the <table> tag in the HTML file.