Usamos CSS para hacer lucir nuestras tablas más atractivas. Si agregas un color de fondo en cada fila de la tabla, obtendrás un bonito efecto de rayas de cebra. Para diseñar cualquier otro elemento de la fila de la tabla, usa el selector :nth-child(even) de esta manera.
Usamos CSS para hacer lucir nuestras tablas más atractivas. Si agregas un color de fondo en cada fila de la tabla, obtendrás un bonito efecto de rayas de cebra.
Ejm
tr:nth-child(even) {
background-color: #D6EEEE;
}Nota: si usas (odd) en lugar de (even), el estilo ocurrirá en la fila 1,3,5, etc. en lugar de 2,4,6, etc.
Tabla HTML – Rayas verticales de cebra
Si agregas un color de fondo en cada fila de la tabla, obtendrás un bonito efecto de rayas de cebra. Para diseñar cualquier otro elemento de la fila de la tabla, usa el selector :nth-child(even) de esta manera.
Ejm
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}Nota: Coloque el selector :nth-child() en los elementos th y td si desea tener el estilo en los encabezados y en las celdas normales de la tabla.
Combinar rayas de cebra verticales y horizontales
Puede combinar el estilo de los dos ejemplos anteriores y tendrá franjas en filas alternas y columnas alternas. Si usas un color transparente obtendrás un efecto de superposición.
Usa un color rgba() para especificar la transparencia del color:
Ejm
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}Divisores horizontales
Si especificas bordes solo en la parte inferior de cada fila de la tabla, tendrás una tabla con divisores horizontales. Agrega la propiedad border-bottom a todos los elementos tr para obtener divisores horizontales.
Ejm
tr {
border-bottom: 1px solid #ddd;
}Usa el selector :hover en tr para resaltar las filas de la tabla al pasar el mouse sobre:
Ejm
tr:hover {background-color: #D6EEEE;}