Estilos alternos en filas de una tabla
La presentación de datos en forma de tabla es muy efectivo para que se vean bien organizados y ordenados, pero a veces es fácil perderse al leerlos o un poco áridos.
Para facilitar la lectura y evitar lecturas erróneas hay una técnica consistente en colorear las filas de forma alterna: por ejemplo las filas pares con fondo blanco y letras negras y las impares con un color que fondo gris claro y letras negras. O por cualquier otra combinación que facilite la lectura correcta
Pero aplicar colores fila por fila a mano es complejo, esto puede hacerse manera automática con los estilos CSS y pseudo selectores jerárquicos, tipo :nth-child
El código HTML
Vas a verlo en este ejemplo donde pondremos una tabla con tres columnas y 6 filas. La tabla va a tener una fila cabecera.
<table class="bandas">
<tr>
<th>Cliente</th>
<th>Ciudad</th>
<th>Estado</th>
</tr>
<tr>
<td>Juan</td>
<td>Madrid</td>
<td>Activo</td>
</tr>
<tr>
<td>Pedro</td>
<td>Soria</td>
<td>Activo</td>
</tr>
<tr>
<td>María</td>
<td>Lugo</td>
<td>En proceso</td>
</tr>
<tr>
<td>Luisa</td>
<td>Madrid</td>
<td>Activa</td>
</tr>
</table>
Estilo css
La magia la pone los estilos CSSS. En este caso la clase a la que llamaremos bandas
Esta clase se aplica como ves a toda la tabla, pero va a actuar sobre filas individuales gracias al uso de los pseudoselectores nth-child().
.bandas tr:nth-child(odd){
background: white;
}
.bandas tr:nth-child(even){
background: aliceblue;
}
.bandas th{
background: gray;
color: white;
}
El modificador o pseudoselector nth-child(odd) aplicado a tr está diciendo que solo se aplique los estilos que siguen a las filas impares, que en este caso tienen un fondo blanco.
He usado un estilo para dejar las celdas de cabecera fuera de este esquema.
La otra regla hace los mismo pero con las filas pares, a las que se les pone un fondo celeste.