We can create an HTML table with alternate row colors (often referred to as zebra striping) by using CSS
to apply different background colors to even and odd rows.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter<td>
<td>Stephen<td>
<td>500<td>
<tr>
<tr>
<td>Lois<td>
<td>Macheal<td>
<td>100<td>
<tr>
<tr>
<td>Joe<td>
<td>Smith<td>
<td>300<td>
<tr>
<tr>
<td>Cleveland<td>
<td>Brown<td>
<td>250<td>
<tr>
<tr>
<td>Alice<td>
<td>Roay<td>
<td>190<td>
<tr>
</tbody>
</table>
</body>
</html>
Output:
| First Name |
Last Name |
Points |
| Peter |
Stephen |
500 |
| Lois |
Macheal |
100 |
| Joe |
Smith |
300 |
| Cleveland |
Brown |
250 |
| Alice |
Roay |
190 |
