Tables

Tables should be used for tabular data. For styling add the base class .table to any <table>. This will isolate our custom table styles. For ADA compliance tables are written using summary and caption.

Basic

Tables should be rendered with standard markup.

Basic Table
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly 
<table class="table" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Basic Table</caption>
    <thead>
        <tr>
            <th width="500">Expenses</th>
            <th width="100" class="text-right">Amount</th>
            <th width="400">Frequency</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
        <tr>
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
</table>

Accessibility

Tables have a lot of handy built-in features to make them more usable with screen readers. The key thing to remember is that vision-impaired users can't quickly scan a table like sighted users can. Typically, screen readers will read out the contents of a table one row at a time. Simpler tables with clear hierarchy and organization will be more easy to use for vision-impaired users.

Here are some things you can do to make your tables more accessible:

Define tables for data

Tables should almost always be used for actual data and not for creating page layouts. (You're using our awesome grid for layout anyway, right?) When a screen reader encounters a table, it runs a series of tests to determine if the table is a layout table or data table. The easiest way to define a table as being for data is by using <th> tags to define the headers of the table. Newer assistive software will also immediately interpret any table with the attribute role="grid" as being for data.

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here 
<table class="table" role="grid">
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

Add a summary

The contents of a table can be described using the <caption> tag. However, you can also add the summary attribute to a table to further clarify its use. The summary attribute is specifically designed to explain a table to a vision-impaired user. If a table has both a summary and a caption, the summary should not simply restate the caption.

The W3C offers this example for a table detailing a bus schedule:

Table with summary and caption
Table Header Table Header Table Header Table Header
4:00 4:05 4:11 4:19 
<table class="table" summary="Schedule for Route 7 going downtown. Service begins 
at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
Find the intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that intersection.">
<caption class="show-for-sr">Table with summary and caption</caption>
    <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>4:00</td>
            <td>4:05</td>
            <td>4:11</td>
            <td>4:19</td>
        </tr>
    </tbody>
</table>

Actionable

You may make an individual row appear actionable with the .actionable. When applied a row will highlight with an actionable color on hover.

Actionalbe Table Rows
Expenses Amount Frequency
Rent $1,480 Monthly
Resident Service Fee $51 Monthly
Cell Phone $90 Monthly 
<table class="table" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Actionalbe Table Rows</caption>
    <thead>
        <tr>
            <th width="500">Expenses</th>
            <th width="100" class="text-right">Amount</th>
            <th width="400">Frequency</th>
        </tr>
    </thead>
    <tbody>
        <tr class="actionable">
            <td>Rent</td>
            <td class="text-right">$1,480</td>
            <td>Monthly</td>
        </tr>
        <tr class="actionable">
            <td>Resident Service Fee</td>
            <td class="text-right">$51</td>
            <td>Monthly</td>
        </tr>
            <tr class="actionable">
            <td>Cell Phone</td>
            <td class="text-right">$90</td>
            <td>Monthly</td>
        </tr>
    </tbody>
</table>

Keyval Charts

A key-val chart is a semi-tabular structure intended to display a set of key-value pairs.

  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90 
<ul class="keyval-chart">
    <li class="chart-head">
        <span class="key">Expense</span>
        <span class="val">Amount</span>
    </li>
    <li>
        <span class="key">Rent</span>
        <span class="val">$14,800</span>
    </li>
    <li>
        <span class="key">Resident Service Fee</span>
        <span class="val">$51</val>
    </li>
    <li>
        <span class="key">Cell Phone</span>
        <span class="val">$90</val>
    </li>
</ul>

Actionable Key-val

  • Expense Amount
  • Rent $14,800
  • Resident Service Fee $51
  • Cell Phone $90 
<ul class="keyval-chart">
    <li class="chart-head">
        <span class="key">Expense</span>
        <span class="val">Amount</span>
    </li>
    <li class="actionable">
            <span class="key">Rent</span>
        <span class="val">$14,800</span>
    </li>
    <li class="actionable">
        <span class="key">Resident Service Fee</span>
        <span class="val">$51</val>
    </li>
    <li class="actionable">
        <span class="key">Cell Phone</span>
        <span class="val">$90</val>
    </li>
</ul>

Column Widths

By default, the .key and .val elements will render at a width of 50%. As certain contexts may require this width to be set explicitly, you may set the width of these columns using the data-keycolumns and data-valcolumns attributes.

  • Expense Amount
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat vestibulum ultrices. Quisque venenatis nulla at ipsum vestibulum bibendum. Nunc et sem vel neque molestie lobortis non eu ex. In hac habitasse platea dictumst. Nam quis dapibus urna, vel interdum mauris. $14,800
  • Resident Service Fee $51
  • Cell Phone $90 
<ul class="keyval-chart" data-keycolumns="10" data-valcolumns="2">
    <li class="chart-head">
        <span class="key">Expense</span>
        <span class="val text-right">Amount</span>
    </li>
    <li>
        <span class="key">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat vestibulum ultrices. Quisque venenatis nulla at ipsum vestibulum bibendum. Nunc et sem vel neque molestie lobortis non eu ex. In hac habitasse platea dictumst. Nam quis dapibus urna, vel interdum mauris. </span>
        <span class="val text-right">$14,800</span>
    </li>
    <li>
        <span class="key">Resident Service Fee</span>
        <span class="val text-right">$51</val>
    </li>
    <li>
        <span class="key">Cell Phone</span>
        <span class="val text-right">$90</val>
    </li>
</ul>

These values should be between 1 and the number of columns in your theme's grid. The example above contains values whose sum is 12, the number of columns in the grid by default.

Sortable Table

A sortable table is indicated by an arrow on the left of header column which is sortable. The sortable table header style includes the use of .sortable , .icon-arrow-down, .icon-arrow-up. (In this example javaScript is used to toggle the .sorted class and to sort the table. The UI Toolkit does not provide the javascript behind this action - only the style.)

Section table with groupings
Name Collection Document Type Upload Date
Mitchell's living will Estate Living Will Sep 10, 2015
Toyota Rav4 insurance statement Insurance Car Insurance Oct 20, 2015
478 Main St. Loan Financial Mortgage Nov 4, 2015
478 Main St. Loan Estate Power of Attorney Dec 5, 2015 
<table class="table sortable-table" summary="This summary is for screen readers and should summarize the structure of the table headers and rows">
<caption class="show-for-sr">Section table with groupings</caption>
    <thead>
        <tr>
            <th width="800" scope="col">Name</th>
            <th width="200" scope="col">Collection</th>
            <th width="300" class="sortable-table-header" scope="col"><a href="#">Document Type <span class="icon icon-arrow-down margin-left-small"></span></a></th>
            <th width="300" class="sortable-table-header sorted" scope="col"><a href="#">Upload Date <span class="icon icon-arrow-down margin-left-small"></span></a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mitchell's living will</td>
            <td>Estate</td>
            <td>Living Will</td>
            <td>Sep 10, 2015</td>
        </tr>
        <tr>
            <td>Toyota Rav4 insurance statement</td>
            <td>Insurance</td>
            <td>Car Insurance</td>
            <td>Oct 20, 2015</td>
        </tr>
        <tr>
            <td>478 Main St. Loan</td>
            <td>Financial</td>
            <td>Mortgage</td>
            <td>Nov 4, 2015</td>
        </tr>
        <tr>
        <td>478 Main St. Loan</td>
            <td>Estate</td>
            <td>Power of Attorney</td>
            <td>Dec 5, 2015</td>
        </tr>
    </tbody>
</table>

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.