Tablas HTML

Introducción

Las tablas en HTML son una herramienta fundamental para organizar y presentar información en un formato estructurado de filas y columnas. Aunque en los inicios de la web se empleaban para el diseño y maquetación de páginas, su función principal hoy en día es la de mostrar datos tabulares.

Qué son las Tablas HTML

Las tablas HTML son estructuras que organizan datos en filas y columnas, mejorando la presentación de información tabular en sitios web. Son ideales para mostrar datos como resultados deportivos, estadísticas financieras o inventarios de productos, donde se requiere un formato claro de filas y columnas. Se crean con el elemento <table>, que contiene filas definidas por <tr> (table row) y celdas especificadas con <td> (table data) para contenido o <th> (table header) para encabezados.

Estructura Básica de una Tabla HTML

La estructura básica de una tabla en HTML se define principalmente con las siguientes etiquetas:

• <table>: Etiqueta fundamental que define una tabla en HTML. Actúa como el contenedor principal, englobando todo el contenido de la tabla, desde encabezados hasta datos.
• <thead>, Table Head: (Opcional) Delimita la sección de encabezados de la tabla. Suele incluir los títulos de las columnas, aportando claridad y estructura. Aunque no es obligatorio, su uso es una práctica recomendada para mejorar la organización.
• <tbody>, Table Body: (Opcional) Contiene el cuerpo principal de la tabla, donde se alojan los datos organizados en filas y celdas. Es el núcleo de la tabla, esencial para presentar la información de manera ordenada.
• <tfoot>, Table Footer: (Opcional) Define el pie de la tabla, utilizado para incluir resúmenes, totales o notas finales. No es un elemento obligatorio, pero resulta útil para destacar información adicional o conclusiva.
• <tr>, Table Row: Representa una fila dentro de la tabla. Cada etiqueta <tr> genera una nueva fila, sirviendo como base para organizar celdas de encabezados o datos.
• <th>, Table Header: Define las celdas de encabezado dentro de una fila, comúnmente en el <thead>. Su contenido, que identifica columnas o filas, aparece por defecto en negrita y centrado en la mayoría de los navegadores, facilitando la lectura.
• <td>, Table Data: Especifica las celdas que contienen los datos de la tabla, ubicadas generalmente en el <tbody> dentro de una fila. Estas celdas son el espacio donde se presenta la información principal de la tabla.

Ejemplo de una Tabla HTML

En este ejemplo se muestra como se combinan las etiquetas para crear una tabla simple:

• La etiqueta <table> es el contenedor principal que organiza todos los elementos y datos de una tabla HTML en una página web.
• La etiqueta <table> incluye una etiqueta <thead> que define la sección de encabezados, especificando los títulos de las columnas.
• En el elemento <thead>, una etiqueta <tr> define la fila de encabezados, que contiene tres etiquetas <th> representando los títulos de las columnas: "Nombre", "Edad" y "Ciudad".
• Luego, se tiene una etiqueta <tbody> para definir el cuerpo de la tabla, agrupando las filas con los datos principales.
• En el <tbody>, se encuentran dos etiquetas <tr>, cada una representando una fila con datos específicos de la tabla.
• Cada fila <tr> en el <tbody> contiene tres celdas <td> con datos específicos, como "Juan", "30" y "Bogotá" en la primera fila.
• En el <tfoot>, se define una fila con <tr> que contiene una celda <td> con el atributo colspan="3" para que el texto "Datos de ejemplo para demostración" abarque las tres columnas de la tabla (Nombre, Edad y Contacto).

Elementos Opcionales y Atributos Adicionales

• <caption>: Título de la tabla:
  • Esta etiqueta se coloca como primer elemento dentro de <table>, antes de etiquetas como <thead> o <tr>.
  • Por defecto, <caption> aparece centrado sobre la tabla, pero su alineación y posición pueden ajustarse con CSS.
  • La etiqueta <caption> es interpretada por lectores de pantalla como el título de la tabla, mejorando la comprensión de los datos para usuarios con discapacidades visuales.
• <colgroup>: Especifica un grupo de una o más columnas de una tabla para formatearlas.
  • La etiqueta <colgroup> se ubica dentro de <table>, después de su apertura y antes de las filas <tr>, y contiene etiquetas <col> que definen una o más columnas de la tabla.
  • La etiqueta <caption> simplifica la gestión de estilos al permitir que múltiples columnas compartan las mismas propiedades visuales, evitando aplicar estilos individualmente a cada celda (<td> o <th>).
• <col>: La etiqueta <col> especifica propiedades de columna para cada columna dentro de un elemento <colgroup>.
• span: El atributo span en la etiqueta <col> de HTML especifica cuántas columnas consecutivas compartirán los estilos o propiedades definidas.