Adding Colors and Pictures to HTML Table

We can change background of a table in two ways. We can add different Colors as background of an HTML Table as well as we can add pictures as a Table background.

HTML Background Color

We can use bgcolor attribute of a Table to add colors as background

<TABLE border=1 bgcolor=red>

You can use color names or use hexadecimal color code in bgcolor attribute.

table-background-color

HTML Source Code :

<html> <body > <table border=1 bgcolor=#DDDDDD> <tr> <td> Background color </td> </tr> </table> </body> </html>

Cell background color

You can set bgcolor attribute either in Table level or in each Cells.

<td bgcolor=red>

The above code will change only the particular cell color to red.

table-cell-backgroung-color

HTML Source Code :

<html> <body > <table border=1 > <tr> <td bgcolor=red> Background red color </td> <td bgcolor=green> Background green color </td> </tr> </table> </body> </html>

HTML Table Background Images

The background attribute allows you to change the background inside your table to that of an image of your choice.

<table border=1 background="bg-red.png">

Cell Background Images

You can set background images to each cells.

<td background="bg-red.png">

If the image dimensions are smaller than the table dimensions and there is enough space in the table, the image will repeat.

Note : The bgcolor and background attributes are deprecated in HTML 4.01.