Estilo de tabla HTML
Usa CSS para que tus 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 | dieciséis |
| 17 | 18 | 19 | 20 |
Para diseñar cualquier otro elemento de la fila de la tabla, use el :nth-child(even)
selector de esta manera:
Ejemplo
tr:nth-child(even) {
background-color: #D6EEEE;
}
Nota: Si usa (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
Para hacer rayas de cebra verticales, aplique estilo a columnas alternas , en lugar de filas alternas .
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | dieciséis |
| 17 | 18 | 19 | 20 |
Establezca los :nth-child(even)elementos de datos de la tabla de esta manera:
Ejemplo
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Nota: Coloque el :nth-child()selector en ambos elementos thy 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 usa un color transparente obtendrá un efecto de superposición.
Use un rgba()color 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);
}
Divisores horizontales
| Primer nombre | Apellido | Ahorros |
|---|---|---|
| Pedro | Grifo | $100 |
| Lois | Grifo | $150 |
| José | Swanson | $300 |
Si especifica bordes solo en la parte inferior de cada fila de la tabla, tendrá una tabla con divisores horizontales.
Agregue la border-bottompropiedad a todos los
trelementos para obtener divisores horizontales:
Ejemplo
tr {
border-bottom: 1px solid #ddd;
}
Mesa flotante
Use el :hoverselector
trpara resaltar las filas de la tabla al pasar el mouse sobre:
| Primer nombre | Apellido | Ahorros |
|---|---|---|
| Pedro | Grifo | $100 |
| Lois | Grifo | $150 |
| José | Swanson | $300 |
Ejemplo
tr:hover {background-color: #D6EEEE;}