<td>

<td> (table data, celda de datos) es el elemento que contiene el valor de un dato en la intersección de una fila y una columna de la tabla. Es la celda “común” de la tabla, en contraposición a <th> que describe o nombra. Dentro de un <td> puede ir prácticamente cualquier contenido: texto, imágenes, listas, incluso otra tabla anidada (aunque lo último es desaconsejado). La celda no tiene relación semántica propia con su encabezado — esa relación la establecen los atributos scope de los <th> que la encabezan.

La posición de un <td> en el DOM determina su columna: la primera celda de un <tr> ocupa la columna 1, la segunda ocupa la columna 2, y así. Este modelo implícito es suficiente para tablas simples, pero cuando se añaden colspan o rowspan el conteo deja de ser 1:1 con las columnas visuales. Una celda con colspan="2" ocupa dos columnas pero es un solo elemento <td> en el HTML; la fila siguiente a una celda con rowspan="2" tendrá un <td> menos que el número de columnas.

El contenido de <td> puede ser tan variado como el de un <div> normal. Sin embargo, las celdas de tabla tienen display table-cell en CSS, lo que les da un comportamiento particular: su altura se sincroniza con la de las demás celdas de la misma fila (todas las celdas de una fila tienen la misma altura, determinada por la que tiene más contenido). Su ancho lo determina el algoritmo de tabla o las propiedades CSS de la columna.

Cómo funciona

<td> ocupa una posición en la grilla de la tabla determinada por su <tr> y su posición dentro de ese <tr>. El navegador llena las columnas de izquierda a derecha para cada fila, saltando las posiciones ya ocupadas por rowspan de filas anteriores.

<table>
  <thead>
    <tr>
      <th scope="col">Producto</th>
      <th scope="col">Precio</th>
      <th scope="col">Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Notebook</th>
      <td>$800</td>
      <td>12 unidades</td>
    </tr>
    <tr>
      <th scope="row">Tablet</th>
      <td>$400</td>
      <td>8 unidades</td>
    </tr>
  </tbody>
</table>

Modelo de contenido

<td> puede contener contenido de flujo (flow content): párrafos, listas, imágenes, otros elementos semánticos. Es un contenedor flexible. Va exclusivamente dentro de <tr>.

Display por defecto: table-cell.

Atributos

colspan — fusión de columnas

colspan="N" hace que la celda ocupe N columnas. El valor por defecto es 1 (sin fusión). Con colspan="2", la celda ocupa el ancho de dos columnas y cuenta como si hubiera dos celdas para el algoritmo de grilla. La fila que la contiene tendrá menos <td> literales que el número de columnas de la tabla.

<!-- El encabezado "Marcador" ocupa las columnas "Local" y "Visitante" -->
<tr>
  <th scope="col">Partido</th>
  <th scope="col" colspan="2">Marcador</th>
</tr>
<tr>
  <td>Final Copa</td>
  <td>2</td>
  <td>1</td>
</tr>

Gotcha de colspan: una fila con colspan="2" en una de sus celdas tiene un <td> menos que el número de columnas. Si ponés el mismo número de <td> que columnas, la grilla se descuadra.

rowspan — fusión de filas

rowspan="N" hace que la celda ocupe N filas. El valor por defecto es 1. Con rowspan="2", la celda ocupa el espacio de dos filas en su columna, y la siguiente fila tendrá un <td> menos en esa posición — no se pone un <td> vacío, porque la celda con rowspan ya ocupa ese lugar.

<!-- "Inglés" ocupa lunes y martes en la columna "Mañana" -->
<tr>
  <th scope="row">Lunes</th>
  <td rowspan="2">Inglés</td>
  <td>Historia</td>
</tr>
<tr>
  <th scope="row">Martes</th>
  <!-- NO hay td para "Mañana" — Inglés ya lo ocupa -->
  <td>Física</td>
</tr>

Gotcha de rowspan: la fila siguiente tiene un <td> real menos. Si ponés el <td> de todas formas “para completar”, la grilla se rompe y el navegador inserta columnas fantasma.

Accesibilidad

<td> tiene el rol implícito cell en el árbol de accesibilidad. Su relación con el encabezado la establecen los <th scope> que lo encabezan. Cuando un lector de pantalla navega a un <td>, anuncia el valor más el contexto de su fila y columna — pero eso solo funciona si los <th> tienen scope correctamente declarado.

Notas, gotchas e interacción

• El error de conteo más común con rowspan: agregar un <td> vacío en la posición que ya ocupa el rowspan. El resultado es una columna extra que descuadra toda la tabla. Regla: la fila que sigue a un rowspan="2" tiene exactamente un <td> menos.
• Atributos de presentación legacy: align, valign, width, height, bgcolor, nowrap son todos legacy en <td> — reemplazados por CSS (text-align, vertical-align, width, height, background-color, white-space).
• colspan="0" y rowspan="0" tienen un significado especial en la especificación (expandirse hasta el borde de la tabla/grupo de columnas), pero el soporte de navegadores es inconsistente — evitalos.

Vigente / legacy

<td> es completamente vigente. Sus atributos de presentación son legacy — todos reemplazados por CSS. colspan y rowspan son atributos actuales sin equivalente legacy.

Aprendelo en el recorrido

Esta entrada complementa las lecciones La tabla semántica y Fusión de celdas del módulo Tablas, donde <td> con colspan/rowspan se practica en el horario semanal.

Ver también

• th — celda de encabezado; mismo modelo de colspan/rowspan + atributo scope
• tr — la fila que contiene las celdas
• table — el contenedor raíz de la tabla