Alternate html table column color

In the Previous Post We have seen how to add alternative color for table rows , in this post we look around how to add alternative color for columns in a table .


In two ways we can apply alternative color for columns
  1. using < colgroup  > tag .
  2. 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>

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; }

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>

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; }


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");
  });

No comments:

Post a Comment