CSS Table Styling
Zebra stripes, hover highlights, and styled headers turn a plain grid into a table that is comfortable to read.
Beyond borders and sizing, a few visual touches make long tables far easier to follow. The three most useful are alternating row colors, a hover highlight, and a distinct header row.
Zebra striping
The :nth-child pseudo-class lets you target every other row. Shading the even rows creates stripes that help the eye track across wide tables.
Alternating rows
<!DOCTYPE html>
<html>
<head>
<style>
tbody tr:nth-child(even) {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>Ava</td><td>92</td></tr>
<tr><td>Liam</td><td>88</td></tr>
<tr><td>Noah</td><td>95</td></tr>
<tr><td>Mia</td><td>81</td></tr>
</tbody>
</table>
</body>
</html>Highlight on hover
Hover feedback
<!DOCTYPE html>
<html>
<head>
<style>
tbody tr:hover {
background-color: #e8f5ee;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>Ava</td><td>92</td></tr>
<tr><td>Liam</td><td>88</td></tr>
<tr><td>Noah</td><td>95</td></tr>
</tbody>
</table>
</body>
</html>A standout header
- Give the header a solid background so it separates from the body.
- Use a contrasting text color for readability.
- Add padding so the labels are not cramped.
- Consider position: sticky to keep the header visible while scrolling.
Styled header row
<!DOCTYPE html>
<html>
<head>
<style>
thead th {
background-color: #00643c;
color: #ffffff;
padding: 12px;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr><td>Ava</td><td>92</td></tr>
</tbody>
</table>
</body>
</html>Note: Keep hover and stripe colors subtle. When both apply to the same row, the hover color should still be noticeable on top of the stripe.
