Custom Header Style and Row Striping

HTML

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="styling-cutom-striping">
 <thead>
  <tr>
   <th class="header headerSortDown">Name</th>
   <th class="header">Age</th>
   <th class="header">Total purchase</th>
   <th class="header">Email</th>
   <th class="header">Date</th>
  </tr>
 </thead>
 <tbody><tr class="even">
   <td>Clark</td>
   <td>18</td>
   <td>$15.89</td>
   <td>c.kent@gmail.com</td>
   <td>Jan 12, 2013 11:14 AM</td>
  </tr><tr class="odd">
   <td>John</td>
   <td>32</td>
   <td>$19.99</td>
   <td>john.doe@gmail.com</td>
   <td>Dec 10, 2013 5:14 AM</td>
  </tr><tr class="even">
   <td>Peter</td>
   <td>28</td>
   <td>$9.99</td>
   <td>peter.parker@gmail.com</td>
   <td>Jul 6, 2013 8:14 AM</td>
  </tr></tbody>
</table>

CSS

th {
 text-align: left;
 padding: 5px;
 background-color: #6E6E6E;
}

td {
 color: #FFF;
 padding: 5px;
}

table {
 font-size: 12px;
 background-color: #4D4D4D;
 width: 728px;
 border: 1px solid #000;
}

.even {
 background-color: #3D3D3D;
}

.odd {
 background-color: #6E6E6E;
}

.highlight {
 background-color: #3D3D3D;
 font-weight: bold;
}

.header {
 background-image: url(../images/header-bg.png);
 background-repeat: no-repeat;
 border-left: 1px solid #FFF;
 border-right: 1px solid #000;
 border-top: 1px solid #FFF;
 padding-left: 30px;
 padding-top: 8px;
 height: auto;
}

.headerSortUp {
 background-image: url(../images/header-asc.png);
 background-repeat: no-repeat;
 border-left: 1px solid #FFF;
 border-right: 1px solid #000;
 border-top: 1px solid #FFF;
 padding-left: 30px;
 padding-top: 8px;
 height: auto;
}

.headerSortDown {
 background-image: url(../images/header-desc.png);
 background-repeat: no-repeat;
 border-left: 1px solid #FFF;
 border-right: 1px solid #000;
 border-top: 1px solid #FFF;
 padding-left: 30px;
 padding-top: 8px;
 height: auto;
}

JavaScript

 $(function() {
  $("#simple").tableSorter();
  
  $("#simple-init-sort").tableSorter({
   sortColumn: 'name' // Integer or String of the name of the column to sort by.  
  });

  $("#styling").tableSorter({
   sortColumn: 'name',     // Integer or String of the name of the column to sort by.  
   sortClassAsc: 'headerSortUp',   // class name for ascending sorting action to header
   sortClassDesc: 'headerSortDown', // class name for descending sorting action to header
   headerClass: 'header'     // class name for headers (th's)
  });
  
  $("#styling-cutom-striping").tableSorter({
   sortColumn: 'name',     // Integer or String of the name of the column to sort by.  
   sortClassAsc: 'headerSortUp',   // class name for ascending sorting action to header
   sortClassDesc: 'headerSortDown',  // class name for descending sorting action to header
   headerClass: 'header',     // class name for headers (th's)
   stripingRowClass: ['even','odd'], // class names for striping supplyed as a array.
   stripeRowsOnStartUp: true
  });
  
  $("#styling-cutom-highlighting").tableSorter({
   sortColumn: 'name',     // Integer or String of the name of the column to sort by.
   sortClassAsc: 'headerSortUp',  // Class name for ascending sorting action to header
   sortClassDesc: 'headerSortDown', // Class name for descending sorting action to header
   highlightClass: 'highlight',   // class name for sort column highlighting.
   headerClass: 'header'    // Class name for headers (th's)
   
  });
  
  $("#date-uk").tableSorter({
   sortColumn: 'name',   // Integer or String of the name of the column to sort by.
   sortClassAsc: 'headerSortUp',  // Class name for ascending sorting action to header
   sortClassDesc: 'headerSortDown', // Class name for descending sorting action to header
   headerClass: 'header',   // Class name for headers (th's)
   dateFormat: 'dd/mm/yyyy'   // set date format for non iso dates default us, in this case override and set uk-format
  });
 });

jquery.js

Click to Download

jquery.tablesorter.js

Click to Download

Example

Click to DEMO