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:
See online demo and code
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style> table { border: 1px solid #008000; } tr:nth-child(odd) { background-color: #121212; color:#fff; } th{ background-color: #fff; color:#000; border: 1px solid #000; } </style> |
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:
See online demo and code
The code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> </head> <body> <div class="container"> <h3>A Demo of Striped Table using Bootstrap 4</h2> <table class="table table-striped"> <thead> <tr> <th>Month</th> <th>Sales</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <th scope="row">January</th> <td>85</td> <td>$13,555.00</td> </tr> <tr> <th scope="row">February</th> <td>73</td> <td>$9500.00</td> </tr> <tr> <th scope="row">March</th> <td>135</td> <td>$18,000.00</td> </tr> <tr> <th scope="row">April</th> <td>45</td> <td>$27,500.00</td> </tr> <tr> <th scope="row">May</th> <td>69</td> <td>$13,000.00</td> </tr> <tr> <th scope="row">June</th> <td>105</td> <td>$20,500.00</td> </tr> </tbody> </table> </div> </body> </html> |
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:
|
1 2 3 4 5 |
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.05); } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css"> </head> <body class = "container"> <table class="striped"> <thead> <tr> <th>Pro ID</th> <th>Pro Name</th> <th>Pro Quanity</th> </tr> </thead> <tbody> <tr> <td>P1</td> <td>Mango</td> <td>1 Ton</td> </tr> <tr> <td>P2</td> <td>Apple</td> <td>333 Kgs</td> </tr> <tr> <td>P3</td> <td>Oranges</td> <td>455 Kgs</td> </tr> <tr> <td>P4</td> <td>Strawberries</td> <td>15 Kgs</td> </tr> </tbody> </table> </body> </html> |
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.