Tablas CSS

El aspecto de una tabla HTML se puede mejorar mucho con CSS.

Bordes de Tabla

Para especificar los bordes de una tabla con CSS, se utiliza la propiedad border.

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

Note que la tabla contiene dos bordes. Esto es porque tanto la tabla <table> como los campos <th> y <td> tienen bordes separados.

La propiedad border-collapse

La propiedad border-collapse especifica si los bordes de la tabla deben ser colapsados en un solo borde.

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

Si solo se desea un borde sobre la tabla, solo se debe especificar el borde a <table> y no a los campos <th> y <td>.

table {
  boder: 1px solid black;
}

Las propiedades width y height

La Anchura y Altura de una tabla es definida por las propiedades width y height.

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

La propiedad text-align

La propiedad text-align especifica el alineamiento horizontal, ya sea: left, center o right para el contenido de los campos <th> y <td>. Por defecto, el contenido del campo <th> es centrado y el contenido del campo <td> es alineado a la izquierda.

Si deseamos que el campo <th> sea alineado también a la izquierda lo especificamos de la siguiente manera:

th {
  text-align: left;
}

La propiedad vertical-align

La propiedad vertical-align especifica el alineamiento vertical de los campos <th> y <td>, ya sea: top, bottom o middle. Por defecto, el alineamiento vertical de los contenidos de una tabla es middle, tanto para <th> como para <td>.

Si deseamos que el contenido de los campos <td> tengan una altura fija y quede alineado al inferior lo especificamos de la siguiente manera:

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

La propiedad padding

Para controlar el espaciado entre los bordes y el contenido de una tabla, se utiliza la propiedad padding en los campos <th> y <td>.

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

Divisiones Horizontales

Agregando la propiedad border-bottom a los campos <th> y <td> podemos darle un efecto de divisiones horizontales.

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

Tablas con efecto hover

El selector :hover se asigna al campo <tr> para resaltar los renglones de la tabla cuando se sobrepone el puntero del mouse.

tr:hover {
  background-color: #f5f5f5;
}

Tablas con renglones rayados

Para tablas con renglones rayados tipo cebra, se utiliza el selector :nth-child() y se agrega una propiedad background-color para todos los renglones pares o nones (even o odd).

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

Tablas Coloreadas

Con las propiedades background-color y color aplicados al campo <th> podemos darle vistas coloridas a los encabezados de las tablas.

th {
  background-color: #4CAF50;
  color: white;
}

Tablas Responsivas

Una tabla responsiva mostrará una barra horizontal de desplazamiento si la pantalla es demasiado el contenido completo. Es necesario agregar una contenedor como la etiqueta <div> especificándole overflow-x: auto; y que este contenga la tabla que cubriremos como responsiva.

<div style="overflow-x: auto;">
  <table>
  ...contenido de la tabla
  </table>
</div>

Propiedades de Tablas CSS

Propiedad	Descripción
border	Especifica todas las propiedades en una sola declaración.
border-collapse	Especifica si la tabla es colapsada en sus bordes.
border-spacing	Especifica la distancia entre el borde de los campos adyacentes.
caption-side	Especifica la ubicación de una leyenda de la tabla.
empty-cells	Especifica si mostrar o no los bordes y el fondo en celdas vacías en una tabla.
table-layout	Establece el algoritmo de diseño que se utilizará para una tabla.