Advertisement
here2share

HTML table nth(even) background-color

Aug 16th, 2016
191
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 0.75 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table {
  6.     border-collapse: collapse;
  7.     width: 100%;
  8. }
  9.  
  10. th, td {
  11.     text-align: left;
  12.     padding: 8px;
  13. }
  14.  
  15. tr:nth-child(even){
  16.     background-color: #f2f2f2
  17. }
  18.  
  19. th {
  20.     background-color: blue;
  21.     color: white;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26.  
  27. <h2>Colored Table Header</h2>
  28.  
  29. <table>
  30.   <tr>
  31.     <th>Firstname</th>
  32.     <th>Lastname</th>
  33.     <th>Savings</th>
  34.   </tr>
  35.   <tr>
  36.     <td>Peter</td>
  37.     <td>Griffin</td>
  38.     <td>$100</td>
  39.   </tr>
  40.   <tr>
  41.     <td>Lois</td>
  42.     <td>Griffin</td>
  43.     <td>$150</td>
  44.   </tr>
  45.   <tr>
  46.     <td>Joe</td>
  47.     <td>Swanson</td>
  48.     <td>$300</td>
  49.   </tr>
  50.   <tr>
  51.     <td>Cleveland</td>
  52.     <td>Brown</td>
  53.     <td>$250</td>
  54. </tr>
  55. </table>
  56.  
  57. </body>
  58. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement