Tables

Correct use

Compliance point(s):

• Use tables to display tabular data such as financial, statistical, comparative, or numerical information
• Use .table to style a basic table
• Use consistent heading text in related tables
  • For example, use "Name" as a header for all contact listings, not a variety of titles such as "Contacts", "Names" or "User"
• Insert a dash (-) in empty data cells
  • The dash (-) allows the screen reader to correctly read the content as "empty", and properly displays when magnified
• Include the appropriate scope="col" or scope="row within the <th> tag
• Place a descriptive <h*> title tag directly above a table when it does not contain a <caption> tag
• Include a visible table caption when the <h*> title is not directly above the table, or if multiple tables appear under an <h*> tag
  • Use a <caption> tag on all tables to ensure they  validate, and are accessible and descriptive (especially on statistics or financial pages that contain multiple tables)
  • Use .wb-inv (as needed) to make the table caption invisible, yet ensure accessibility
• Understand and implement the related supporting principles

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)
• Do not use tables for layout purposes
• Do not use title="" within the <table> tag
• Do not use N/A,   or have blank cells within a table
  • This is to avoid screen reader issues
• Avoid merged cells, as they are complex to code and pose accessibility issues

Code

// Heading above table:
<h*>...</h*>
<table class="table">
<caption class="wb-inv">Caption text</caption>
  <thead>
   <tr>
     <th scope="col">...</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>...</td>
   <tr>
  </tbody>
</table>

// Empty cells in table:
<table class="table">
<caption class="wb-inv">Caption text</caption>
<thead>
    <tr>
     <th scope="col">...</th>
     <th scope="col">...</th>
    </tr>
  </thead>
  <tbody>
   <tr>
    <td>-</td>
    <td>-</td>
   <tr>
  </tbody>
</table>

// Table caption:
<table class="table">
  <caption>Caption text</caption>
    <thead>...</thead>
    <tbody>...</tbody>
</table>

Correct use

Compliance point(s):

• Ensure the width of the <table> as a whole, as well as each <th> column both suit the content
  • Tables with too much (over-separation) or too little (over-crowding) white space are difficult to read
• Insert the <table> within an appropriate container to limit the overall table size

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)
• Do not make all tables on a page the same width simply for design purposes

Code

// table with limited column and overall width
<div class="col-md-3">
 <table class="table">
 <caption class="wb-inv">Caption text</caption>
   <thead>
     <tr>
      <th scope="col" class="col-sm-8">...</th>
      <th scope="col" class="col-sm-4">...</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>...</td>
     <td>...</td>
    </tr>
   </tbody>
 </table>
</div>

Correct use

Compliance point(s):

• Use .table-striped within the <tbody> to help distinguish rows from each other
• Use mainly on long, complex tables

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<table class="table table-striped">
<caption class="wb-inv">Caption text</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Correct use

Compliance point(s):

• Use .table-hover to allow the user to highlight each row when they mouse over it

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<table class="table table-hover">
<caption class="wb-inv">Caption text</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Correct use

Compliance point(s):

• Use .table-bordered to separate information when the table cells have a lot of data in them, and word wrap
  • This makes it easy for the user to tell what information belongs to which cell

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<table class="table table-bordered">
<caption class="wb-inv">Caption text</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Correct use

Compliance point(s):

• Use .table-condensed to narrow the row height

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<table class="table table-condensed">
<caption class="wb-inv">Caption text</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Correct use

Compliance point(s):

• Wrap .table within .table-responsive when the table is wide, and needs to horizontally scroll on mobile devices
• Split large tables into smaller ones to improve the usability of the content

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<div class="table-responsive">
<table class="table">
 <caption class="wb-inv">Caption text</caption>
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

Correct use

Compliance point(s):

• .active: Applies the hover color to a particular row or cell
• .success: Indicates a successful or positive action
• .warning: Indicates a warning that might need attention
• .danger: Indicates a dangerous or potentially negative action

Incorrect use

Compliance point(s):

• Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

//On rows:
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>

//On data or header cells ('td' or 'th'):
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
</tr>