Feb 152015
 
Artículo HTML

En lenguaje HTML, la mejor manera de visualizar información estructurada en forma de registros y campos es mediante el uso de tablas.

Pero el diseño por defecto que utilizan los navegadores resulta poco atractivo.

En este artículo se explica como mejorar la presentación de una tabla con unas pocas reglas de estilo CSS

Estructura de una tabla HTML

En HTML, el contenido de una tabla se encierra entre los tags “<table>” y “</table>”.

En la mayoría de los casos, la tabla consta de una cabecera con los nombres de las columnas, seguida de un cuerpo que contiene los registros de la tabla. La cabecera se encierra entre los tags “<thead>” y “</thead>”, y el cuerpo se encierra entre los tags “<tbody>” y “</tbody>”.

La cabecera contiene un registro encerrado entre los tags “<tr>” y “</tr>”, y en su interior están los nombres de las columnas entre los tags “<th>” y “</th>”

A su vez, la tabla consta de una serie de registros. El contenido de cada registro se encierra entre los tags “<tr>” y “</tr>”, y consta de una serie de valores encerrados entre los tags “<td>” y “</td>”.

Ejemplo:

Una tabla HTML como la del ejemplo es presentada por un navegador en forma de una serie de filas y columnas:

presentación por defecto de una tabla HTML en Firefox

Añadir estilo CSS a la tabla

Para mejorar la presentación de la tabla, comenzamos por asignar una clase al tag <table>:

Y a continuación, en la hoja de estilo asociada a la página, añadimos reglas de estilo para la clase “footable”.

En primer lugar, podemos cambiar el tipo de letra, y añadir un borde a la tabla:

Como vemos, en estas reglas de estilo también se establece el tamaño del texto, y un color gris oscuro. Por otra parte, la regla “width: 100%;” cambia la dimensión de la tabla para que se ajuste a su elemento contenedor.

Con esto, obtenemos el siguiente resultado:

tabla-con-borde

Con esto, ya se puede apreciar una mejora en el aspecto de la tabla.

A continuación vamos a añadir líneas horizontales de separación entre filas, y líneas verticales de separación entre columnas. También añadiremos un color de fondo al encabezamiento. Por último, justificamos a la izquierda los nombres de las columnas en el header, y los valores en los registros. Para ello, añadimos las siguientes reglas de estilo:

tabla-con-color

Y para conseguir un acabado profesional, podemos redondear ligeramente las esquinas de la tabla:

y añadir un suave gradiente de color al fondo del encabezado:

Y con esto, la tabla queda de la siguiente forma:

tabla-con-borde-redondeado

Por último, podemos hacer que el color de fondo de un registro cambie cuando se coloca el cursor sobre el mismo. Para ello basta con añadir una nueva regla de estilo:

y comprobar el resultado al colocar el cursor sobre una fila de la tabla:

tabla-con-fila-sombreada

Y eso es todo!

 Publicado por en 12:08 pm

  Una respuesta a “Cómo mejorar la presentación de tablas HTML con CSS”

  1. excelente, gracias.

 Deja un comentario

(requerido)

(requerido)