Write CSS to style a table with zebra stripes

Description: Style a table of names and marks with collapsed borders, a blue header and grey even rows.

Hint:

• Use border-collapse: collapse.
• Use tr:nth-child(even) for the stripes.

---

CSS for a striped table

<style>
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
  th { background: #0073aa; color: white; }
  tr:nth-child(even) { background: #f2f2f2; }
</style>

<table>
  <tr><th>Name</th><th>Marks</th></tr>
  <tr><td>Robin</td><td>85</td></tr>
  <tr><td>Maria</td><td>92</td></tr>
  <tr><td>John</td><td>78</td></tr>
  <tr><td>Asha</td><td>88</td></tr>
</table>

Output in the browser:

How it works

• border-collapse: collapse joins neighbour borders.
• tr:nth-child(even) selects the 2nd, 4th, 6th row and so on. The header row is the first row, so it is odd.

Read CSS Tables.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.