Tables

Add tabular data with these examples.

Usage

Accessible Tables

Proper table coding is required so screen readers can make associations for the visually impaired.

  • The Table Caption Element

    Include the title of the table using the <caption> element. The caption element always follows the opening table element.

  • The Table Head Element

    Wrap the first row if containing table header cells with the <thead> element. If table header cells are not appearing correctly, this element may have been left out.

  • The Table Body Element:

    Always wrap the set of rows that comprise the body of the table with the <tbody> element.

  • The Table Footer element

    Wrap the last row if containing footer information (i.e. numerical totals) with the <tfoot> element.

  • The Scope Attribute

    Always include the scope attribute on table header cells so screen readers know what data cells the header cell is referring to. For example, a column header cell would be <th scope="col"> and a row header cell would be <th scope="row">.

  • The Column Span and Row Span Attributes

    When using colspan and rowspan attributes, always use table header cell (<th>), and not table data cell (<td>). Also include the scope attribute. A row header cell with a colspan attribute would be <th colspan="4" scope="col"> and a column header cell with a rowspan attribute would be <th rowspan="4" scope="row">.

Responsive Tables

Always wrap tables in a <div class="table-responsive">…</div> to make it responsive.

Table Style Options

Basic Table  Code

Table Caption
Column 1 Column 2 Column 3
Row A Cell 1A Cell 2A Cell 3A
Row B Cell 1B Cell 2B Cell 3B
Row C Cell 1C Cell 2C Cell 3C
Row D Cell 1D Cell 2D Cell 3D
Totals Column 1 Total Column 2 Total Column 3 Total

Table with Striped Rows  Code

Table Caption
Column 1 Column 2 Column 3
Row A Cell 1A Cell 2A Cell 3A
Row B Cell 1B Cell 2B Cell 3B
Row C Cell 1C Cell 2C Cell 3C
Row D Cell 1D Cell 2D Cell 3D
Totals Column 1 Total Column 2 Total Column 3 Total

Table with Borders and Striped Rows  Code

Table Caption
Column 1 Column 2 Column 3
Row A Cell 1A Cell 2A Cell 3A
Row B Cell 1B Cell 2B Cell 3B
Row C Cell 1C Cell 2C Cell 3C
Row D Cell 1D Cell 2D Cell 3D
Totals Column 1 Total Column 2 Total Column 3 Total

Table with Borders and Striped Rows with Highlight on Hover  Code

Table Caption
Column 1 Column 2 Column 3
Row A Cell 1A Cell 2A Cell 3A
Row B Cell 1B Cell 2B Cell 3B
Row C Cell 1C Cell 2C Cell 3C
Row D Cell 1D Cell 2D Cell 3D
Totals Column 1 Total Column 2 Total Column 3 Total

Table with Borders and Colspans  Code

Table Caption
Heading 1 Heading 2 Heading 3 Heading 4
Group 1
Cell 1A Cell 2A Cell 3A Cell 4A
Cell 1B Cell 2B Cell 3B Cell 4B
Group 2
Cell 1C Cell 2C Cell 3C Cell 4C
Cell 1D Cell 2D Cell 3D Cell 4D

Sortable Tables  Code

To make table header columns sortable, place <script type="text/javascript" src="/sites/all/libraries/sorttable/sorttable.js"></script> in the head code and add the .sortable class to the table element.

Table Caption
Column 1 Column 2 Column 3
Row A Cell 1A Cell 2A Cell 3A
Row B Cell 1B Cell 2B Cell 3B
Row C Cell 1C Cell 2C Cell 3C
Row D Cell 1D Cell 2D Cell 3D
Totals Column 1 Total Column 2 Total Column 3 Total