Table
A table displays information in a grid of rows and columns providing a method of organizing information in way that facilitates comparisons to discover patterns and insights.
Usage
Use the table styles wherever you need to present static data in a tabular format. For advanced features like sorting, filtering, pagination etc. see Datagrid.
Code & Examples
Basic Tables
Tables take up the full width of their container. Values in table cells are center-aligned by default.
Decimal | Hexadecimal | Binary | Roman Numeral |
---|---|---|---|
1 | 1 | 1 | I |
5 | 5 | 101 | V |
10 | A | 1010 | X |
15 | F | 1111 | XV |
Left-Aligned Table Cells
Values within cells can be left-aligned by adding the .left
classname to the table cell.
Left Test
Wizard | Allegiance | Triwizard Champion? | Can Cast Fireball |
---|---|---|---|
Harry | Gryffindor | Yes | No |
Gandalf | Hobbits | Maybe? | I don't think so... |
Obi-Wan Kenobi | Republic/Rebellion | No | No |
Merlin | King Arthur | Probably invented the tournament | Solid maybe |
Multiline Table Cells
Table cells automatically wrap text.
Name | A/B | Comment |
---|---|---|
Beetlejuice | B | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Mytzlplk | A | Excepteur sint occaecat cupidatat non proident. |
Q | A | Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. |
Non-Bordered Tables
Tables can be displayed without borders by using the .table-noborder
classname.
Monster | Home | Likes Cookies | Fun to Play With |
---|---|---|---|
Wolfman | Nondisclosed countryside | Sometimes | Not really |
Mothra | Tropical island | No | Only if you have a flashlight |
Oscar the Grouch | Sesame Street | No | No |
Cookie Monster | Sesame Street | Definitely yes | Only if you have no cookies |
Compact Tables
Table row heights can be reduced with the .table-compact
classname.
Monster | Home | Likes Cookies | Fun to Play With |
---|---|---|---|
Wolfman | Nondisclosed countryside | Sometimes | Not really |
Mothra | Tropical island | No | Only if you have a flashlight |
Oscar the Grouch | Sesame Street | No | No |
Cookie Monster | Sesame Street | Definitely yes | Only if you have no cookies |
Vertical Tables
Using the .table-vertical
classname orients the table vertically. The left-most column serves as the table header. The left-most cell can be either a td
or th
element.
Cells in a vertical table default to left alignment. We have no use cases for center alignment at this time.
Basic table | .table | The classname used to apply general styling of Clarity tables to an HTML table. |
---|---|---|
Left-aligned table cells | .left | Use this classname on a `td` to align its contents to the left edge of the table data cell. This is not necessary for vertical tables. |
Tables without borders | .table-noborder | This classname will remove borders between table rows as well as the border around the edge of the table. Also removes the background so that the table will be transparent over the background its container has. |
Compact tables | .table-compact | This classname changes is the height of the table rows from 36px to 24px. |
Vertical tables | .table-vertical | This classname removes the table header and applies table header styles to the left-most column. |