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 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 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-bottom
propiedad a todos los
tr
elementos para obtener divisores horizontales:
Ejemplo
tr {
border-bottom: 1px solid #ddd;
}
Mesa flotante
Use el :hover
selector
tr
para 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;}