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.
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 alternate the background colour of the rows.
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.
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. |
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.
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).
Heading 1 | Heading 2 | Heading 3 |
---|---|---|
50 | Yes | ARTS_11 |
300 | No | ARTS_3 |
7 | Yes | ARTS_100 |
Complex tables
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
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 |