March 19, 2024
How can I add background colors and color stripes to the Table?Background color and color stripes give a different look to the table. It also makes it much easier to understand the data. Let's know how to give background in the table?
For background color use background-color property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Table</title>
<style>
table, th, td {
border: 1px solid blue;
}
th {
background-color: rgb(19, 158, 158);
}
td {
background-color: rgb(161, 233, 209) ;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Roll no.</th>
<th>Student Names</th>
<th>Total Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Mark Dyol</td>
<td> 99 </td>
</tr>
<tr>
<td> 2 </td>
<td> John Smith </td>
<td> 95 </td>
</tr>
<tr>
<td> 3 </td>
<td> Remi Snap </td>
<td> 98 </td>
</tr>
</tbody>
</table>
</body>
</html>
Zebra Stripes
If we can give an odd or even background in the table, then it looks like zebra stripes. For applying zebra stripes use to :nth-child(odd/even) selector. This is a pseudo-class selector. That allows us to select elements based on their position within their parent element. It can be used to target elements based on their index.