Qué debes saber sobre las tablas HTML

Las tablas HTML sirven para mostrar datos tabulares de forma organizada en filas y columnas. Se crean con la etiqueta <table>, dentro de la cual se usan <tr> para las filas, <td> para las celdas y <th> para los encabezados. Su aspecto se personaliza con CSS y no conviene emplearlas para maquetar la estructura de la página.

Qué son las tablas HTML

Para presentar datos a los usuarios es preferible utilizar sistemas que faciliten su lectura y comprensión, como las listas, las gráficas o las tablas. Las tablas HTML son una de las formas más comunes de ofrecer información, pues resulta más sencillo apreciar su significado si los datos se clasifican y ordenan en columnas y filas. Implementarlas es un proceso sencillo que no presenta gran dificultad y ofrece la posibilidad de personalizar su aspecto combinando HTML y CSS.

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, distribuyéndolos en filas y columnas. Como HTML es un lenguaje de marcado que usa etiquetas para ejecutar sus comandos, la etiqueta empleada para las tablas es <table>, que cuenta con un gran número de opciones de configuración. Las tablas facilitan mucho la comprensión de los datos al mostrarlos en un formato simple y reconocible por parte de los usuarios.

Cuándo no se debe usar la etiqueta table

Muchas veces se utiliza la etiqueta <table> de manera incorrecta en una web, algo que debe evitarse por varios 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 HTML combinado con CSS. Utilizar la etiqueta tabla para maquetar la web en diferentes partes es un método anticuado y poco eficiente, que permite poco margen de personalización y que empeora la experiencia de usuario.
• Para mostrar una lista de elementos. Para mostrar listas, HTML ya cuenta con etiquetas específicas (<ul>, <ol> y <li>), mucho más sencillas de implementar y que ofrecen un resultado más adecuado que utilizar una tabla con una o dos columnas para listar elementos.

En resumen, las tablas deben reservarse para los datos tabulares: información que tiene sentido leer cruzando filas y columnas, como precios, horarios, comparativas o resultados.

Cómo hacer una tabla en HTML

Para crear una tabla HTML es necesario utilizar su etiqueta <table>, que necesita el cierre </table> y que en su interior contiene las filas y las celdas. Un ejemplo básico de estructura sería el siguiente:

<table>
  <tr>
    <td>Dato columna 1 fila 1</td>
    <td>Dato columna 2 fila 1</td>
    <td>Dato 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>
</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 (table row).
• <td>. Es la etiqueta que le indica a la tabla que se está creando una celda o columna dentro de la fila (table data).

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> (table header), quedando la primera fila del ejemplo anterior de la siguiente manera:

<tr>
  <th>Título columna 1</th>
  <th>Título columna 2</th>
  <th>Título columna 3</th>
</tr>

El atributo border servía tradicionalmente para añadir un borde a la tabla y contaba con un gran número de opciones de configuración. No obstante, en el desarrollo web actual se recomienda controlar los bordes y el resto del estilo mediante CSS, ya que ese atributo ha quedado obsoleto.

Etiquetas semánticas y accesibilidad

Para construir tablas más claras y accesibles conviene apoyarse en las etiquetas semánticas que ofrece HTML:

• <caption> añade un título descriptivo a la tabla.
• <thead>, <tbody> y <tfoot> agrupan, respectivamente, la cabecera, el cuerpo y el pie de la tabla.
• El atributo scope en las celdas <th> (con valores como col o row) indica a qué encabezado pertenece cada dato, algo fundamental para los lectores de pantalla.
• Los atributos colspan y rowspan permiten que una celda ocupe varias columnas o filas.

Estas prácticas mejoran la accesibilidad y ayudan a que las personas que navegan con tecnologías de asistencia comprendan la información sin dificultad.

Tablas, CSS y SEO

A los buscadores como Google les interesan los sitios que ofrecen datos fáciles de leer y comprender, porque mejoran la experiencia de usuario; por ello, incluir tablas de forma adecuada en una web ayuda a mejorar su posicionamiento SEO. Combinar HTML con CSS es la forma más recomendable de utilizar tablas en una web, pues permite personalizarlas y ajustarlas con mayor precisión, dotándolas de un diseño acorde al del resto del sitio. También conviene hacerlas responsivas para que se vean bien en el móvil, por ejemplo permitiendo el desplazamiento horizontal cuando hay muchas columnas.

Una vez creado tu sitio con sus tablas y contenidos, necesitarás publicarlo en internet. Para ello, un hosting con discos NVMe y tecnología LiteSpeed ayuda a que las páginas carguen con rapidez, algo que repercute en la experiencia de usuario y en el SEO. HostingPlus, en funcionamiento desde 2004, incluye certificado SSL y migración, y ofrece soporte 24/7 en español.

Un consejo práctico es separar siempre el contenido de la presentación: la tabla, escrita en HTML, debe limitarse a estructurar los datos, mientras que el color, el espaciado, las líneas y el comportamiento responsivo se definen en la hoja de estilos CSS. De este modo, si más adelante quieres cambiar el aspecto de todas las tablas de tu sitio web, solo tendrás que modificar el CSS sin tocar el contenido. Conviene también añadir un texto de cabecera claro en cada columna y revisar que la tabla se entienda igual de bien en pantallas grandes y en dispositivos móviles.

Preguntas frecuentes

¿Para qué sirven las tablas HTML?

Sirven para mostrar datos tabulares de forma organizada en filas y columnas, como precios, horarios o comparativas. No deben utilizarse para maquetar la estructura de la página, tarea que corresponde a HTML y CSS.

¿Qué etiquetas se usan para crear una tabla?

La tabla se define con <table>; cada fila con <tr>; las celdas de datos con <td>; y los encabezados con <th>. Para mejorar la estructura se añaden <caption>, <thead>, <tbody> y <tfoot>.

¿Ayudan las tablas al SEO?

Usadas correctamente para presentar datos, las tablas mejoran la legibilidad y la experiencia de usuario, factores que los buscadores valoran. El problema aparece solo cuando se emplean para maquetar la página, algo desaconsejado desde hace años.