Text Resizer Text Resizer
February 8th, 2012
You're browsing: Scriptmatico.Com » CSS,General » Alternando el Color de las filas de una tabla usando Clases CSS

Alternando el Color de las filas de una tabla usando Clases CSS

Posted on may 09 in CSS, Generalby PrintText Resizer Text Resizer

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

PLAIN TEXT
HTML:
  2.  
  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. }
  29. -->
  30. </style>
  31.  
  32. </head>
  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.

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:

PLAIN TEXT
HTML:
  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.

PLAIN TEXT
HTML:
  2.  
  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.  
  39.  
  40.  
  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:

Post to Twitter

Related posts:

  1. Imprimir una tabla completa con PHP y MYSQL
  2. Listado de registros PHP MySQL en una tabla HTML
  3. Simulando una Nube de etiquetas con CSS
  4. Recorrer Una tabla Con T-SQL usando cursores
  5. Conectando a un servido MySQL y Ejecutando consultas con JAVA (ejemplo simple)

About

Entry Details: This entry was posted on Viernes, mayo 9th, 2008 at 12:21, by admin, and is filed under CSS, General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Print This!

Leave a Reply

You must be logged in to post a comment.

Back to Top