← All elements
<table class="zt"><thead><tr><th>Plan</th><th>Seats</th><th>Price</th></tr></thead><tbody><tr><td>Free</td><td>1</td><td>$0</td></tr><tr><td>Pro</td><td>5</td><td>$9</td></tr><tr><td>Team</td><td>25</td><td>$29</td></tr><tr><td>Org</td><td>100</td><td>$99</td></tr></tbody></table>About this table
A compact data table with zebra striping from nth-child and a highlighted row on hover.
How it works
Alternate rows get different background colours using the :nth-child(odd) and :nth-child(even) selectors, which means you never add classes to the markup. A hover rule on the row darkens its cells so the row you are reading stands out. border-collapse is separate with a radius and overflow hidden to round the corners.
Ways to customise it
- Change the pink and red tints in the row rules.
- Edit the header colour.
- Add columns or rows freely, since the rules are structural.
Good to know
Use real table markup with th headers, as here, so screen readers can read the data. Do not rely on colour alone to separate rows when the data is complex.
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.