How to create striped table in html

HtmlHow-ToBeginner · 3 min read

How to Create a Striped Table in HTML Easily

To create a striped table in HTML, use the table element combined with CSS :nth-child(even) selector to color alternate rows. This adds a background color to every even row, making the table easier to read.

📐

Syntax

A striped table uses the table element in HTML and CSS to style alternate rows. The key CSS selector is tr:nth-child(even), which targets every even row to apply a background color.

table: The HTML element for the table.
tr: Table row element.
nth-child(even): CSS selector for even rows.
background-color: CSS property to set row color.

css

table {
  border-collapse: collapse;
  width: 100%;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

💻

Example

This example shows a simple HTML table with striped rows using CSS. The even rows have a light gray background for easy reading.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Striped Table Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
      font-family: Arial, sans-serif;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    th {
      background-color: #4CAF50;
      color: white;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>30</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>25</td>
        <td>Los Angeles</td>
      </tr>
      <tr>
        <td>Charlie</td>
        <td>35</td>
        <td>Chicago</td>
      </tr>
      <tr>
        <td>Diana</td>
        <td>28</td>
        <td>Miami</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Output

A table with four rows of data and a header row. The header row has a green background with white text. The 2nd and 4th rows have a light gray background, creating a striped effect.

⚠️

Common Pitfalls

Common mistakes when creating striped tables include:

Not using border-collapse: collapse; on the table, which can cause double borders.
Applying the nth-child selector to the wrong element, like tbody instead of tr.
Forgetting to style the th elements separately, which can make headers look inconsistent.
Using nth-child(odd) instead of even if you want stripes on even rows.

Here is a wrong and right example:

css

<style>
/* Wrong: applying nth-child to tbody instead of tr */
tbody:nth-child(even) {
  background-color: #f2f2f2;
}

/* Right: apply nth-child to tr inside tbody */
tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

📊

Quick Reference

Selector

Purpose

Example Usage

table

Defines the table container

...

tr:nth-child(even)

Selects even rows for striping

tr:nth-child(even) { background-color: #f2f2f2; }

th, td

Table header and data cells styling

th, td { padding: 8px; border: 1px solid #ddd; }

border-collapse

Removes double borders between cells

table { border-collapse: collapse; }

✅

Key Takeaways

Use CSS selector tr:nth-child(even) to color alternate table rows for striping.

Always apply border-collapse: collapse; on the table for clean borders.

Style th and td separately to keep headers distinct and readable.

Make sure to apply nth-child to tr elements, not tbody or table.

Striped tables improve readability by visually separating rows.