Skip to main content Skip to navigation Skip to search

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.

Demo for a basic Clarity table.
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

Demo with the first column left aligned in a Clarity table.
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.

Demo cells with multiple lines of text in a Clarity table.
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.

Demo for a borderless Clarity table.
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.

Demo for a compact Clarity table.
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.

Demo showing a vertical Clarity table.
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.