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

Introducci贸n a los WebSocket Los WebSocket fueron introducidos recientemente con la llegada de HTML5 y es sin duda una de las mejoras m谩s esperadas. Los WebSockets nos permite t...
Introducci贸n a WebWorkers 聽 Los WebWorkers son una de las nuevas caracter铆sticas de JavaScript que permite crear aplicaciones multiprocesos. Desde su inicio JavaScript ...
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 ...

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 *