financial-tableslisted

Table design for financial data - hierarchical P&L and balance sheet layouts with roll-ups, column ordering, conditional formatting that earns its ink, in-table sparklines and bars, totals discipline, sticky headers, and print behaviour. The table is often the real deliverable, not the chart. Trigger on "table", "P&L layout", "financial statement table", "data table", "sparkline in table", "conditional formatting", "totals row", "sticky header", "make this table readable".
Lukehle/chartroom · ★ 0 · Web & Frontend · score 70

Install: claude install-skill Lukehle/chartroom

# Financial tables Finance audiences read tables. They will read a well-set table faster than any chart, because they know the shape of a P&L and they want the exact numbers. **Treat the table as a primary deliverable, not as a fallback.** Most dashboards would be improved by one strong table and one chart, instead of six weak charts. --- ## Non-negotiables Three lines of CSS and one rule fix most unreadable tables: ```css table { border-collapse: collapse; width: 100%; } td, th { font-variant-numeric: tabular-nums; } /* digits stack */ .num { text-align: right; } /* numbers right, labels left */ ``` Plus: **consistent decimal places within a column.** Ragged precision is the single most common reason a numeric column will not scan. --- ## Hierarchical statements A P&L is a tree. Encode the hierarchy with **indentation and weight**, never with borders. ``` Revenue 4,820,115 Subscription 4,412,880 Services 407,235 ────────── Cost of revenue (1,156,828) Hosting (612,400) Support (544,428) ────────── Gross profit 3,663,287 ← bold, rule above Gross margin % 76.0% ← muted, derived ``` - **Inde