29-Tablas en CSS

El aspecto de una tabla se puede mejorar mucho con el css

Compania	Contacto	Pais
Caja de alimentación de Gilberto	Caja de alimentación de Alfred	Alemania
supermercado Mas barato	Antonio Guilhermo	Espanha
Comercio sapattos	Michel bernau	Francia
Moda	Antolin guito	italia

---

...

Bordes de la tabla

La propriedad border sirve para especificar los bordes de las tablas

El siguiente ejemplo especifica un borde sólido para los elementos <table>, <th> y <td>:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

ancho completo

Si agregamos width: 100% al estilo de la tabla anterior, obtenemos el ancho de 100% de la tabla

Ejemplo

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Observe que la tabla de los ejemplos anteriores tiene bordes dobles. Esto es porque tanto la tabla como los elementos <th> y <td> tienen bordes separados.

Para eliminar los bordes duplos y ponerlos como si fuera solo una linea utilizamos la propriedad border:collapse

Vea el ejemplo

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Ancho y alto de la table

Para especificar el ancho de una tabla se usa width:

Para especificar el alto de la tabla se usa height:

Codigo del ejemplo

        table {
              width: 100%;
            }
            
            th {
              height: 70px;
            }
    

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Si queremos que una tabla ocupe la metad de la hoja usamos width: 50%:

Alineación de tablas

La propriedad text-align se utiliza para alignar el texto a la esquierda, al centro o derecha

Ejemplo de alineacion

Firstname	Lastname
Peter	Griffin
Lois	Griffin

---

Estilos en tablas

Podemos poner varios estilos a nuestras tablas

por ejemplo podemos dejar un padding en el texto

Para eso usamos la propriedad padding:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Podemos poner colores a las lineas con la propriedad color:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

---

Ir al indice