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.

Basic Tables

Tables take up the full width of their container. Values in table cells are center-aligned by default.

Left-Aligned Table Cells

Values within cells can be left-aligned by adding the .left classname to the table cell.

Multiline Table Cells

Table cells automatically wrap text.

Non-Bordered Tables

Tables can be displayed without borders by using the .table-noborder classname.

Compact Tables

Table row heights can be reduced with the .table-compact classname.

Compact, Non-Bordered Tables

The .table-compact and .table-noborder classnames can be combined.

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.

Vertical, Compact, Non-bordered Tables

Table Container Widths

Tables can exist inside grid columns.