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
Header | Header |
---|---|
Data Data | Data Data |
Data Data | Data Data |
Empty cells in table
Header | Header |
---|---|
- | Data Data |
Data Data | - |
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"
orscope="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
- Use a
- 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>
Enhanced use
Adjust column and table widths
Use grid CSS to adjust the width of the columns.
Appearance
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
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
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
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
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
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
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: