Novedades de la etiqueta Table en HTML5

html51La etiqueta Table es sin duda la mejor opción para representar elementos en formato tabular o en tabla, debido a que permite crear rejillas perfectas en las cuales color los datos como si se tratara de una hoja de Excel.

La etiqueta table ha venido cada vez más en desuso con la llegada de HTML5 y CSS3, ya que anteriormente, esta etiqueta se utilizaba para maquetar toda la página y todas las secciones se representaban mediante una tabla. Hoy por hoy, las tablas se han limitado más a la representación de datos y para esto siguen siendo la mejor opción.

 

Con la llegada de HTML5 se agregan nuevas secciones a las tablas que permite personalizarlas de una mejor forma. Ahora es posible agregar una sección para los encabezados, el cuerpo de la tabla y el pie de la tabla, además es posible vincular la tabla con una descripción de forma semántica y agrupar columnas para aplicarles estilos personalizados.

Veamos un ejemplo de cómo quedaría una tabla en HTML5:

 

HTML table

 

Puede ser que la tabla de la imagen no te parezca gran cosa y puede que sea vea como cualquier otra, sin embargo, existen elementos nuevos que hacen mucho más fácil hacer una tabla y darle una mejor apariencia.

Veamos el código para crear la tabla anterior:

 

 

Para darle un mejor estilo a la tabla, estamos utilizando la clase de estilo t-productos , la cual está en un archivo externo llamado styles.css  que dejare más abajo.

Volviendo a la tabla, lo primero que vemos es que es posible agregar una descripción a la tabla, mediante la etiqueta <caption> , esta etiqueta lo que hace, es vincular semánticamente la tabla con su descripción, de esta manera, los buscadores pueden saber que ese texto es parte de la tabla y lograr con ello un mejor CEO.

La siguiente mejora, es que nos permite definir estilos para toda una columna, por ejemplo, podemos apreciar que estamos definiendo una border-left  a la última columna. Notemos que hemos agregado un <col span=”4”>  para representar a las primeras cuatro columnas, seguido agregamos otro <col span=”1”> , esta representaría la columna 5.

 

La siguiente mejora es que nos permite separar la tabla en 3 secciones, el Header (thead), el cuerpo (tbody) y el pie (tfoot). Dentro de cada una de estas secciones es posible agregar los respectivos <tr>  y <td>  con la diferencia que, al separar el contenido en 3 secciones, es posible asignarles clases de estilo diferentes.

En este ejemplo hemos creado una tabla de productos, donde la tabla tiene como cabecero el nombre de los campos, los productos como tal y finalmente en el pie de la tabla, el total.

Como verás, HTML 5 ha agregado mejoras importantes a la utilización de las tablas, que, si bien no son gran cosa, sí que nos ayuda bastante al momento de crear los estilos para la tabla. Ahora veamos cómo quedaron los estilos:

 

 

 

La clase principal, con la que creamos los estilos en cascada para la tabla es .t-products , partiendo de esta clase, podemos definir estilos exclusivos para las columnas del head, como es el caso de la clase .t-products thead td . Así mismo, aprovechamos que los datos están separados del header y del footer para crear un estilo cebra, mediante la siguiente clase .t-products tbody tr:nth-child(odd) . También es posible hacer que se marque de otro color, la fila sobre la que esta cursos con la siguiente clase .t-products tbody tr:hover .

 

Como vez, separar las secciones de una tabla trae bastantes ventajas al momento de definir estilos, así, que ya sabes, la próxima vez que crees una tabla, no olvides implementar estas mejoras.

Artículos relacionados

IDE vs Editor de texto Una de las grandes preguntas que todo desarrollador se hace al iniciar su vida profesional es, ¿qué es mejor un IDE o un editor de texto?, o simplemen...
Introducción al Box Model de CSS El Box Model es uno de los principales problemas que se presenta un programador de Front-End cuando inicia su carrera, es aprender la forma en el que ...
HTML5, antecedentes y novedades La historia de HTML ha sido larga, ya que desde su nacimiento al principio de los 90, ha evolucionado muchísimo, pasando de ser tan solo un simple s...

Oscar Blancarte

Ideológico, Innovador y emprendedor, Padre, Tecnólogo y Autor, amante de la ciencia y la tecnología en todos sus colores y sabores. Arquitecto de software & Full Stack Developer con experiencia en la industria del desarrollo de software y la consultoría. Amante de la programación y el Ajedrez.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *