HTML Estilo de tabla
Utilice CSS para que sus tablas se vean mejor.
Tabla HTML - Rayas de cebra
Si agrega un color de fondo en cada fila de la tabla, obtendrá un bonito efecto de rayas de cebra.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Para aplicar estilo a todos los demás elementos de fila de la tabla, use el selector :nth-child(even) de esta manera:
Nota: Si usa (odd) en lugar de (even), el estilo se aplicará en las filas 1,3,5, etc. en lugar de 2,4,6, etc.
Tabla HTML: Rayas verticales de cebra
Para crear rayas de cebra verticales, diseñe cada dos columnas, en lugar de cada dos filas.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Establezca :nth-child(even) para elementos de datos de tabla como este:
Nota: Coloque el selector :nth-child() en ambos th y td si desea tener el estilo tanto en los encabezados como en las celdas normales de la tabla.
Combina rayas de cebra verticales y horizontales
Puedes combinar el estilo de los dos ejemplos anteriores y tendrás rayas en filas y columnas alternas.
Si utilizas un color transparente, obtendrás un efecto de superposición.
Utilice un color rgba() para especificar la transparencia del color:
Ejemplo
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);
}
Inténtalo tú mismo »
Divisores Horizontales
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Si especifica bordes solo en la parte inferior de cada fila de la tabla, tendrá una tabla con divisores horizontales.
Agregue la propiedad border-bottom a todos los elementos tr para obtener divisores horizontales:
Tabla flotante
Utilice el selector :hover en tr para resaltar las filas de la tabla al pasar el mouse sobre:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
