How to set different CSS on even and odd rows?- Tryit Editor for Web Developers
Edit This Code:
See Result »
<html> <head> <style> table { border-collapse: collapse; width: 100%; color: purple; } th, td { border: 3px solid black; text-align: center; padding: 13px; } tr:nth-child(even) {background-color: pink;} tr:nth-child(odd) {background-color: hotpink;} </style> </head> <body> <h1>Striped Table:</h1> <p><b>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</b></p> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Score</th> <th>Score</th> <th>Score</th> <th>Score</th> <th>Score</th> </tr> <tr> <td>Ali</td> <td>Sajid</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>Asad</td> <td>Arshad</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </tr> <tr> <td>Nadir</td> <td>Shahid</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </tr> <tr> <td>Sadia</td> <td>Kiran</td> <td>87</td> <td>87</td> <td>87</td> <td>87</td> <td>87</td> </tr> </table> <br> <img src="logo.jpg"/> </body> </html>
Result: