acerca de HTML

Referencia de etiquetas

Etiqueta td en HTML: celdas, colspan y rowspan

La etiqueta <td> representa una celda de datos en una fila de tabla. Sirve para colocar valores bajo sus encabezados: un curso, su duración o una hora de clase. Úsala cuando la información forme una tabla de datos; cada <td> pertenece a una fila <tr> de esa tabla.

Ejemplo mínimo: datos bajo sus encabezados

<table>
  <caption>Duración de los cursos, en horas</caption>
  <tr><th scope="col">Curso</th><th scope="col">Horas</th></tr>
  <tr><td>HTML</td><td>12</td></tr>
</table>

Pega el fragmento en el cuerpo de un documento HTML y ábrelo en el navegador. Verás los encabezados «Curso» y «Horas», y debajo los datos HTML y 12. Las celdas aportan los valores; el navegador no dibuja necesariamente bordes sin CSS.

Cambiar 12 por 14 actualiza la duración. Retirar <td>12</td> elimina ese dato y su celda. Retirar solo las etiquetas, conservando 12 directamente dentro de <tr>, deja una estructura inválida: el analizador puede mover ese texto fuera de la tabla.

Sintaxis y contexto válido

Escribe <td>…</td> como hijo de <tr>, nunca directamente dentro de <table> o <tbody>. Admite contenido de flujo, como texto, párrafos, enlaces o listas; cada elemento interior debe respetar sus propias reglas. Así lo establece el modelo de contenido de <td> en HTML.

Los ejemplos muestran cierres explícitos para que se reconozcan las celdas. En text/html se permite omitir </td> si sigue inmediatamente otro <td> o <th>, o si termina el contenido de su padre, según las reglas de omisión de MDN. <td /> no cierra una celda en HTML.

Td frente a th: dato y encabezado

¿Se diferencian solo por la negrita? No: <td> contiene un dato y <th> identifica aquello a lo que se refieren otros valores. Pueden convivir en la misma fila:

<tr><th scope="row">HTML básico</th><td>12</td></tr>

Aquí el nombre del curso es un encabezado de fila y 12 es su duración. El fragmento necesita una tabla alrededor. En el ejemplo mínimo, en cambio, «HTML» es un dato bajo «Curso». Elige por la función que cumple la celda: aplicar font-weight: bold a un <td> no lo convierte en encabezado, y quitar la negrita de un <th> conserva su significado.

Cómo combinar celdas sin perder la cuadrícula

Colspan: ocupar varias columnas

colspan="2" hace que una celda ocupe dos columnas de la misma fila. No escribas otra celda para la segunda posición cubierta. Si la tabla tiene tres columnas y la primera ya contiene un encabezado, un <td colspan="2"> completa las otras dos.

Rowspan: ocupar varias filas

rowspan="2" ocupa la posición inicial y la misma columna en la fila siguiente. En esa siguiente fila omite la celda cubierta: las demás se colocan en las posiciones libres. Una celda no puede atravesar grupos de filas, como dos <tbody> distintos.

¿Qué significa rowspan="0"? Abarca las filas restantes de su propio grupo, incluida la fila donde empieza. No significa cero filas ni toda la tabla. colspan admite enteros de 1 a 1000 y rowspan, de 0 a 65534; sin ellos, la ocupación es 1. Las combinaciones deben evitar solapamientos, como exige el estándar de atributos de celdas.

Caso práctico: horario con dos sesiones y una nota

Guarda este documento como horario-td.html, en UTF-8, y ábrelo en tu navegador. Usa el curso HTML básico de la guía de tablas; estas dos sesiones son una parte ficticia de sus 12 horas. No requiere servidor, archivos adicionales ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Horario de HTML básico</title>
    <style>
      body {
        max-width: 44rem;
        margin: 2rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.5;
        color: #222;
        background: #fff;
      }
      .desplazamiento { max-width: 100%; overflow-x: auto; }
      .desplazamiento:focus-visible { outline: 3px solid #2456a6; }
      .horario { width: 100%; min-width: 32rem; border-collapse: collapse; }
      .horario caption { padding-block: 0.75rem; text-align: left; }
      .horario th, .horario td {
        padding: 0.5rem;
        border: 1px solid #666;
        text-align: left;
        vertical-align: top;
      }
      .horario th { background: #eef5ff; }
    </style>
  </head>
  <body>
    <h1>Horario de HTML básico</h1>
    <p>El mismo curso tiene dos sesiones. La nota se aplica a ambas.</p>
    <p>En pantallas pequeñas, desplaza la tabla para leer todas las columnas.</p>
    <div class="desplazamiento" role="region"
         aria-label="Horario de las dos sesiones" tabindex="0">
      <table class="horario">
        <caption>Sesiones de esta semana</caption>
        <thead>
          <tr>
            <th id="horario-dia" scope="col">Día</th>
            <th id="horario-curso" scope="col">Curso</th>
            <th id="horario-hora" scope="col">Horario</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th id="horario-lunes" scope="row">Lunes</th>
            <td rowspan="2"
                headers="horario-curso horario-lunes horario-miercoles">HTML básico</td>
            <td headers="horario-hora horario-lunes">09:00–11:00</td>
          </tr>
          <tr>
            <th id="horario-miercoles" scope="row">Miércoles</th>
            <td headers="horario-hora horario-miercoles">09:00–11:00</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <th id="horario-nota" scope="row">Nota común</th>
            <td colspan="2" headers="horario-nota">Trae un portátil para ambas sesiones.</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Verás tres columnas. En la primera fila de datos, «Lunes» ocupa la primera posición; «HTML básico» ocupa la segunda y se extiende a la fila de «Miércoles»; la hora ocupa la tercera. La segunda fila solo escribe el día y la hora: la posición del curso ya está cubierta. En el último grupo, «Nota común» ocupa la primera columna y el texto abarca la segunda y la tercera.

En móvil, el CSS permite desplazamiento dentro de la región. Con teclado, llega mediante Tab y usa las flechas horizontales; Tab permite continuar fuera de ella.

Encabezados y cambios para comprobar el resultado

headers contiene IDs de <th> de la misma tabla, separados por espacios y sin repetir. La celda del curso señala «Curso», «Lunes» y «Miércoles» porque corresponde a ambos días. Cada hora señala su columna y su día. La nota señala «Nota común»: su texto es una indicación general, no un valor de curso u horario.

Una celda combinada no expresa automáticamente todas esas relaciones. La guía de W3C WAI sobre asociaciones explícitas explica el uso de id y headers. Este marcado ayuda a interpretar los datos, pero no garantiza un anuncio idéntico en todos los lectores de pantalla.

  1. Cambia rowspan="2" por rowspan="0": conserva ambas sesiones y termina antes del grupo de la nota.
  2. Retira rowspan: la hora del miércoles pasa a la columna del curso. Para mantener las tres posiciones, añade antes una celda de curso y ajusta sus headers.
  3. Retira colspan: la nota ocupa solo la segunda columna. Para volver a tener tres celdas en esa fila sin combinación, añade un <td> con el dato que corresponda a la tercera.
  4. Retira el CSS: permanecen los datos y sus asociaciones, aunque desaparecen los bordes y la región deja de ofrecer el desplazamiento definido por esos estilos.

Atributos, errores y etiquetas relacionadas

Los atributos específicos vigentes son colspan, rowspan y headers. scope pertenece a <th>, no a <td>. Globales como id, class o lang también se pueden usar en la celda. Sustituye atributos antiguos como align, bgcolor o width por CSS, según la referencia de atributos de MDN.

text-align, vertical-align y width son propiedades CSS; colSpan, rowSpan y cellIndex son propiedades DOM de JavaScript, no nuevas grafías de atributos HTML. cellIndex cuenta elementos de la fila y no siempre coincide con la columna visual cuando hay celdas combinadas.

Si una celda aparece desplazada, cuenta las posiciones cubiertas por cada combinación y las celdas de cada fila; después comprueba los límites de los grupos. No añadas una celda vacía donde ya ocupa espacio un rowspan, ni hagas que un colspan invada una posición cubierta. No uses estas combinaciones para maquetar una página: elige CSS para distribuir sus bloques.

<table> contiene la tabla completa, <tr> crea cada fila y <th> define encabezados. <tbody> agrupa filas y delimita hasta dónde puede extenderse un rowspan. <td> aporta sus datos.

Compatibilidad y fuentes

Revisión del 4 de octubre de 2026: <td> tiene soporte consolidado en los navegadores actuales, según la compatibilidad de MDN. Ambos ejemplos funcionan sin JavaScript. La lectura accesible depende también de las asociaciones escritas y de la tecnología de asistencia.

El HTML Living Standard define el elemento; sus atributos, las notas de MDN y la guía W3C WAI enlazadas arriba permiten consultar cada detalle.