CSS — Tables

From raw to readable

Browsers render tables with no styling at all. This recipe is 90% of every good-looking table:

table {
    border-collapse: collapse;    /* merge double borders into one */
    width: 100%;
}
th, td {
    border: 1px solid #ddd;
    padding: 10px 14px;
    text-align: left;
}
th {
    background: #f8fafc;
    font-weight: 600;
}

What the browser displays

(Full-width table with thin unified grid lines, breathing room in every cell, and a subtly gray header row.)

Without border-collapse, adjacent cells draw doubled 2px seams — the tell-tale amateur look.

Zebra striping

nth-child paints alternating rows so eyes can track across wide tables:

tbody tr:nth-child(odd) {
    background: #f9fafb;
}

(Every other body row carries a whisper of gray.)

Odd/even, 2n, 2n+1 all work — same trick, different phases.

Hover highlighting

tbody tr:hover {
    background: #f0fdfa;
    cursor: pointer;
}

Instant feedback that a row is interactive. Combine zebra + hover by making hover the stronger color.

Numeric alignment

Numbers compare best right-aligned, sharing decimal positions:

td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;   /* equal-width digits */
}

Prices and scores jump from "messy" to "spreadsheet" with those two lines.

Caption & small print

caption {
    caption-side: top;
    font-weight: 700;
    padding: 8px;
    text-align: left;
}
tfoot td {
    font-weight: 700;
    border-top: 2px solid #333;   /* strong close under totals */
}

Responsive strategy

Tables don't wrap — wide ones overflow phones. The standard containment pattern:

<div class="table-wrap">
    <table>…</table>
</div>

.table-wrap {
    overflow-x: auto;         /* swipe sideways on mobile */
}
table { min-width: 600px; }   /* keep columns usable      */

(Desktop: normal table. Phone: horizontal swipe with no page breakage.)

A complete worked example

.pricing {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
}
.pricing th, .pricing td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.pricing thead th {
    text-align: left;
    background: #134e4a;
    color: white;
}
.pricing tbody tr:nth-child(even) { background: #f0fdfa; }
.pricing td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

Dark header, tinted alternates, hairline row separators, right-aligned numbers — this exact style ships in countless dashboards.

Mini Practice

1. Strip default look, then rebuild with collapse + padding + header bg
2. Add zebra stripes; flip odd→even and see the phase shift
3. Right-align a price column with tabular numerals
4. Wrap your table for phone swiping; test at 375px
5. Style <tfoot> totals with a heavier top border

Next: display → (already written — next new topic: max-width ✓ … continuing with position ✓, then float)