If you add a background color on every other table row, you will get a nice zebra stripes effect.
To style every other table row element, use the :nth-child(even) selector like this:
Pseudo-class :nth-child()
The :nth-child() pseudo-class represents an element that has an+b siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.
Syntax
selector:nth-child(an+b){ properties }
- The examples of an+b are as follows:
- :nth-child(2n) /* represents every even element */
- :nth-child(even) /* same, represents every even element */
- :nth-child(2n+1) /* represents every odd element */
- :nth-child(odd) /* same, represents every odd element */
- :nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
<!DOCTYPE html>
<html>
<head>
<title>HTML Table - Zebra Stripes</title>
</head>
<body>
<h2>Zebra Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>
<table style="width:100%">
<tr>
<th>#</th>
<th>Name of Student</th>
<th>Class</th>
<th>City</th>
</tr>
<tr>
<td>1.</td>
<td>Taranpreet Singh</td>
<td>6th</td>
<td>Muktsar</td>
</tr>
<tr>
<td>2.</td>
<td>Mehakpreet Kaur</td>
<td>7th</td>
<td>Muktsar</td>
</tr>
<tr>
<td>3.</td>
<td>Veerpal Kaur</td>
<td>8th</td>
<td>Muktsar</td>
</tr>
<tr>
<td>4.</td>
<td>Jasmeen</td>
<td>9th</td>
<td>Muktsar</td>
</tr>
<tr>
<td>5.</td>
<td>Sonia</td>
<td>10th</td>
<td>Muktsar</td>
</tr>
<tr>
<td>6.</td>
<td>Jaskaran Singh</td>
<td>11th</td>
<td>Muktsar</td>
</tr>
<tr>
<td>7.</td>
<td>Arshdeep Kaur</td>
<td>12th</td>
<td>Muktsar</td>
</tr>
</table>
</body>
</html>
Output
Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.
n can be a number, a keyword (odd or even), or a formula (like an + b).
