SSU Website Table Styles

Tables should only be used for presenting tabular data. "Layout" tables are not consistent with SSU's web design.


Data Table Structural Elements

Data Tables should use the following structure to ensure accessibility to people using assistive technology.

<table>
The table tag is required for all tables.
summary
This attribute is used in the <table> tag and describes how the table is arranged. Summaries are usually not displayed in the page, but are available to users of assistive technology.
<caption>
The caption tag is used to add text that labels the table. This is like adding a title to the table. It usually appears at the top of the table, above any table headings.
<thead>
Table Head. This contains the first row of the table, which itself contains the <th>
<th>
Table heading. This is used to designate table cells that are column headings or row headings.
scope="col"  or  scope="row"
The scope attribute with the appropriate value must be used in each <th>. If the heading is at the top of a column, use scope="col" If the heading is at the beginning of a row, use scope="row"
<tbody>
Table body. This contains the table rows that contain the table content.
<td>
Table data. This is a cell in the table and contains an item of the data being presented.
 

See Web Usability's Accessible Data Tables for more information and examples of accessible tables.

Default SSU Style for Tables

Here's the Caption
Left heading Middle heading Right heading
some content goes here some content goes here some content goes here
some content goes here some content goes here some content goes here
some content goes here some content goes here some content goes here
<table summary="Sample Table, with columns for left, Middle, and Right columns.">
<caption>Here's the Caption</caption>
<thead>
<tr>
<th scope="col">Left heading</th> <th scope="col">Middle heading</th> <th scope="col">Right heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>some content goes here</td>
<td>some content goes here</td>
<td>some content goes here</td>
</tr>
<tr>
<td>some content goes here</td>
<td>some content goes here</td>
<td>some content goes here</td>
</tr>
<tr>
<td>some content goes here</td>
<td>some content goes here</td>
<td>some content goes here</td>
</tr>
</tbody>
</table>

Some tables might make more sense arranged to use table headings for each row. These tables don't require the <thead> and <tbody> tags.

Here's the caption
Top heading some content goes here some content goes here
Middle heading some content goes here some content goes here
Bottom heading some content goes here some content goes here

 

<table summary="Sample table, with rows for top, middle and bottom.">
<caption>Here's the caption</caption>
<tr>
<th scope="row">Top heading</th>
<td>some content goes here</td> <td>some content goes here</td>
</tr>
<tr> <th scope="row">Middle heading</th>
<td>some content goes here</td> <td>some content goes here</td>
</tr>
<tr>
<th scope="row">Bottom heading</th>
<td>some content goes here</td> <td>some content goes here</td>
</tr>
</table>

If you need to make a table more complex than the sample tables above, with multiple levels of headings, you should consider simplifying your table structure. Usually this can be accomplished by splitting the data into smaller, simpler tables. Complex data tables have special requirements for accessibility, and are more difficult to code and style properly. If you have needs for a complex table, contact the IT Web Office to discuss the project.

 

Table Stripes

Adding a background color to alternating rows of your table can make large tables more user-friendly. The SSU styles offer two methods for striping table rows.

Manual Stripes

Add class="odd" to alternating rows of your table. This works best when your table has the headings on the top row.

<tr class="odd">

Department Staff
Heading Heading Heading
this row uses <tr> some content goes here some content goes here
this row uses <tr class="odd"> some content goes here some content goes here
this row uses <tr> some content goes here some content goes here
this row uses <tr class="odd"> some content goes here some content goes here

 

The downside of this approach is the work needed to maintain a table that changes often. If you need to insert or remove rows from the table frequently, the automatic striping method may be a better choice.

Automatic Stripes and Active Row Highlighting

By adding some javascript to your page, striped background colors can be added automatically to your page when viewed in a browser. This striping adjusts automatically if you add, delete or insert rows in your table. This option is very good for long tables, such as those found on SSU's A-Z Index.

This approach also highlights an entire row when the user hovers on a table cell. Roll your mouse across the table below to see the effect.

While the stripes are not accessible to users of some assistive technology, this method still meets accessibiity requirements because javascript is unobtrusive, and is not required for users to access the table.

To use this method:

  1. Add these lines of code to the Head of your HTML - this links to the javascript files you'll need.
    <script src="/js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/js/jquery-tablestripes.js" type="text/javascript"></script>
  2. Add the stripeMe class to your table tag.
    <table class="stripeMe" summary="summary goes here">

 

Sample stripeMe Table

Department Staff
Name Position Phone Number Website
Becky Lucy Jones Department Chair 664-1234 Becky's hompeage
Jon Doe Jr. Professor 664-0987 Jon's course site
Bob John Smith Administrative Assistant 664-2468 Bob's page

 

Data Table Code Sample


<table class="stripeMe" 
		summary="Department contacts, with columns for Name, Position, Phone Number and Website Links">
      <caption>Department Staff</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Position</th>
<th scope="col">Phone Number</th>
<th scope="col">Website</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="">Becky Lucy Jones</a></td>
<td>Department Chair</td>
<td>664-1234</td>
<td><a href="">Becky's hompeage</a></td>
</tr>
<tr>
<td><a href="">Jon Doe Jr.</a></td>
<td>Professor</td>
<td>664-0987</td>
<td><a href="">Jon's course site</a></td>
</tr>
<tr>
<td><a href="">Bob John Smith</a></td>
<td>Administrative Assistant</td>
<td>664-2468</td>
<td><a href="">Bob's page</a></td>
</tr>
</tbody>
</table>

Table Widths

By default, the table will span 100% of the content area. If your table doesn't include a lot of content, then you can specify a narrower width, to span 25%, 33%, 50%, 66%, or 75% of the content area.

To the right is a table of different widths that you can asign to your table depending on your needs.

Note: These widths can also be applied to other block-level elements. Give them a try. Make sure to test in browsers, though. They may not work for all HTML elements. Apply them to a <th> in the top row of your table to control column widths.

Table Width Corresponding Class
25% <table class="width-25">
33% <table class="width-33">
50% <table class="width-50">
66% <table class="width-66">
75% <table class="width-75">