How to add or change Color in Cells of an HTML Table

HTML Tables are much used in websites or blog, for both web designing and for listing something in a table. Here you will learn creating a beautifully customized tables which can be used in your articles to categorize something such as a product and its specifications. We can easily customize the table appearance as it appeals the heart of the visitors.

Let's Stat,
I have already written a tutorial on creating a custom Single Bordered HTML Table , now we are going to learn how to fill a cell, a row, a column or whole the table background with a color or an image.

Adding Colors or Image to Table

I assume You have read our previous post on creating a single bordered table [Read it]. Coloring is a very simple one we only need to use a tag bgcolor = "color/ color code". The word written in red is to be replaced with your color name or CSS Color-code for it. Eg : bgcolor = "yellow"    OR    bgcolor = "#FFFF00"

Color Filled in Table Background

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Above is the table of which the whole background color has been changed to pale yellow. Simply go through red colored part of the below code to know how I did it.

<div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<table bgcolor="#FFFFCC" border="1" cellpadding="8" class="_3p9" style="border-collapse: collapse; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; word-wrap: normal;"><tbody>
<tr><th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</tbody></table>
</div>

The yellow has been filled in whole the background as I put the tag bgcolor="#FFFFCC" inside the tag <Table>.

Only Header Raw are Colored

Unlike other coloring, this is a much professional one, doing this makes the table more appeals to the eye and easily understandable the title and the content to the visitors.

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

See red colored text in the code below.

<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" cellpadding="8" class="_3p9" style="border-collapse: collapse; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; word-wrap: normal;"><tbody>
<tr bgcolor="#FFFFCC"><th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</tbody></table>
</div>

Here We put the code to insert color inside the tag of <tr>, so the given color appears in that raw only.

Coloring a Cell in a Table

Now we are going to learn how to color a cell. Check below code, there you can find the red colored tag is repeated for every cells that we want.

<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" cellpadding="8" class="_3p9" style="border-collapse: collapse; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; word-wrap: normal;"><tbody>
<tr><th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td bgcolor="#FFFFCC">row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td bgcolor="#FFFFCC">row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</tbody></table>
</div>

The below table is the result of  the above code, You can see the yellow color was only shown in two cells in a raw for which we applied the bgcolor tag.

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2
row 2, cell 1	row 2, cell 2

From the Author Desk

I have written this tutorial simply as it can understand even for a newbie. Still if you feel any doubt free feel to ask. Your all queries were appreciated. If you like this post please like us in Facebook and follow us in Twitter.

...