<table>

<table> es el elemento que representa datos tabulares: información donde la relación entre filas y columnas tiene significado propio. El precio de un producto en una categoría, la temperatura de una ciudad en un mes, el resultado de un equipo en una fecha — eso es una tabla. Si sacás un dato de su fila y su columna y pierde sentido, probablemente pertenece a una tabla. Si lo que tenés es una lista de ítems sin relación cruzada, o la estructura visual de tu página, la tabla no es la herramienta correcta.

<table> es el contenedor raíz de toda la estructura tabular. No contiene celdas directamente: el modelo de contenido exige que las celdas vivan dentro de filas (<tr>), y que las filas vivan dentro del <table> o de sus secciones semánticas (<thead>, <tbody>, <tfoot>). Este anidado es obligatorio: un <td> fuera de un <tr>, o un <tr> con celdas en posiciones incorrectas, produce HTML inválido que los navegadores intentan corregir con resultados impredecibles.

El elemento <table> no controla el aspecto visual de la tabla: los bordes, el colapso de bordes, el espaciado entre celdas, el ancho de columnas — todo eso es CSS (ver propiedades border-collapse, table-layout, border-spacing, próximamente en la referencia CSS). Lo que <table> provee es la estructura semántica y el modelo de accesibilidad: cuando la tabla tiene encabezados correctos (<th scope>), lectores de pantalla como NVDA o VoiceOver pueden navegar celda por celda anunciando el valor junto con su fila y columna de contexto.

Cómo funciona

<table> establece un contexto de formato de tabla en CSS. Dentro de ese contexto, el navegador distribuye el espacio entre columnas usando un algoritmo automático (table-layout: auto por defecto): mide el contenido de cada celda y asigna ancho proporcional. Las columnas no se declaran explícitamente en HTML — emergen de la posición de las celdas en cada fila. La primera celda de cada <tr> forma la columna 1, la segunda la columna 2, y así sucesivamente.

El modelo de anidado es estricto y obligatorio:

<table>
  └── <caption> (opcional, primer hijo)
  └── <thead> / <tbody> / <tfoot> (opcionales pero recomendados)
        └── <tr>
              └── <td> o <th>

Si los elementos intermedios faltan, los navegadores los insertan implícitamente (por ejemplo, un <tr> directo hijo de <table> sin <tbody> — el navegador agrega el <tbody> en el DOM). Pero depender de esa corrección es frágil; siempre conviene escribir la estructura completa.

Cuándo SÍ usar tabla — y cuándo NO

Layout con tablas es legacy y está prohibido. En los años 90, antes de CSS Grid y Flexbox, los desarrolladores usaban <table> para construir la estructura visual de las páginas. Hoy ese patrón está completamente descartado: rompe la semántica, dificulta la accesibilidad (los lectores de pantalla anuncian “tabla de N filas por M columnas” aunque no haya datos tabulares), y genera HTML frágil imposible de mantener. Para layout, usá Flexbox o Grid.

Modelo de contenido

<table> no es un void element — tiene apertura y cierre y puede contener:

• Un <caption> opcional (debe ser el primer hijo).
• Cero o más grupos de columnas <colgroup> (control de ancho/estilo por columna; mención — no es el foco de esta tanda).
• Cero o más de <thead>, <tbody>, <tfoot>.
• O directamente <tr> (si se omiten las secciones).

Display por defecto: table (un tipo especial que crea el contexto tabular).

Sintaxis

<table>
  <caption>Comparativa de planes</caption>
  <thead>
    <tr>
      <th scope="col">Característica</th>
      <th scope="col">Básico</th>
      <th scope="col">Pro</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Precio</th>
      <td>$5/mes</td>
      <td>$15/mes</td>
    </tr>
    <tr>
      <th scope="row">Almacenamiento</th>
      <td>10 GB</td>
      <td>100 GB</td>
    </tr>
  </tbody>
</table>

Atributos

<table> no tiene atributos propios de uso moderno. En HTML4 existían border, cellpadding, cellspacing, width, bgcolor y align — todos son legacy: hoy se reemplazan íntegramente con CSS (border-collapse, border-spacing, width, background-color). No los uses.

Accesibilidad

Una tabla bien estructurada es automáticamente accesible para lectores de pantalla cuando:

• Tiene <caption> (el nombre de la tabla se anuncia al entrar).
• Usa <th scope="col"> para encabezados de columna y <th scope="row"> para encabezados de fila.
• Las secciones <thead>/<tbody>/<tfoot> están presentes (permiten navegar directamente al cuerpo de datos).

El rol implícito de <table> en el árbol de accesibilidad es table. Si la tabla es decorativa (lo que no debería pasar), se puede usar role="presentation" para suprimirlo, pero esto es una señal de que la tabla no debería ser una tabla.

Notas, gotchas e interacción

• Las columnas son implícitas. No hay un elemento “columna” obligatorio en HTML. El número de columnas lo determina la fila con más celdas. <colgroup>/<col> existen para controlar estilo/ancho por columna pero no crean columnas — eso ya lo hacen los <tr>/<td>.
• El estilo visual es 100% CSS. Sin CSS, las tablas en la mayoría de los navegadores se ven como texto alineado sin bordes. Los bordes, el colapso de bordes (border-collapse: collapse) y el espaciado son propiedades CSS — ver familia CSS de tablas (próximamente en la referencia).
• Tablas anidadas son posibles pero desaconsejadas. Un <td> puede contener un <table> hijo. Era común en el layout con tablas legacy — hoy es un patrón a evitar porque confunde el modelo de accesibilidad.
• border="1" en HTML es legacy. Es un atributo de presentación de HTML4. Todavía se ve en tutoriales antiguos para “mostrar los bordes de la tabla”. El equivalente CSS es table, td, th { border: 1px solid; } table { border-collapse: collapse; }.

Vigente / legacy

<table> es completamente vigente para datos tabulares. Sus atributos de presentación (border, cellpadding, cellspacing, width, bgcolor, align, summary) son todos legacy desde HTML5 — reemplazados por CSS. El uso de tablas para layout es legacy y prohibido — reemplazado por Flexbox y Grid.

Aprendelo en el recorrido

Esta entrada complementa las lecciones La tabla semántica y Fusión de celdas del módulo Tablas, donde se practica <table> completo con <caption>, secciones y scope.

Ver también

• tr — la fila, unidad de construcción de la tabla
• td — celda de datos, con colspan y rowspan
• th — celda de encabezado, con scope para accesibilidad
• thead — secciones semánticas de la tabla
• caption — título accesible de la tabla