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.

0 comments:

Post a Comment