Tables in HTML do not look good if displayed in their raw form. Designers use colors as HTML table background and graphics to make their web pages and tables in them look appealing. In this tutorial we will set an image background to our <table> as an HTML table image to make it look more attractive than it already does.
Step # 1 – Get style
HTML table image background can only be added to a <table> tag through CSS styling. The style attribute in HTML allows us to map CSS to an HTML element. The background image property in CSS allows us to set an image background to an HTML table. This property requires a path to the image file. The result will be a customized HTML table background irrespective to its size.
Step # 2 – Improving the background
By default the background image is set to repeat from where it ends. This can be turned off with the background repeat property. It is evident that the background image is drawn from the top left of the table. But a small and non-repeating background image doesn’t look good if drawn on one corner. To set it to be drawn on the center of the table, we can use the position property.
Finally our table looks better than before and may please the visitor of our web page more than before.
Home