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.
HTML
<!DOCTYPE html> <html> <head> <title>Background Image in Table</title> <style> table { margin: auto; } table, tr td { border: 1px solid black; } </style> </head> <body> <table style="background-image: url('https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png'); width: 400px; height: 200px;"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </body> </html> |
Output
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.
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.