← All elements
<table class="zl"><tbody><tr><td>Invoice #1042</td><td><span class="ok">Paid</span></td><td>$320</td></tr><tr><td>Invoice #1043</td><td><span class="wait">Pending</span></td><td>$180</td></tr><tr><td>Invoice #1044</td><td><span class="late">Overdue</span></td><td>$95</td></tr></tbody></table>About this table
A clean list-style table with rounded row ends, status pills and a hover highlight for each row.
How it works
The table uses border-spacing to separate rows, and the first and last cells get rounded outer corners so each row looks like a card. Status pills use tinted backgrounds, and hover tints the row.
Ways to customise it
- Edit the status colours.
- Add a header row.
- Change the spacing value.
Good to know
Rows are real table cells, which keeps the structure accessible. Statuses are shown with text, not colour alone.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.