Para este articulo primero definiremos una tabla con las filas de un solo color. Y usaremos el siguiente codigo.

< View plain text >
HTML

  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>Alternando colores en una tabla</title>
  6.  
  7. <style type="text/css">
  8. <!--
  9. table{
  10.    border-spacing: 0px;
  11.    border-collapse: collapse;
  12.    width: 250px;
  13. }
  14. th {
  15.    text-align: center;
  16.    font-weight: bold;
  17.    padding: 2px;
  18.    border: 2px solid #FFFFFF;
  19.    background: #4a70aa;
  20.    color: #FFFFFF;
  21. }
  22. td {
  23.    text-align: center;
  24.    padding: 2px;
  25.    border: 2px solid #FFFFFF;
  26.    background: #e3f0f7;
  27. }
  28.  
  29. -->
  30. </style>
  31.  
  32. </head>
  33. <table>
  34.   <tr>
  35.   <th>Nombre</th>
  36.   <th>Apellido</th>
  37.   <th>Edad</th>
  38.   </tr>
  39.   <tr>
  40.     <td>John</td>
  41.     <td>Ward</td>
  42.     <td>21</td>
  43.   </tr>
  44.   <tr>
  45.     <td>Mike</td>
  46.     <td>Maguire</td>
  47.     <td>21</td>
  48.   </tr>
  49.   <tr>
  50.     <td>Sara</td>
  51.     <td>Lee</td>
  52.     <td>61</td>
  53.   </tr>
  54.   <tr>
  55.     <td>Walter</td>
  56.     <td>Reed</td>
  57.     <td>1</td>
  58.   </tr>
  59. </table>
  60. </html>

Y nos quedara un diseño como este

Ahora bien para hacer la alternacion de colores necesitamos crear una clase sobre los selectores del estilo que creamos. En este caso crearemos una clase «alt» sobre el selector «td» de nuestra hoja de estilos y nos quedaria algo asi.

< View plain text >
css

  1. td {
  2.     text-align: center;
  3.     padding: 2px;
  4.     border: 2px solid #FFFFFF;
  5.     background: #e3f0f7;
  6. }
  7. td.alt{
  8.     background: #f7f7f7;
  9. }

Por que se creo uno como td y otro como td.alt? La respuesta es simple por que los que no tengan definida la clase alt dentro de nuestra tabla tomaran el color default mientras los que definamos con la clase alt tomaran el color que escogimos.

Ahora vamos a definir en nuestra tabla cuales usaran la clase alt y cuales no. Y el codigo quedaria asi:

< View plain text >
HTML

  1. <tr>
  2.     <td>Sara</td>
  3.     <td>Lee</td>
  4.     <td>61</td>
  5.   </tr>
  6.   <tr>
  7.     <td class="alt">Walter</td>
  8.     <td class="alt">Reed</td>
  9.     <td class="alt">1</td>
  10.   </tr>

Como puedes ver en el codigo anterior una parte tiene definida la clase alt y otra no. Bueno pues ahora vamos a ver todo el codigo unido para ver que nos queda.

< View plain text >
HTML

  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>Alternando colores en una tabla</title>
  6.  
  7.  
  8. <style type="text/css">
  9. <!--
  10. table{
  11.    border-spacing: 0px;
  12.    border-collapse: collapse;
  13.    width: 250px;
  14. }
  15. th {
  16.    text-align: center;
  17.    font-weight: bold;
  18.    padding: 2px;
  19.    border: 2px solid #FFFFFF;
  20.    background: #4a70aa;
  21.    color: #FFFFFF;
  22. }
  23. td {
  24.    text-align: center;
  25.    padding: 2px;
  26.    border: 2px solid #FFFFFF;
  27.    background: #e3f0f7;
  28. }
  29. td.alt{
  30.    background: #f7f7f7;
  31. }
  32. -->
  33. </style>
  34.  
  35.  
  36. </head>
  37.  
  38. <table>
  39.  
  40.  
  41. <tr>
  42.  
  43.   <th>Nombre</th>
  44.   <th>Apellido</th>
  45.   <th>Edad</th>
  46.  
  47.   </tr>
  48.  
  49.   <tr>
  50.  
  51.     <td>John</td>
  52.     <td>Ward</td>
  53.     <td>21</td>
  54.  
  55.   </tr>
  56.  
  57.   <tr>
  58.  
  59.     <td class="alt">Mike</td>
  60.     <td class="alt">Maguire</td>
  61.     <td class="alt">21</td>
  62.  
  63.   </tr>
  64.  
  65.   <tr>
  66.  
  67.     <td>Sara</td>
  68.     <td>Lee</td>
  69.     <td>61</td>
  70.  
  71.   </tr>
  72.  
  73.   <tr>
  74.  
  75.     <td class="alt">Walter</td>
  76.     <td class="alt">Reed</td>
  77.     <td class="alt">1</td>
  78.  
  79.   </tr>
  80.  
  81.  
  82. </table>
  83. </html>

Y el resultado es este: