26-estilos de tablas en html

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

---

---

Ir al indice