Tables
Tabular data forms a crucial part of business information presentation. Tables allow users to quickly comprehend and compare large data volumes.
| Library | Versatility | Simplicity | Recognizability | Score |
|---|---|---|---|---|
| Tailwind | V | X | X | 1 |
| Bootstrap | V | X | V | 2 |
| Rare Styles | V | V | V | 3 |
Tables default to min-width: 100%, occupying the full width of their parent element. When a table is wider than its column, wrap it in .table-scroll so it scrolls horizontally instead of breaking the layout grid — overflow-x has no effect on the table element itself.
For small tables and table-style data presentation, the .table-small selector is available with left-aligned content.
Always remember the primary purpose of tables: presenting data for quick analysis and comparison. Don't overload tables with unnecessary information or use them for content better presented as text or graphics.
To limit table width, use either parent elements or preset spacing selectors like .width-50, .mobile:width-75, etc., or create custom classes.
Preset Tables
For dashboards and other data-heavy pages, the library includes preset selectors. These allow you to quickly create readable tables with minimal code—like specialized table templates in your construction kit.
| Selector | Purpose |
|---|---|
.table-striped |
Alternating row backgrounds (zebra) |
.table-terminal |
Monospace metrics readout, centered values, last column right-aligned |
.table-comparison |
Centers value columns for scanning across options; row label stays left |
.table-numeric |
Tabular figures, value columns right-aligned for comparing numbers down a column |
.table-horizontal-borders |
Quiet rules between rows, no outer frame |
.table-small |
Compact, fit-content, left-aligned |
.table-bordered |
Full grid with outer frame and header band |
.table-scroll |
Wrapper (not a table class) — lets a wide table scroll horizontally |
.table-terminal example:
| Visitors: | 1,234 |
| Clicks: | 345 |
| Leads: | 123 |
| Sales: | 12 |
| Revenue: | $1,234 |
| Conversion: | 1% |
Comparison tables
.table-comparison left-aligns the first column (the row label) and centers every value column under its header, so the reader scans straight down each option. Use it for feature or option comparisons in normal body type — reach for .table-terminal instead when the values are numeric and benefit from a monospace, right-aligned readout.
| Library | Versatility | Simplicity | Recognizability |
|---|---|---|---|
| Tailwind | Yes | No | No |
| Bootstrap | Yes | No | Yes |
| Rare Styles | Yes | Yes | Yes |
The example above also carries .table-horizontal-borders: a lighter alternative to .table-bordered that draws a quiet rule between rows without the outer frame or vertical lines. The two border presets are mutually exclusive — pick the frame weight the data needs.
Numeric tables
.table-numeric is the preset for decision-grade figures: it switches the table to tabular figures (every digit the same width, so numbers line up vertically) and right-aligns the value columns while the row label stays left. Use it for financial tables, KPI readouts, and any data where the reader compares numbers down a column. It keeps the normal text font — reach for .table-terminal when you want a monospace readout.
| Channel | Sessions | Conversion | Revenue |
|---|---|---|---|
| Organic search | 48,120 | 3.4% | $182,400 |
| Paid social | 9,265 | 1.1% | $24,900 |
| Direct | 121,008 | 5.0% | $540,150 |
Table or .dl-grid? Two columns of key: value metadata — version, status, owner — read better as a .dl-grid definition list. Reach for a table once there are three or more columns, or when rows are meant to be compared against each other rather than read as individual facts.