7.1 Introducción a las tablas con estilos CSS

En HTML, las tablas son un elemento que a simple vista queda muy simple… es por eso, que gracias a los estilos CSS, podemos modificarlas para que se vean mejor…
A continuación te voy a explicar algunos consejos para mejorar tus tablas con unas simples líneas de código CSS.

7.2 Espaciado y distribución

Lo primero que tenemos que solucionar es el espaciado por defecto, que por defecto en HTML está tan apretado que casi no sabes qué elemento es de cada celda.
Las propiedades que veremos para el espaciado y distribución son:

• table-layout: Establece el tamaño de las celdas.

Con esta propiedad existen 4 propiedades que son: auto | fixed | initial | inherit.

• width: Establece el tamaño de la tabla. Este valor es recomendable ponerlo al 100%, así ocupará siempre el 100% del contenedor donde se encuentre, siendo así una tabla responsiva.
• border: Establece un borde alrededor de la tabla.
• border-collapse: Reduce de dos bordes a uno.
• Padding: Realiza un relleno hueco dentro de cada elemento. Esto hace que si le aplicamos este estilo a las celdas, les da a los datos un espacio para que los elementos respiren mejor y mejora la legibilidad de la tabla.

7.3 Un poco de tipografía

Otro aspecto importante para la legibilidad de las tablas, es la tipografía. Por defecto la fuente que nos trae una tabla de HTML es muy simple y básica.
A continuación, te voy a enseñar las propiedades aplicables para los textos de las tablas:

• font-family: Cambia el tipo de fuente a la que desees. Por defecto hay pocas fuentes, pero puedes importar una fuente de Google o importarla a tu proyecto.
• letter-spacing: Define el espacio entre las letras. Este valor depende de la fuente y se suele establecer en píxeles.
• text-align: Establecemos la alineación del texto. Sus valores son: left | right | center | justify | initial | inherit.

7.4 Gráficos y colores

A las tablas, les podemos aplicar estilos de gráficos y colores poniendo una imagen de fondo con background-image, poniéndole un color sólido de fondo con background-color o haciendo un gradiente con gradient.

7.5 Un poco de tipografía

Otro truco muy importante a la hora de aplicar estilos a las tablas, es usar la técnica llamada “Rayas de cebra”. Esta técnica consiste en alternar el fondo de cada una de las filas. Así facilitamos muchísimo más la legibilidad.

La forma más sencilla de conseguir este efecto, es con la pseudoclase nth-child, donde le aplicaremos la palabra odd para las líneas pares y even para las líneas impares.

7.6 Ejemplo de tabla