29. Tablas CSS

Bordes en una tabla

Para especificar los bordes de la tabla en CSS, usa la propiedad border. El siguiente ejemplo especifica un borde sólido para los elementos <table>, <th> y <td>.

Ejm

table, th, td {
  border: 1px solid;
}

Tabla de ancho completo

Para coger el ancho completo de pantalla en una tabla se utiliza la siguiente sintaxis.

Ejm

table {
  width: 100%;
}

Dobles bordes

Observa que la tabla de los ejemplos anteriores tiene bordes dobles. Esto se debe a que tanto la tabla como los elementos <th> y <td> tienen bordes separados. Para eliminar los bordes dobles, echa un vistazo al siguiente ejemplo.

Ejm

table {
  border-collapse: collapse;
}

La propiedad border-collapse establece si los bordes de la tabla deben contraerse en un solo borde.

Si solo deseas un borde alrededor de la tabla, solo especifica la propiedad border para <table>.

Ejm

table {
  border: 1px solid;
}

table con width y height

El ancho y el alto de una tabla están definidos por las propiedades  width y height. El siguiente ejemplo establece el ancho de la tabla al 100% y la altura de los elementos <th> a 70px.

Ejm

table {
  width: 100%;
}

th {
  height: 70px;
}

Para crear una tabla con la mitad de la página, utiliza width:50%.

Ejm

table {
  width: 50%;
}

Alineamiento horizontal

La propiedad text-align establece la alineación horizontal (como izquierda, derecha o centro) del contenido en <th> o <td>. De forma predeterminada, el contenido de los elementos <th> está alineado al centro y el contenido de los elementos <td> está alineado a la izquierda. Para alinear al centro el contenido de los elementos <td> también, use text-align: center.

Ejm

td {
  text-align: center;
}

Alineamiento vertical

La propiedad vertical-align establece la alineación vertical (como superior, inferior o central) del contenido en <th> o <td>. De forma predeterminada, la alineación vertical del contenido de una tabla es media (para los elementos <th> y <td>). El siguiente ejemplo establece la alineación vertical del texto hacia abajo para los elementos <td>.

Ejm

td {
  height: 50px;
  vertical-align: bottom;
}

Padding en table

Para controlar el espacio entre el borde y el contenido de una tabla, utiliza la propiedad padding en los elementos <td> y <th>.

Ejm

th, td {
  padding: 15px;
  text-align: left;
}

Divisores horizontales

Agrega la propiedad border-bottom a <th> y <td> para divisores horizontales.

Ejm

th, td {
  border-bottom: 1px solid #ddd;
}

Usa el selector :hover en <tr> para resaltar las filas de la tabla al pasar el mouse sobre.

Ejm

tr:hover {background-color: coral;}

Tablas rayadas

Para las tablas con rayas de cebra, usa el selector nth-child() y agrega un color de fondo a todas las filas pares (o impares) de la tabla.

Ejm

tr:nth-child(even) {background-color: #f2f2f2;}

Color de la tabla

Ejm

th {
  background-color: #04AA6D;
  color: white;
}

Tablas Responsive

Una tabla Responsive mostrará una barra de desplazamiento horizontal si la pantalla es demasiado pequeña para mostrar el contenido completo. Agrega un elemento contenedor (como <div>) con overflow-x:auto alrededor del elemento <table> para que responda.

Ejm

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

Resumen