Tables
Data tables display information in a way that's easy to scan.
Structure
A data table contains a header row at the top that lists column names, followed by rows for data.
For accessibility, the first column may be set as a <th> element, with a scope of "row." This enables screen readers to identify a cell's value by its row and column name.
Simple Table
Define a table with Unifi style by simply adding u-table to a <table> element. An optional row hover style is added via u-table--display-hover.
Demo table is displayed within Paper as an optional surface.
Dense, Numeric Data
Reduce table padding by including the u-table--dense class.
For numeric data, apply right-alignment by using u-table__cell--numeric on table cells directly, including the column header.