Skip to main content
Glendon Campus Alumni Research Giving to York Media Careers International York U Lions Accessibility
Future Students Current Students Faculty and Staff
Faculties Libraries York U Organization Directory Site Index Campus Maps
Web > How to Make Nice Tables

How to Make Nice Tables

Thanks to a very useful little Javascript tool called jQuery, it’s now possible to make tables look a lot prettier on our web site. There are two things you can do: make a striped table, or make a sortable table (which will also be striped).

If you have any questions about this, need a bit of help, or run into any problems, please email libweb@yorku.ca.

How to Make a Striped Table

This is a striped table. It is easy to read. Wouldn’t it be nice if there was a way to automatically do this, and have it so that if you add a few more rows, they automatically get coloured properly too?

City Features of interest
Toronto CN Tower, Thomas Fisher Rare Book Library, Bloor Street Viaduct, people who say “sorry” when you step on their toes
London Buckingham Palace, St. Paul’s Cathedral, pubs, black taxis, tea at Claridge’s
New York Statue of Liberty, Central Park, MOMA
Mordor City Orcs, evil, sulphurous volcanic pits, an enormous burning eye in the sky

There is! All you need to do is say: <table class="striped">

There is no nice way in the graphical HTML editor to set this, so you will have to go into the “edit HTML code” mode and edit it by hand. When you insert the table, make sure you set the border to 0.

When you edit the HTML, you’ll see something like this:

<table style="width: 100%; border: 1px dotted rgb(0, 0, 0); border-collapse: collapse;" align="" cellpadding="5">.

Change that to this:

<table class="striped">

Next you will to find all of the places where it says

<td style="border: 1px dotted rgb(0, 0, 0);">

and change them all to just

<td>.

You won’t see the differences in the CMS while you’re editing the page, but save it and preview or publish and then you will.

That’s all a bit of pain, but that’s how things are, given the way the CMS and its HTML editor work.

Example from our web site: Ask a Librarian: Email and Telephone Reference.

Source of the table above

<table class="striped">
  <thead>
  <tr>
    <th> City</th>
    <th> Features of interest</th>
  </tr> </thead>
  <tbody>
  <tr>
    <td>Toronto </td>
    <td> CN Tower, Thomas Fisher Rare Book Library, Bloor Street Viaduct, people who say "sorry" when you step on their toes </td>
  </tr>
  <tr>
    <td> London </td>
    <td> Buckingham Palace, St. Paul's Cathedral, pubs, black taxis, tea at Claridge's </td>
  </tr>
  <tr>
    <td>New York </td>
    <td> Statue of Liberty, Central Park, MOMA, </td>
  </tr>
  <tr>
    <td> Mordor City</td>
    <td> Orcs, evil, sulphurous volcanic pits, an enormous burning eye in the sky </td>
  </tr>
  </tbody>
</table>

How to Make a Sortable Table

This is basically the same as the above, except that you will say <table class="tablesorter">. It’s done with Tablesorter, and full documentation is available on its web site.

Also, it is important to have a thead section for the table headers. Without that line, the Javascript that does the sorting won’t know what to sort on.

Here is a sortable table:

Category Contact Office Telephone Email
Biology Angela Hamilton 102K Steacie 33927 adh@yorku.ca
Chemistry Leila Fernandez 102J Steacie 40075 leilaf@yorku.ca
Classics Scott McLaren 504 Scott 88892 scottm@yorku.ca
Communications Studies Maura Matesic 504 Scott 66947 mmatesic@yorku.ca
Data (numeric) Walter Giesbrecht 205E Scott 77551 walterg@yorku.ca
Design Adam Lauder 105E Scott 55974 alauder@yorku.ca
Economics Elizabeth Watson S237C SSB 66944 watson@yorku.ca
Engineering John Dupuis 102H Steacie 33945 jdupuis@yorku.ca
English Scott McLaren 504 Scott 88892 scottm@yorku.ca
Environmental Studies Trudy Bodak Map Library 88863 bodak@yorku.ca
Theatre Adam Lauder 105E Scott 55974 alauder@yorku.ca
Women’s Studies Kalina Grewal 205D Scott 88894 kgrewal@yorku.ca

Example from our web site: List of subject librarians.

Source of the table above

By default, all columns are sortable. To make one unsortable, add a sorter: false directive, as below.

<table class="tablesorter">
  <thead>
  <tr>
    <th>Category</th>
    <th>Contact</th>
    <th class="{sorter: false}">Office</th>
    <th class="{sorter: false}">Telephone</th>
    <th class="{sorter: false}">Email</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Biology </td>
    <td>Angela Hamilton</td>
    <td>102K Steacie</td>
    <td>33927</td>
    <td> <a href="mailto:adh@yorku.ca">adh@yorku.ca</a> </td>
  </tr>

(The rest of the lines are the same as this one, except for the contact details, so they’re not shown here.)

Comments are closed.