Qué debes saber sobre las tablas HTML

Para presentar datos a los usuarios es mejor utilizar sistemas que faciliten su lectura y compresión como pueden ser listas, gráficas o tablas. Las tablas HTML son una de las formas más comunes de ofrecer información a los usuarios, pues es más sencillo apreciar su significado si se clasifican y ordenan en columnas y filas.

Implementar tablas en HTML es un proceso muy sencillo que no presenta gran dificultad, ofreciendo la posibilidad de personalizar su aspecto utilizando para ello tablas en HTML y CSS.

Qué son las tablas HTML

Una HTML table o tabla HTML es un elemento que se utiliza en una página web para mostrar datos de forma organizada y estructurada, aplicando para ellos una distribución de los mismos en filas y columnas.

HTML es un lenguaje de marcado que usa etiquetas para ejecutar los comandos. La etiqueta que se utiliza en este lenguaje para las tablas es <TABLE> y cuenta con diferentes parámetros para poder personalizar sus dimensiones y otras características.

Cuándo usar y no usar las tablas HTML

El uso de las tablas en una web es siempre recomendado para mostrar información en forma tabular, es decir, que el usuario pueda ir pasando de datos utilizando la tecla tabulador. Para presentar datos estadísticos, por ejemplo, las tablas son el mejor elemento pues facilitan mucho la comprensión de los datos al mostrarlos en un formato simple y reconocible por parte de los usuarios.

Muchas veces se utiliza la etiqueta table de manera incorrecta en una web, algo que debe evitarse por muchos motivos. Los principales usos incorrectos que suelen realizarse de las tablas son:

• Para estructurar una página. Hoy en día una web se estructura en sus diferentes partes utilizando para ello HTML combinado con CSS. Utilizar la etiqueta tabla para estructurar la web en diferentes partes es un método anticuado y poco eficiente, que permite poco margen de personalización y que arruina la experiencia de usuario.
• Para mostrar una lista de elementos. Para mostrar listas, HTML ya cuenta con una etiqueta específica, mucho más sencilla de implementar y que muestra un mejor resultado que utilizar una tabla con una o dos columnas para listar elementos.

Cómo hacer una tabla en HTML

Para crear una tabla HTML es necesario utilizar su etiqueta <TABLE>. Se trata de una etiqueta que necesita el cierre </TABLE>, y que en su interior contiene todo el código para crear las distintas filas y columnas y añadir su contenido.

Veamos el código HTML necesario para mostrar una tabla con tres filas y tres columnas:

<TABLE>

<TR>

<TD>Título columna 1 fila 1</TD>

<TD>Título columna 2 fila 1</TD>

<TD>Título columna 3 fila 1</TD>

</TR>

<TR>

<TD>Dato columna 1 fila 2</TD>

<TD>Dato columna 2 fila 2</TD>

<TD>Dato columna 3 fila 2</TD>

</TR>

<TR>

<TD>Dato columna 1 fila 3</TD>

<TD>Dato columna 2 fila 3</TD>

<TD>Dato columna 3 fila 3</TD>

</TR>

</TABLE>

Veamos cuáles son los distintos comandos HTML que hemos utilizado en esta estructura de tabla:

• <TR>. Es la etiqueta que le indica a la tabla que se está creando una fila.
• <TD>. Es la etiqueta que le indica a la tabla que se está creando una columna.

Dentro de la etiqueta de fila <TR> se pueden incluir tantas etiquetas <TD> como columnas se quieran añadir a la tabla.

Para resaltar el título de la columna de una tabla, se sustituye la etiqueta <TD> por la etiqueta <TH>, quedando el ejemplo anterior:

<TR>

<TH>Título columna 1 fila 1</TH>

<TH>Título columna 2 fila 1</TH>

<TH>Título columna 3 fila 1</TH>

</TR>

El atributo border es el indicado para añadir un borde a la tabla y se debe incluir dentro de los parámetros de la etiqueta <TABLE>. El valor que se asigne a border será el grosor del borde de la tabla.

También es posible utilizar muchos comandos avanzados para personalizar tablas como el Scope o la unificación de celdas (convertir varias celdas en una). Para poder dominar a fondo la creación de tablas es necesario profundizar en todas sus opciones y parámetros, ya que es una etiqueta avanzada que cuenta con un gran número de opciones de configuración.

Hemos hablado sobre cómo poner una tabla en HTML para presentar la información en un formato que facilite su comprensión a los usuarios. 

A Google le gustan los sitios que ofrecen datos a los usuarios que faciliten su lectura y comprensión porque mejora su experiencia de usuario, por lo que incluir tablas de forma adecuada en una web ayuda a mejorar su posicionamiento SEO.

Combinar HTML con CSS es la mejor manera de utilizar tablas en una web, pues se puede personalizar y ajustar de forma mucho más precisa, dotándolas de un diseño que vaya acorde al de la web.