Seleccionar filas alternas en una tabla
Para facilitar la lectura de los datos presentados en ua tabla se suele usar una técnica consistente en colorear las filas de forma altera: por ejemplo las filas pares con fondo blacno y las impares con un color que presente cierto contraste como un gris claro.
Este efecto se logra aplicando pseudo selectores y estilos CSS a cualquier tabla.
En esta páginas tienes el como se hace de este efecto
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 ala que llamamos bandas
Esta clase se aplica como ves a toda la tabla, pero va a actuar sobre filas individuales
.bandas tr:nth-child(odd){
background: white;
}
.bandas tr:nth-child(even){
background: aliceblue;
}
.bandas th{
background: gray;
color: white;
}
El modificador o pseudo selector 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..