Tables

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to organize data into rows and columns in order to create data cells.

Design and coding

Basic use

Default

Use for basic styling (only horizontal dividers and light padding). Add the base .table CSS to any <table>. Given the widespread use of tables for other plugins like calendars and date pickers, this page lists some isolated custom table styles.

Appearance
Heading above table
Table example with heading
Header Header
Data Data Data Data
Data Data Data Data
Empty cells in table
Table example with invisible data cells
Header Header
- Data Data
Data Data -
Table caption
Header Header Header
Data Data Data Data Data Data
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, &nbsp; 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>

Enhanced use

Adjust column and table widths

Use grid CSS to adjust the width of the columns.

Appearance
Table example with adjusted columns and width
Header Header
Data data data Data data
Data Data Data Data
Data Data Data Data
Data Data Data Data
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>

Striped rows (zebra stripe)

Use to add zebra-striping to any table row.

Appearance
Table example with zebra stripes
Header Header
Data Data Data Data
Data Data Data Data
Data Data Data Data
Data Data Data Data
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>

Hover rows

Use to add a zebra-striped hover effect to any table row within the <tbody>.

Appearance
Table example with hover rows
Header Header
Data Data Data Data
Data Data Data Data
Data Data Data Data
Data Data Data Data
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>

Bordered rows

Use to add borders to the table.

Appearance
Table example with bordered rows
Header Header
Data Data Data Data
Data Data Data Data
Data Data Data Data
Data Data Data Data
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>

↧ ↥ Condensed rows

Use to reduce the padding within the table.

Appearance
Table example with condensed rows
Header Header
Data Data Data Data
Data Data Data Data
Data Data Data Data
Data Data Data Data
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>

Responsive tables

Create responsive tables to make a table scroll horizontally for small devices (under 768px). On anything larger than 768px wide, there is no visual difference in these tables.

Appearance
Table example with responsive design
Header Header Header Header Header Header Header
Data Data Data Data Data Data Data Data Data Data Data Data Data Data
Data Data Data Data Data Data Data Data Data Data Data Data Data Data
Data Data Data Data Data Data Data Data Data Data Data Data Data Data
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>

Coloured rows and cells

Use contextual classes to color table rows or individual cells.

Appearance
Table example with colour
Header Header
Data Data Data Data
Data Data Data
Data Data Data Data
Data Data Data
Data Data Data Data
Data Data Data
Data Data Data Data
Data Data Data
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>

Add-on features

Additional add-on features and behaviours are available.

Supporting principles

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: