Table Generator
Style data tables with header colours, stripes, borders, row hover and cell padding. Live preview, copy the CSS.
.tbl { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; font-size: 14px; color: #e2e8f0; }
.tbl th {
background: #1e2230; color: #cbd5e1;
text-align: left; padding: 10px 14px; font-weight: 600;
}
.tbl td { padding: 10px 14px; background: #12151d; border-bottom: 1px solid #232836; }
.tbl tr:nth-child(even) td { background: #171a24; }
.tbl tbody tr:hover td { background: rgba(109, 94, 252, 0.12); }
About the table generator
Default tables are dense and hard to scan. Three changes fix most of it: enough cell padding to let rows breathe, a horizontal rule between rows rather than a full grid, and a hover state so the eye can track across a wide row.
Zebra striping helps on very wide tables but is unnecessary once row hover is in place, and using both can look busy.
How to use it
- 1Set cell padding first. It has the biggest effect on readability.
- 2Choose header and row colours.
- 3Turn on striping for wide tables, or leave it off and rely on row hover.
- 4Add borders only if the data genuinely needs a grid.
- 5Copy the CSS.
Questions
Should I use striped rows?
Only on wide tables where the eye has to travel a long way across a row. On narrow tables it adds noise, and row hover usually does the job better.
How do I make a table responsive?
Wrap it in a container with overflow-x: auto so it scrolls horizontally. Collapsing a table into cards on mobile is another option, but it breaks column comparison.
Why use border-collapse?
Without it, each cell draws its own border and you get doubled lines between cells. border-collapse: collapse merges them into single lines.