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:ajs
AMD Module key:
N/A
Experimental since:
2.2
Examples
#
First name
Last name
Username
1
Matt
Bond
mbond
2
Ross
Chaldecott
rchaldecott
3
Henry
Tapia
htapia
Code
HTML
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.
Correct table element usage:
table: class="aui". Root element.
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.
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.