Tables

Tables are a great way to show data on your site. When properly set up they help users understand and compare relevant data much more quickly.

Logical columns and grouping data will dramatically improve your tables. There are many existing styles, formats and functionality to make your tables even better for your users.

Table example

Faculty Department
Social Sciences Anthropology
Social Sciences Geography
Humanities English
Humanities History

Table example with zebra class

Faculty Department
Social Sciences Anthropology
Social Sciences Geography
Humanities English
Humanities History

When to use tables

Data that might make sense in tables:

  • Research data
  • Contact listings
  • Scheduling information

Guidelines for using tables

  • Use a properly formatted table header with logical column names for each table.
  • Horizontal space is limited. Grouping similar data together saves space and increases readability by reducing wide rows. For example, instead of columns for phone number, email and office, group them into a single colum called contact.
  • Content in table cells should be under 400 characters as too much content can reduce the readability of the whole table.
  • If you have more rows in your table than will fit in the height of an average screen, consider separating into multiple logically grouped tables. That way the context provided by the table headers is not lost.

How-to

Remember: Tables are for displaying data. They used never be used for layout. If you want to align text or photos, use a column box.

(These tutorials are on the University Systems website.)

To add a proper header to your table you'll need to edit the html of your table. Below is an example of a table with a header and zebra class.

Table example with zebra class

<table class="zebra">
<thead>
<tr><th>Faculty</th><th>Department</th></tr>
</thead>
<tbody>
<tr>
<td>Social Sciences</td>
<td>Anthropology</td>
</tr>
<tr>
<td>Social Sciences</td>
<td>Geography</td>
</tr>
<tr>
<td>Humanities</td>
<td>English</td>
</tr>
<tr>
<td>Humanities</td>
<td>History</td>
</tr>
</tbody>
</table>