Advanced Search

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

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

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.