In two ways we can apply alternative color for columns
- using < colgroup > tag .
- using javaScript .
using < colgroup > tag
Add the < colgroup > just below the opening table tag (< table >) , the number of colgroup tag must equals to the number of columns in the table , for example if you have 3 columns then add 3
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table border="1" cellpadding='5'>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table border="1" cellpadding='5'>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
It's very simple just add the following CSS property.
for odd columns
colgroup:nth-child(odd) { background-color: #ffffff; }
for even columns
colgroup:nth-child(even) { background-color: #ABCCF2; }
style.css
table { border-collapse: collapse;}
th { color: #fff; background-color: #000000; text-align:center; }
td{height:30px}
colgroup:nth-child(even) { background-color: #ABCCF2; }
colgroup:nth-child(odd) { background-color: #ffffff; }
th { color: #fff; background-color: #000000; text-align:center; }
td{height:30px}
colgroup:nth-child(even) { background-color: #ABCCF2; }
colgroup:nth-child(odd) { background-color: #ffffff; }
OR
Using JavaScript
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="altcol.js"> </script>
</head>
<body>
<table border="1" cellpadding='5'>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="altcol.js"> </script>
</head>
<body>
<table border="1" cellpadding='5'>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
style.css
table { border-collapse: collapse;}
th { color: #fff; background-color: #000000; text-align:center; }
td{height:30px}
.oddColumn{ background-color: #ABCCF2; }
.evenColumn{background-color: #ffffff; }
th { color: #fff; background-color: #000000; text-align:center; }
td{height:30px}
.oddColumn{ background-color: #ABCCF2; }
.evenColumn{background-color: #ffffff; }
JavaScript
Logic used in JavaScript for finding odd and even column
1) Odd Column = ( In Even row + Every Odd Cell ) + ( In Odd row + Every Odd Cell )
$("tr:even").find("td:odd") + $("tr:odd").find("td:odd")
2) Even Column= ( In Even row + Every Even Cell ) + ( In Odd row + Every Even Cell )
$("tr:even").find("td:even") + $("tr:odd").find("td:even")
altcol.js
$(document).ready(function(){
//odd column
$("tr:even").find("td:odd").addClass("oddColumn");
$("tr:odd").find("td:odd").addClass("oddColumn");
//even column
$("tr:even").find("td:even").addClass("evenColumn");
$("tr:odd").find("td:even").addClass("evenColumn");
});
//odd column
$("tr:even").find("td:odd").addClass("oddColumn");
$("tr:odd").find("td:odd").addClass("oddColumn");
//even column
$("tr:even").find("td:even").addClass("evenColumn");
$("tr:odd").find("td:even").addClass("evenColumn");
});
No comments:
Post a Comment