University of Vermont

UVM Self-help Web Guide

Tables

There are many ways to stylize tables on a website, two are supported by the Web Team. 1.) applying a UVM table call to your table so that it resembles UVM's visual style and 2.) sortable tables using jQuery.

UVM table calls

If you're interested in obtaining a table of information that incorporates some UVM style, much like seen on the costs page of the Admissions website, you'll need to add a special call to above your table code: <table class="uvmtable">

If you are using a responsive template you will want additional table calls.

How to:

You'll need to build your table using proper XHTML table head and data codes. Using the same example from above, the first bit of code in table format would look like this:

 <table class="uvmtable" width:100%;
"summary="Projected Cost of Attendence for 2010-2011"> <caption>Undergraduate 2011-12 estimated cost of attendance
12-18 credithours for two semesters</caption> <thead> <tr> <th></th> <th>Vermont Resident</th> <th>Out-of-State Resident</th> </tr> </thead> <tbody> <tr> <th>Tuition</th> <td>$12,888</td> <td>$32,528</td> </tr> <tr> <th>Comprehensive Student Fee</th> <td>$1,894</td> <td>$1,894</td> </tr> </tbody> </table>

Sortable tables using jQuery

To see an example of this, view number 6 below.

How to:

The following is a method for sorting data in HTML tables using the TableSorter jQuery plugin.

  1. Create your table being sure that your table includes <thead> and <tbody> sections.
  2. Stylize the table as desired, preferably using CSS.
  3. Add the TableSorter code before your table:
     <script type="text/javascript" src="/www/js/jquery.tablesorter.min.js"></script>
     	
  4. Give your table a unique ID and a class of "tablesorter":
     <table id="myTable" class="tablesorter"> 
     <thead>
     	<tr>
     		<th>…</th>
     		<th>…</th>
     		<th>…</th>
     		...
     	</tr>
     </thead>
     <tbody>
     	<tr>
     		<td>…</td>
     		<td>…</td>
     		<td>…</td>
     		...
     	</tr>
     </tbody>
     </table>
     	
  5. Initialize the sorter:
     <script>
     $(document).ready(function() 
     	{ 
     		$("#myTable").tablesorter(); 
     	} 
     );
     </script>
     	
  6. Your table is now sortable by clicking on the header cells. Example:
    Order Date Region Rep Item Units Cost Total
    1/6/09 Quebec Jones Pencil 95 1.99 189.05
    1/23/09 Ontario Kivell Binder 50 19.99 999.50
    2/9/09 Ontario Jardine Pencil 36 4.99 179.64
    2/26/09 Ontario Gill Pen 27 19.99 539.73
    3/15/09 Alberta Sorvino Pencil 56 2.99 167.44
    4/1/09 Quebec Jones Binder 60 4.99 299.40
    4/18/09 Ontario Andrews Pencil 75 1.99 149.25
    5/5/09 Ontario Jardine Pencil 90 4.99 449.10
    5/22/09 Alberta Thompson Pencil 32 1.99 63.68
    6/8/09 Quebec Jones Binder 60 8.99 539.40
    6/25/09 Ontario Morgan Pencil 90 4.99 449.10
    7/12/09 Quebec Howard Binder 29 1.99 57.71
    7/29/09 Quebec Parent Binder 81 19.99 1,619.19
    8/15/09 Quebec Jones Pencil 35 4.99 174.65
    9/1/09 Ontario Smith Desk 2 125.00 250.00
    9/18/09 Quebec Jones Pen Set 16 15.99 255.84
    10/5/09 Ontario Morgan Binder 28 8.99 251.72
    10/22/09 Quebec Jones Pen 64 8.99 575.36
    11/8/09 Quebec Parent Pen 15 19.99 299.85
    11/25/09 Ontario Kivell Pen Set 96 4.99 479.04
    12/12/09 Ontario Smith Pencil 67 1.29 86.43
    12/29/09 Quebec Parent Pen Set 74 15.99 1,183.26
    1/15/10 Ontario Gill Binder 46 8.99 413.54
    2/1/10 Ontario Smith Binder 87 15.00 1,305.00
    2/18/10 Quebec Jones Binder 4 4.99 19.96
    3/7/10 Alberta Sorvino Binder 7 19.99 139.93
    3/24/10 Ontario Jardine Pen Set 50 4.99 249.50
    4/10/10 Ontario Andrews Pencil 66 1.99 131.34
    4/27/10 Quebec Howard Pen 96 4.99 479.04
    5/14/10 Ontario Gill Pencil 53 1.29 68.37
    5/31/10 Ontario Gill Binder 80 8.99 719.20
    6/17/10 Ontario Kivell Desk 5 125.00 625.00
    7/4/10 Quebec Jones Pen Set 62 4.99 309.38
    7/21/10 Ontario Morgan Pen Set 55 12.49 686.95
    8/7/10 Ontario Kivell Pen Set 42 23.95 1,005.90
    8/24/10 Alberta Sorvino Desk 3 275.00 825.00
    9/10/10 Ontario Gill Pencil 7 1.29 9.03
    9/27/10 Alberta Sorvino Pen 76 1.99 151.24
    10/14/10 Alberta Thompson Binder 57 19.99 1,139.43
    10/31/10 Ontario Andrews Pencil 14 1.29 18.06
    11/17/10 Ontario Jardine Binder 11 4.99 54.89
    12/4/10 Ontario Jardine Binder 94 19.99 1,879.06
    12/21/10 Ontario Andrews Binder 28 4.99 139.72
  7. Recommended: Using CSS you can further stylize your table header using the standard or your own "up" and "down" graphics. This example CSS uses the UVM standard images as seen in the course directory tables:
     /* CSS style used to style the header in its unsorted state */
     th.header { 
         background: url('/www/images/templates/bg.gif') no-repeat center right;     
         cursor: pointer; 
     } 
     th.headerSortUp { 
         background-image: url('/www/images/templates/desc.gif');  
     } 
     th.headerSortDown { 
         background-image: url('/www/images/templates/asc.gif'); 
     } 
       
  8. Optional: you can also set the intial sort when you initialize the sorter, for example, this tells tablesorter to sort on the first and second column in ascending order:
     <script>
     $(document).ready(function() 
     	{ 
     		$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
     	} 
     );
     </script>
     	

See more options for the TableSorter.

Last modified January 29 2013 11:43 AM