HTML Table Styling with Vertical Zebra Stripes
HTML Table Styling with Vertical Zebra Stripes uses the :nth-child(even) selector for both the elements (<td> and <th>) to apply a background color to every even table column, creating a visually distinct zebra stripe pattern. Use the :nth-child(odd) selector to apply a background color to every odd table column.
Example: Illustrattion of the styling on Vertical Zebra Stripes using td:nth-child(even) and th:nth-child(even).
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Table Styling</title> <style> h1,h3 { text-align: center; color: green; } table { width: 100%; border-collapse: collapse; } th, td { padding: 2px; text-align: center; } td:nth-child(even) { background-color: rgb(196, 244, 228); } th:nth-child(even) { background-color: rgb(196, 244, 228); } </style></head><body> <h1>w3wiki</h1> <h3>HTML Table Styling with Vertical Zebra Stripes </h3> <table> <tr> <th>Name</th> <th>Class</th> <th>Section</th> <th> Roll No </th> </tr> <tr> <td>Mahima</td> <td>10</td> <td>A</td> <td>1</td> </tr> <tr> <td>Krishn</td> <td>8</td> <td>A</td> <td>3</td> </tr> <tr> <td>Shivika</td> <td>8</td> <td>A</td> <td>5</td> </tr> </table></body></html> |
Output:
HTML Table Styling
HTML Table Styling offers various styling techniques to make the table more presentable and attractive. The article will cover various HTML Table Styling including, HTML Table Styling-Zebra Stripes using tr:nth-child(even), Vertical Zebra Stripes using td:nth-child(even) and th:nth-child(even) and many more using different CSS properties.