Table Reading Patterns

Numeric Columns

A small table aligns numeric cells with text-align: end and font-variant-numeric: tabular-nums.

Program

Numeric columns are easier to compare when values align to the inline end and use tabular numbers.

numeric_column_alignment.html
Visuals: captured from real browser rendering
<table class="number-table">
  <caption>Plan totals</caption>
  <tr><th>Plan</th><th class="num">Cost</th></tr>
  <tr><td>Starter</td><td class="num">$9</td></tr>
  <tr><td>Team</td><td class="num">$120</td></tr>
</table>
<style>
  .number-table td, .number-table th { padding: 8px; border-bottom: 1px solid #cbd5e1; }
  .num { text-align: end; font-variant-numeric: tabular-nums; }
</style>

  1. Create the totals table.

    The table compares two plan costs.
    The table compares two plan costs.

  2. Mark the numeric column.

    The Cost header and cost cells share the numeric class.
    The Cost header and cost cells share the numeric class.

  3. Align numbers to inline end.

    The numeric values align to the inline end.
    The numeric values align to the inline end.

  4. Use tabular numbers.

    Tabular numbers make digit widths easier to compare.
    Tabular numbers make digit widths easier to compare.

  5. Render numeric comparison.

    Row separators and end alignment make values easier to scan.
    Row separators and end alignment make values easier to scan.

  6. Check numeric styling hook.

    One class applies both alignment and tabular number rules.
    One class applies both alignment and tabular number rules.
numeric column A shared class can mark every numeric cell in one column.
logical alignment text-align: end follows writing direction.
tabular numbers tabular-nums makes digits use consistent widths.