Zebra Striped Table in CSS, Plus Row Hover Effects

In a table with many rows, your eyes can lose their place. Alternating row colors (“zebra stripes”) and a hover highlight make scanning easier.

Zebra stripes

:nth-child(even) selects every second row. You will study it fully in :nth-child().

index.html

HTML

<style>
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 10px 14px; text-align: left; }
  th { background: #1a5276; color: #fff; }
  tbody tr:nth-child(even) { background: #f4f9fc; }
</style>
<table>
  <thead><tr><th>Book</th><th>Author</th><th>Price</th></tr></thead>
  <tbody>
    <tr><td>The Slow Garden</td><td>M. Okafor</td><td>$14</td></tr>
    <tr><td>Night Trains</td><td>L. Brandt</td><td>$11</td></tr>
    <tr><td>Salt and Paper</td><td>R. Iyer</td><td>$16</td></tr>
    <tr><td>Paper Moons</td><td>A. Salim</td><td>$12</td></tr>
  </tbody>
</table>

Using tbody tr stops the header row from being striped.

Hover highlight

index.html

HTML

<style>
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #e6ddd7; }
  tbody tr:hover { background: #fff3e0; }
</style>
<table>
  <thead><tr><th>Book</th><th>Price</th></tr></thead>
  <tbody>
    <tr><td>The Slow Garden</td><td>$14</td></tr>
    <tr><td>Night Trains</td><td>$11</td></tr>
    <tr><td>Salt and Paper</td><td>$16</td></tr>
  </tbody>
</table>

You can use both: stripes for scanning and hover for the row you are pointing at.

info

Hover isn't for touch

Phones have no hover. Do not hide information behind it. The effect is only a convenience.

Exercise: stripe odd rows instead

Change the first example so the odd rows are tinted instead of the even ones.

Show a possible solution

Replace :nth-child(even) with :nth-child(odd).