Tables

Ask a question Design guidelines

Summary

Tables are used to make large volumes of data easy to understand and to access.

Status

API status: general
Included in AUI core? Yes. You do not need to explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:table
AMD Module key: N/A
Experimental API: 2.2
General API: 3

Examples

The core AUI Tables API is markup-only. All it requires is some HTML on the page, the CSS will automatically be applied. There is no JavaScript to configure or set up (note extensions such as Sortable Tables do require JavaScript).

The following example shows the markup pattern required for AUI Tables.

You can use aui-table-list CSS class. When present, this CSS class will:

  • remove border lines between table rows.
  • add a :hover and :focus-within style to a row.

To make row "subtle" add aui-row-subtle CSS class to any row.

Table element usage:

Element Optional Description
table class="aui" Root element.
table class="aui aui-table-list" Optional Add aui-table-list CSS class for table-based lists.
thead Used to group table heading elements. All cells inside THEAD should be TH, not TD.
th Used for all table heading cells, either in THEAD for a top row, or as the first cell in a table with headings in the first column.
tfoot Optional Used to group table footer elements.
tbody Used to group together table content elements. Your table can include more than one TBODY, the start of each new TBODY will be emphasized with a slightly thicker border.
tr Used in THEAD, TFOOT and TBODY to section table elements into rows.
tr class="aui-row-subtle" Optional Add aui-row-subtle CSS class for subtle row. Valid only if you add aui-table-list CSS class for table
td Used in TBODY and TFOOT to display table contents.
ul class="menu" Optional Used in table content elements to automatically remove bullets and float list items neatly to the left.