Hay veces que queremos personalizar nuestras tablas, para llamar la atencion
Como cualquier elemento en html tanbien las tablas pueden tener, por ejemplo bordes, tener colores en las filas o columnas etc
vamos a ver algunas ejemplos
Column 1 | Column 2 | Column 3 |
---|---|---|
R1C1 | R1C2 | R1C3 |
Item | Item | Item |
...
Tabla con anchura de 100% del documento
Column 1 | Column 2 | Column 3 |
---|---|---|
R1C1 | R1C2 | R1C3 |
Item | Item | Item |
Tabla con borde rojo
Cambiando la propriedad del color del borde cambiamos su color
Column 1 | Column 2 | Column 3 |
---|---|---|
R1C1 | R1C2 | R1C3 |
Item | Item | Item |
Tabla con borde rojo redondo
Utilizamos la propriedad border-radius:20px
Column 1 | Column 2 | Column 3 |
---|---|---|
R1C1 | R1C2 | R1C3 |
Item | Item | Item |
Tabla con borde rojo redondo
Para quedar mas elegante le ponemos un padding:10px
Column 1 | Column 2 | Column 3 |
---|---|---|
R1C1 | R1C2 | R1C3 |
Item | Item | Item |
Tabla con borde inferior
Si la tabla no tiene bordes y queremos poner solo una linea horizontal por cada fila, pondremos en nuestra hoja de estilos o en la cabecera el seguinte estilo:
tr { border-bottom: 1px solid #ddd; }
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Cleveland | Brown | $250 |
Tabla con fondo alternado en las filas
Para hacer alternancia de color en las filas hay que crear un estilo css en la cabecera
Ejemplo de estilo
tr:nth-child(even) { background-color: #D6EEEE; }
Column 1 | Column 2 | Column 3 |
---|---|---|
R1C1 | R1C2 | R1C3 |
Item | Item | Item |
Column 1 | Column 2 | Column 3 |
---|---|---|
R1C1 | R1C2 | R1C3 |
Item | Item | Item |
R1C1 | R1C2 | R1C3 |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias