Tables

This component can be used to apply basic styles to tabular data.

Tables should contain a thead and tbody at a minimum, and heading labels should make use of the scope attribute to denote where they apply.

Content within tables can also be centered by applying the center class to the entire table.

Default table

By default, tables that have no class applied to them and will appear like this.

Example:
Heading 1 Heading 2 Heading 3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Styled table

Add the class zebra to style the table.

Example:
Heading 1 Heading 2 Heading 3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Highlighted table

Rows or cells can be highlighted by applying the highlight class appropriately.

Example:
Heading 1 Heading 2 Heading 3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Wide table

Add the class wide if you have many columns which are squished together in the normal container.

Example:
Heading 1 Heading 2 Heading 3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Responsive table

Wrap the table with <div class="mobile-wrap"></div> so it becomes scrollable horizontally on mobile devices rather than squished to fit on the screen.

View the example below on a mobile device or emulated mode in devtools.

Example:
Heading 1 Heading 2 Heading 3 Heading 4
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Sortable table

Add the attribute data-sortable to the table, as in the example above and this will allow you to sort the table data by column. Please note, this will only work on a simple table with one tbody and 1:1 headings to columns.

Columns are ordered by a natural sort algorithm, so currency and patterned data (eg. unit codes) will sort as expected. This can be overridden by adding an attribute data-sort-as="text" to the column heading th, to use the older alphabetic sort instead (illustrated with the "Text" column above).

The table will now display unsorted until a column is chosen. If you want the table to run a sort at page load, you can add data-sort-initial to a column heading th.

There may be a circumstance where you don't want the make a column sortable, you can prevent it from acquiring sortable links by adding the attribute data-sort-skip to the column heading th ("Offer made" in the example above).

Example:
Preference Text Offer made Unit Code Retail Price
1 50 Yes ARTS_11 $29.99
2 300 No ARTS_3 $9.99
4 7 Yes ARTS_100 $39.99
3 6 Yes ARTS_2 $109.99

Complex tables

Example:
Day/Date Activity
January
Monday 6 January to Sunday 2 March Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod in minima excepturi sit similique animi non ducimus, ab quaerat numquam?
Wednesday 22 January Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod in minima excepturi sit similique animi non ducimus, ab quaerat numquam?
February
Wednesday 12 February to Friday 14 February Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod in minima excepturi sit similique animi non ducimus, ab quaerat numquam?
Thursday 20 February Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod in minima excepturi sit similique animi non ducimus, ab quaerat numquam?

Another complex table

Example:
Type of Accommodation No. of Weeks Weekly Rent / Board Range ($) Estimated Total ($) Rent or Board and other expenses
Sharing Rented Premises (with 2 others) Close to Parkville campus 52 190 - 230 22,000 - 28,800
Within 6 kilometres of Uni 252 155 -185 20,000 - 26,300
Rural area 52 80 - 100 15,600 - 20,700
Student Apartments Two bedroom, shared 52 215 - 260 23,400 - 30,500
One bedroom not shared 52 305 - 370 28,500 - 36,700
Hostel One bedroom - shared bathroom/kitchen 52 185 - 225 22,100 - 28,200