Overview
A stylesheet generator for HTML tables in four flavours: minimal, striped, bordered and cards. You pick a style, choose an accent color for the header row, and set the corner radius; the tool emits a complete block covering the table, th and td rules plus the style-specific extras, and a live sample table renders the design immediately.
How It Works
Select one of the four styles from the segmented control. Pick the accent color used for the header background, and drag the corner radius from 0 to 24 pixels. A sample table with three rows always visible shows the result, and the code panel emits the matching CSS: a base .table-{style} rule with collapsed borders and overflow hidden, header and cell padding, and the style-specific block, such as nth-child(even) striping for the striped variant. Copy the CSS with the output box button.
Step-by-Step Usage Guide
- Choose minimal, striped, bordered or cards.
- Pick the accent color for the header row.
- Set the table corner radius.
- Copy the generated CSS block.
Technical Specifications & Standards
The striped variant uses tbody tr:nth-child(even) to shade every second row, which counts rows in source order, so striping drifts if you paginate or insert rows dynamically; switching to nth-of-type does not help with mixed row types. The base rule pairs border-radius with overflow: hidden because a table clips its own corners only if something clips the box. The cards style is the interesting one: rounded, shadowed rows require border-collapse: separate so each row can take its own radius, and row spacing comes from border-spacing since margins do not apply to table rows; the preview renders exactly that pairing. Header cells get a bold white on accent treatment with letter-spacing, and cells keep a uniform 10 by 14 pixel padding across all styles.
Targeted Use Cases
- Admin dashboards listing users, orders or jobs.
- Documentation tables for API parameters or settings.
- Pricing comparison tables with a branded header.
- Card-like row layouts for mobile-first data lists.
Notes & Gotchas
- Keep real table markup with th and td so screen readers announce the structure.
- Prefer the striped or minimal styles for wide datasets; heavy borders add noise per row.
- Remember striping counts source rows, so dynamic inserts shift the banding.
- Use the cards style when rows act as clickable items; each row then reads as a unit.
Frequently Asked Questions
How does the striped style pick which rows to shade?
It shades tbody tr:nth-child(even), every even-numbered row in source order. If you insert or remove rows dynamically the stripes shift with the count, which is standard CSS behaviour.
Why does the cards style need different border collapsing?
Rounded, shadowed rows are impossible with border-collapse: collapse, which merges cell borders and ignores row decoration. The cards style uses border-collapse: separate with border-spacing for gaps so each row can carry its own radius and shadow.
How do the table corners get rounded?
The base rule combines border-radius with overflow: hidden on the table element. The overflow clipping is what actually cuts the header background to the rounded corners, since backgrounds do not respect the radius on collapsed borders.
Can I change the header text color?
The generated CSS hardcodes white header text on your accent color. If you pick a very light accent, darken it or edit the color: #fff line after copying.