An HTML table highlighting the odd and even rows with different colors using CSS --- By W3Schools


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <style type="text/css">
  2. #customers
  3. {
  4. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  5. width:100%;
  6. border-collapse:collapse;
  7. }
  8. #customers td, #customers th
  9. {
  10. font-size:1em;
  11. border:1px solid #98bf21;
  12. padding:3px 7px 2px 7px;
  13. }
  14. #customers th
  15. {
  16. font-size:1.1em;
  17. text-align:left;
  18. padding-top:5px;
  19. padding-bottom:4px;
  20. background-color:#A7C942;
  21. color:#ffffff;
  22. }
  23. #customers tr.alt td
  24. {
  25. color:#000000;
  26. background-color:#EAF2D3;
  27. }
  28. </head>
  29.  
  30. <table id="customers">
  31. <tr>
  32. <th>Company</th>
  33. <th>Contact</th>
  34. <th>Country</th>
  35. </tr>
  36. <tr>
  37. <td>Alfreds Futterkiste</td>
  38. <td>Maria Anders</td>
  39. <td>Germany</td>
  40. </tr>
  41. <tr class="alt">
  42. <td>Berglunds snabbköp</td>
  43. <td>Christina Berglund</td>
  44. <td>Sweden</td>
  45. </tr>
  46. <tr>
  47. <td>Centro comercial Moctezuma</td>
  48. <td>Francisco Chang</td>
  49. <td>Mexico</td>
  50. </tr>
  51. <tr class="alt">
  52. <td>Ernst Handel</td>
  53. <td>Roland Mendel</td>
  54. <td>Austria</td>
  55. </tr>
  56. <tr>
  57. <td>Island Trading</td>
  58. <td>Helen Bennett</td>
  59. <td>UK</td>
  60. </tr>
  61. <tr class="alt">
  62. <td>Königlich Essen</td>
  63. <td>Philip Cramer</td>
  64. <td>Germany</td>
  65. </tr>
  66. <tr>
  67. <td>Laughing Bacchus Winecellars</td>
  68. <td>Yoshi Tannamuri</td>
  69. <td>Canada</td>
  70. </tr>
  71. <tr class="alt">
  72. <td>Magazzini Alimentari Riuniti</td>
  73. <td>Giovanni Rovelli</td>
  74. <td>Italy</td>
  75. </tr>
  76. <tr>
  77. <td>North/South</td>
  78. <td>Simon Crowther</td>
  79. <td>UK</td>
  80. </tr>
  81. <tr class="alt">
  82. <td>Paris spécialités</td>
  83. <td>Marie Bertrand</td>
  84. <td>France</td>
  85. </tr>
  86. </body>
  87. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.