/    /  Pure CSS – Striped Tables

Pure CSS – Striped Tables:

In this tutorial, we will learn about creating striped tables in HTML using Pure CSS. Pure CSS provided the class name called “pure-table-striped” for creating tables having stripes in alternate rows as zebra-style effect.

We need to just add this class along with pure-table class in the <table> element if the browser is CSS3 supported. Otherwise, for every alternate table row we need to add the class “pure-table-odd” in the <tr> element. Below is the example for creating a striped table in Pure CSS.

Example:

<html>

<head>

<title>Pure CSS Striped Table</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">

</head>

<body>

<table class="pure-table pure-table-striped">

<thead>

<tr>

<th>Sno</th>

<th>Student</th>

<th>Course</th>

<th>Score</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Steven</td>

<td>HTML</td>

<td>70</td>

</tr>

<tr>

<td>2</td>

<td>Twinkle</td>

<td>DevOps</td>

<td>70</td>

</tr>

<tr>

<td>3</td>

<td>Harry</td>

<td>DataScience</td>

<td>65</td>

</tr>

</tbody>

</table>

</body>

</html>

Below is the output: