How to create a zebra stripped table with Html CSS
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th, td{
padding: 0.2rem;
text-align: right;
border: 3px solid #ccc;
}
tbody tr:nth-child(odd){
background: rgb(173, 168, 168);
}
</style>
</head>
<body>
<h1> Zebra Tables</h1>
<table class="ZEBRA">
<thead>
<tr>
<th>Date</th>
<th>Sales</th>
<th>Product</th>
<th>Store</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>10.05.2022</td>
<td>Stephen</td>
<td>Washing Machine</td>
<td>ZeroTech1</td>
<td>180$</td>
</tr>
<tr>
<td>3.07.2022</td>
<td>Smith</td>
<td>Telephone</td>
<td>ZeroTech2</td>
<td>220$</td>
</tr>
<tr>
<td>12.09.2022</td>
<td>Liza Williams</td>
<td>Tablet</td>
<td>ZeroTech3</td>
<td>450$</td>
</tr>
<tr>
<td>18.10.2022</td>
<td>Sara Ali</td>
<td>Refrigerator</td>
<td>ZeroTech4</td>
<td>285$</td>
</tr>
</tbody>
</table>
</body>
</html>
Comments
Post a Comment