Colorear tablas con css

Quizas muchos de nostros hemos creado una tabla de, que se yo alguna lista, y nos gustaría separar esas filas (una de un color y otra de otro), como muchas veces se ve en la web. Bueno pues vamos a ver como colorear tablas con css.

Para colorear tablas, necesitamos primeramente tener una tabla (obviamente), con unas cuantas filas y columnas para ver mejor el efecto.

<table width="100%" cellpadding="5px" cellspacing="0" align="center">
<tr>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
</tr>
<tr>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
</tr>
<tr>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
</tr>
<tr>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
</tr>
<tr>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
    <td>Elemento</td>
</tr>
</table>

Y con los selectores Css3:

  • :nth-of-type(odd). Para los 1º, 3º, 5º, 7º …. (nones)
  • :nth-of-type(even). Para los 2º, 4º, 6º, 8º, 10º …. (pares)

En el estilo especificamos en el estilo (si queremos colorear las filas “tr”, o si las columnas “td”. Por ahora deré el ejemplo de las filas).

tr:nth-of-type(odd) {
    background-color: #AAA;
}
tr:nth-of-type(even) {
    background-color: #EEE;
}

Para que nos quede.

colorear tablas

Ahora si queremos colorear tablas de forma vertical (columnas), remplazamos del código anterior (tr), por td.

td:nth-of-type(odd) {
    background: #AAA;
}
td:nth-of-type(even) {
    background: #EEE;
}

colorear tablas

:)

Deja un comentario