How to create a zebra striped table with CSS?

By IncludeHelp Last updated : November 15, 2023

With the help of CSS we can design any element as per our wish, whether it's a table, image box, div box, textbox, etc., we can apply CSS to every element to make it unique.

Zebra striped table

To create a zebra-striped table using the CSS, use the nth-child() selector and apply the CSS styles (such as background-color, padding, margin, etc.) that you want all even (or odd) table rows.

Example

The code to create a zebra stripped table is as follows -

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      table {
      border-spacing: 0;
      width: 800px;
      border: 2px solid black;
	  margin: 0px auto;
      }
      th, td {
      font-family: Cambria;
      font-size: 20px;
      text-align: center;
      border: 1px solid whitesmoke;
      padding: 20px;
      }
      tr:nth-child(even) {
      background-color: #006699;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Student Name</th>
        <th>Department</th>
        <th>Roll Number</th>
      </tr>
      <tr>
        <td>Priya Shah</td>
        <td>Computer science</td>
        <td>0905CS11</td>
      </tr>
      <tr>
        <td>Rudra pratap</td>
        <td>Computer science</td>
        <td>0905CS14</td>
      </tr>
      <tr>
        <td>Vaishali gupta</td>
        <td>Mechnical</td>
        <td>0905ME34</td>
      </tr>
      <tr>
        <td>Rihan kappor</td>
        >
        <td>Information technology</td>
        <td>0905IT09</td>
      </tr>
      <tr>
        <td>Kripali jha</td>
        <td>Information technology</td>
        <td>0905IT11</td>
      </tr>
    </table>
  </body>
</html>

Output

The output of the above example is:

Steps/Explanation

The steps to create a zebra stripped table with CSS are:

Step 1: We'll start the code by opening a table tag, inside this tag we'll use our tr tag i.e. table row tag, this tag will define the row of a tag in a table after this tag defines your table header content inside th tag, the content written inside these tags will be displayed as header of the table. Here in the given example the student name, Department, and Roll number are written inside th tag therefore it is displayed as the header of the table.
Step 2: Now write the content with their respective headers, again we'll use tr tag as the new row is started, and then we'll write our main content inside the td tag, the tag basically defines the content of the table cell. So all the content will be written inside this tag, moreover for every row we have to use a new tr tag, or else it will be displayed in the same line.
Step 3: Up to the second step, our main HTML code will be finished, now we'll start the CSS part, initiating with table tag, all the fundamental properties will be given to this tag, whatever overall design we want, we have to apply onto this tag. Here in the given example, border, border-spacing, and width these basic properties are applied, you can provide as many as properties you want.
Step 4: This step is totally optional, if you want to give some properties specifically to th and td tag then you can specify the properties, it is not a necessary segment.
Step 5: Now, coming to the last and vital step of this article, in this step, we'll provide the black color to the even/odd cell of the table, here in this example I've applied black color to the even cell for this I've used nth-child property, this property is commonly used when you want to design a particular part, this property is always used with some element like in this example I have used with tr tag as I want my rows to get affected by the properties applied under this selector. You can provide even or odd keywords in this and according to that it will display the result as I have applied the background-color property to the even rows so all the even rows have backgrounds, and this is how we get the zebra-striped table you can create many patterns by following these steps.

How to write comments in CSS?

How to create a side navigation menu with icons using CSS?