Tables
Components
Basic Table
| Header | Header | Header |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
Usage Guidelines
Alignment
Choose alignments that allow users to easily compare from row to row.
- Left Aligned Items: Text, Names, Dates & Times, Icon
- Center Aligned Items: Icons, Buttons
- Right Aligned Items: Numbers
| Start | Center | End |
|---|---|---|
| Start | Center | End |
| Start | Center | End |
| Start | Center | End |
Sorting
TBD
Guidelines for Displaying Different Data
In the Writing Guidelines section you'll find standards for displaying dates, times, and student names.
Table Options
Table context and content may necessitate table design variations:
- compact: reduces the row padding from 10px to 5px
- zebra: adds alternating gray striping to table rows
- ruled: adds gray lines between rows
- sortable: allows column sorting by clicking on the column heading
- sectioned: table heads get a darker style which can act as a divider
- border: a complete border is added to all cells
- row-hover: highlights the row the cursor over
- cell-hover: highlights the cell the cursor is over
- multi head: TBD
- fixed scrolling: TBD
- data+icon/button: TBD