Tables

Close this notice

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Beginner

We provide default tables styles including padding, horizontal dividers, and stripped rows. Historically you needed to add a class to opt-in to these styles, however, that led to many developers forgetting to style their tables. We realize that these styles may cause problems with other plugins or widgets that use tables for layout purposes. Just be aware that you may need to add additional CSS to adjust those.

Basic example

col1 heading col2 heading col3 heading
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3 
<table>
  ...
</table>

Color options

col1 heading col2 heading col3 heading
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3
col1 heading col2 heading col3 heading
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3
col1 heading col2 heading col3 heading
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3
col1 heading col2 heading col3 heading
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3
col1 heading col2 heading col3 heading
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3 
<table class="cool">
  ...
</table>
<table class="energetic">
  ...
</table>
<table class="soothing">
  ...
</table>
<table class="primary">
  ...
</table>
<table class="neutral">
  ...
</table>

Responsive tables

We've come up with a clever way to change the visual presentation of a table to look more like a description list for smaller devices. It uses the class .wdn_responsive_table on the table and data-header attributes on the cells.

Office Hours
Staff Member Mon Tue Wed Thu Fri Sat Sun
Bob 5:45 a.m. - 12:00 a.m. 5:45 a.m. - 12:00 a.m. 5:45 a.m. - 12:00 a.m. 5:45 a.m. - 12:00 a.m. 5:45 a.m. - 11:00 p.m. 9:00 a.m. - 11:00 p.m. 11:00 a.m. - 12:00 a.m.
Alice 2:00 p.m. - 10:00 p.m. 2:00 p.m. - 10:00 p.m. 2:00 p.m. - 10:00 p.m. 2:00 p.m. - 10:00 p.m. 2:00 p.m. - 8:00 p.m. 2:00 p.m. - 8:00 p.m. 2:00 p.m. - 8:00 p.m.
Steve 8:00 a.m. - 5:00 p.m. 8:00 a.m. - 5:00 p.m. 8:00 a.m. - 5:00 p.m. 8:00 a.m. - 5:00 p.m. 8:00 a.m. - 5:00 p.m. closed closed 
<table class="wdn_responsive_table">
    <caption>Office Hours</caption>
    <thead>
        <tr>
            <th id="staff_heading">Staff Member</th>
            <th id="day_monday"><abbr title="Monday">Mon</abbr></th>
            <th id="day_tuesday"><abbr title="Tuesday">Tue</abbr></th>
            <th id="day_wednesday"><abbr title="Wednesday">Wed</abbr></th>
            <th id="day_thursday"><abbr title="Thursday">Thu</abbr></th>
            <th id="day_friday"><abbr title="Friday">Fri</abbr></th>
            <th id="day_saturday"><abbr title="Saturday">Sat</abbr></th>
            <th id="day_sunday"><abbr title="Sunday">Sun</abbr></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th id="staff_bob">Bob</th>
            <td headers="staff_bob day_monday" data-header="Monday">5:45 a.m. - 12:00 a.m.</td>
            <td headers="staff_bob day_tuesday" data-header="Tuesday">5:45 a.m. - 12:00 a.m.</td>
            <td headers="staff_bob day_wednesday" data-header="Wednesday">5:45 a.m. - 12:00 a.m.</td>
            <td headers="staff_bob day_thursday" data-header="Thursday">5:45 a.m. - 12:00 a.m.</td>
            <td headers="staff_bob day_friday" data-header="Friday">5:45 a.m. - 11:00 p.m.</td>
            <td headers="staff_bob day_saturday" data-header="Saturday">9:00 a.m. - 11:00 p.m.</td>
            <td headers="staff_bob day_sunday" data-header="Sunday">11:00 a.m. - 12:00 a.m.</td>
        </tr>
        <tr>
            <th id="staff_alice">Alice</th>
            <td headers="staff_alice day_monday" data-header="Monday">2:00 p.m. - 10:00 p.m.</td>
            <td headers="staff_alice day_tuesday" data-header="Tuesday">2:00 p.m. - 10:00 p.m.</td>
            <td headers="staff_alice day_wednesday" data-header="Wednesday">2:00 p.m. - 10:00 p.m.</td>
            <td headers="staff_alice day_thursday" data-header="Thursday">2:00 p.m. - 10:00 p.m.</td>
            <td headers="staff_alice day_friday" data-header="Friday">2:00 p.m. - 8:00 p.m.</td>
            <td headers="staff_alice day_saturday" data-header="Saturday">2:00 p.m. - 8:00 p.m.</td>
            <td headers="staff_alice day_sunday" data-header="Sunday">2:00 p.m. - 8:00 p.m.</td>
        </tr>
        <tr>
            <th id="staff_steve">Steve</th>
            <td headers="staff_steve day_monday" data-header="Monday">8:00 a.m. - 5:00 p.m.</td>
            <td headers="staff_steve day_tuesday" data-header="Tuesday">8:00 a.m. - 5:00 p.m.</td>
            <td headers="staff_steve day_wednesday" data-header="Wednesday">8:00 a.m. - 5:00 p.m.</td>
            <td headers="staff_steve day_thursday" data-header="Thursday">8:00 a.m. - 5:00 p.m.</td>
            <td headers="staff_steve day_friday" data-header="Friday">8:00 a.m. - 5:00 p.m.</td>
            <td headers="staff_steve day_saturday" data-header="Saturday">closed</td>
            <td headers="staff_steve day_sunday" data-header="Sunday">closed</td>
        </tr>
    </tbody>
</table>

An alternative to this would be to create a scrolling wrapper that will add scroll bars to the table and maintain the tabular layout. Both alternatives are fully accessible.

col1 heading col2 heading col3 heading
row1 col1 content: This is some long text.. row1 col2 content: This is some long text.. row1 col3 content: This is some long text..
row2 col1 content: This is some long text.. row2 col2 content: This is some long text.. row2 col3 content: This is some long text.. 
<div style="overflow-x: auto">
    <table>
        ...
    </table>
</div>

Accessibility Considerations: 

  • Do not use tables for purely design purpose or to lay out sections of a web page. Assistive technology often treats tables differently than page content. Consider using the grid system instead.
  • Ensure that your headers are and cells are properly linked together. Header cells must be marked up as <th>s and data cells must be marked up as <td>s. For more information and examples, visit the W3 accessible tables tutorial.
Contributed By: 
IIM