How to Create Zebra Striped Tables?

Just like zebras that have distinctive black and white stripe coats, you may create tables in your web pages where one row is distinctive to the other row.

The simple way of creating a striped table is using the nth-child() selector where you may provide different color (and other CSS properties) for the even or odd rows.

In this tutorial, I am going to show you examples of creating zebra striped tables by using custom CSS, Bootstrap CSS, and Material CSS.

Starting with the basic – Simple CSS striped table

First, let us go through how a stripped table is created by using simple CSS. I only used a table border and a few basic properties for presentation. See how the nth-child() selector is used for creating striped rows:

stripe table simple

See online demo and code

The CSS:

You can see the complete code in the demo page’s code section.

The demo of a striped table by Bootstrap 4 CSS

The Bootstrap framework has built-in classes for styling the HTML tables beautifully. By simply including the table class along with striped table class, you may create a striped table easily as by using Bootstrap CSS.

First, have a look at the online demo and I will explain how it is created:

striped table bootstrap

See online demo and code

The code:

If you are unfamiliar with the usage of the Bootstrap framework then note that the reference to the Bootstrap 4 CSS file is given in the head section.

Secondly, notice the table tag used:

<table class=”table table-striped”>

You can see we used two classes in the table tag. The .table-striped class is the one that specifies the table style as striped.

It gives the grayish look to every other row in the table.

You may learn more about the usage of .table and many other classes included in the Bootstrap 4 here:  Bootstrap 4 Tables

The example of Bootstrap 4 striped table without CSS file reference

Well, what if I like the Bootstrap styled striped table, however, the reference to its CSS file contains style for all other components.

You might ask yourself, why increasing the CSS file size while you only want the CSS style for the striped table.

The answer is, you may extract the table and striped table classes from the Bootstrap CSS file and include that code under the style section or your own external CSS file.

The demo below gives almost the same output as in the above example, however, notice I did not include the Bootstrap CSS reference.

Moreover, the code for the .table and .table-striped classes are used in the style section. Have a look:

See online demo and code

For your convenience, here is the CSS code of both classes:

.table class code:

It’s quite big, please see the demo page for all classes (including responsive and other related styles).

.table-striped class code:

The example of a striped table by Materialize CSS

Similarly, you may use the Materialize framework for creating striped tables without much effort.

What is Materialize? A modern responsive front-end framework based on Material Design.

You need to include the materialize CSS file (use the minified version) and just like the Bootstrap, refer the required classes in the table tag. See an example of simple striped table below:

See online demo and code

The complete code:

Particularly, notice the table tag:

<table class=”striped”>

Yes, it only has given the .striped class while other table styles are taken care of by the framework itself.

An example of changing the stripe color

This demo shows using a different color for each alternate row:

See online demo and code

Take the code from the demo page.

The Materialize Table tutorial covers other aspects and demos in detail.