Table
Rows of data on a newsprint panel. Caps headers sit on the thick rule, rows on thin rules, and every column lines up on the left.
Rental payouts
| Month | Property | Nights | Payout | Status |
|---|
| July | 308 Main St | 21 | $4,860.00 | Not recorded |
| August | 308 Main St | 26 | $6,115.50 | Late |
| September | 308 Main St | 18 | $3,972.25 | Pending |
| September | 12 Oak Ave · long stay | 30 | $2,100.00 | Paid |
| Total | | 95 | $17,047.75 | |
Parts
| Part | Markup | Look |
|---|
| Panel | .sys-table around the <table> | Newsprint, 24–28px padding (16px on phones), no border |
| Title | .sys-block-title inside the panel (optional) | Sentence case over the thick rule |
| Header | <thead><th> | 13px caps label on the thick rule |
| Row | <tbody><td> | 15px body on a thin rule |
| Total | <tfoot><td> (optional) | Bold, under a thick rule |
| Side note | .sys-table__note inside a cell | Muted gray |
Stipulations
- Everything is left-aligned: headers, text and numbers. Tabular digits keep amounts readable without right-aligning them (Data & charts).
- The panel carries the padding. Put the table in a
.sys-table panel; don’t put a border around it or give it rounded corners. Rules run the full width inside the padding.
- Newsprint is the table’s own block, so the table can sit on white or on black. Its type stays ink on either.
- Status goes in a tag (Critical, Warning, Working), at the smaller table size; the Working tag turns white so it shows on the newsprint. Rows that need nothing say so in plain text. Values stay ink and never take the data color.
- Write amounts the same way down a column: the same decimals and the same currency sign on every row.
- No zebra stripes and no row hover. A link in a cell turns magenta on hover, as links do elsewhere.
- When a table is wider than its container, it scrolls sideways inside the panel; the page never does.