How to give different colors for different rows in a table CSS | Different Colors To Row In Table CSS
In this tutorial I am going to Explain How to give Different Colors to Different rows in a Tables. Using CSS We can give different colors to different tables easily !!!
Look at the following code keenly, Because rows are defined with classes namely odd and even.
The header class is different.
Consider the html code
<html>
<head>
</head>
<body>
<table border="0">
<tr class="trhead" align="center"><th>Row</th>
<th>Colors</th>
</tr>
<tr class="odd" align="center">
<td>odd row</td>
<td>blue color</td>
</tr>
<tr class="even" align="center">
<td>Even Row</td>
<td>Yellow Color</td>
</tr>
<tr class="odd" align="center">
<td>odd row</td>
<td>blue color</td>
</tr>
<tr class="even" align="center">
<td>Even Row</td>
<td>Yellow Color</td>
</tr>
<tr class="odd" align="center">
<td>odd row</td>
<td>blue color</td>
</tr>
<tr class="even" align="center">
<td>Even Row</td>
<td>Yellow Color</td>
</tr>
<tr class="odd" align="center">
<td>odd row</td>
<td>blue color</td>
</tr>
<tr class="even" align="center">
<td>Even Row</td>
<td>Yellow Color</td>
</tr>
</table>
</body>
If you paste the above code you will get a blank normal table.
In order to add color to it follow the below code. In this second piece of code I have added style to the table using CSS. Note that I didn't created a separate CSS file. I just given the CSS tag in the head tag using <style> tag.
Just see the below code to know how it woks.
Just see the below code to know how it woks.
<style>
.odd
{
background: blue;
}
.even
{
background: yellow;
}
</style>
Paste this CSS code in the head tag like in the below example. You will get different colours for your rows.
<html>
<head>
<style>
.odd
{
background: blue;
}
.even
{
background: yellow;
}
</style>
.odd
{
background: blue;
}
.even
{
background: yellow;
}
</style>
</head>
</head>
<body>
<table border="0">
<tr class="trhead" align="center"><th>Row</th>
<th>Colors</th>
</tr>
<tr class="odd" align="center">
<td>odd row</td>
<td>blue color</td>
</tr>
<tr class="even" align="center">
<td>Even Row</td>
<td>Yellow Color</td>
</tr>
<tr class="odd" align="center">
<td>odd row</td>
<td>blue color</td>
</tr>
<tr class="even" align="center">
<td>Even Row</td>
<td>Yellow Color</td>
</tr>
<tr class="odd" align="center">
<td>odd row</td>
<td>blue color</td>
</tr>
<tr class="even" align="center">
<td>Even Row</td>
<td>Yellow Color</td>
</tr>
<tr class="odd" align="center">
<td>odd row</td>
<td>blue color</td>
</tr>
<tr class="even" align="center">
<td>Even Row</td>
<td>Yellow Color</td>
</tr>
</body>
Your output will be ...
If you want each row to be displayed in different colors just give a class to that row and right a CSS for that , Then you will easily display a table with multicolored rows.
Just try it your self with diving colors to separate rows and columns, Feel free to post you doubt as comments here.
Hope this post would have helped you regarding building a table with different colors.

.jpg)

.jpg)











