Etiqueta tfoot en HTML: resúmenes y totales de tablas

La etiqueta <tfoot> agrupa las filas de resumen o pie de una tabla HTML, como los totales de sus columnas. Sirve para separar ese resumen de las filas de datos. Úsala, por ejemplo, al presentar la duración total de varios cursos; el número debe escribirlo el autor o calcularlo la aplicación.

Ejemplo mínimo: un total de horas

<table>
  <caption>Duración de los cursos, en horas</caption>
  <tbody>
    <tr><th scope="row">HTML</th><td>12</td></tr>
    <tr><th scope="row">CSS</th><td>8</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total de horas</th><td>20</td></tr>
  </tfoot>
</table>

Pega el fragmento en el cuerpo de un documento HTML. Verás los cursos HTML y CSS, seguidos del resumen de 20 horas. El valor está escrito en el código: 12 + 8 = 20. <tfoot> no añade la palabra «Total» ni dibuja necesariamente bordes; aquí el texto lo aporta el encabezado de fila.

¿En qué orden va tfoot?

Escribe <tfoot>…</tfoot> como hijo directo de <table>, después de <caption>, <colgroup>, <thead> y los cuerpos <tbody> o filas de datos <tr> que existan. Cada tabla admite como máximo un <tfoot>, aunque ese pie puede reunir varias filas de resumen.

El modelo de contenido vigente de <tfoot> permite cero o más <tr> y elementos de apoyo a scripts, como <script> o <template>. Las celdas <th> y <td> van dentro de las filas. No coloques un párrafo ni una celda directamente bajo el pie.

La apertura no puede omitirse. El cierre puede omitirse si no queda más contenido en la tabla; conservamos ambos para aprender los límites. Algunos ejemplos de HTML 4 situaban el pie antes del cuerpo: ese orden histórico no es la regla actual, como aclara el resumen técnico de MDN.

Un resumen de tabla frente al pie global

<tfoot> resume las columnas de su tabla. Un elemento <footer> contiene el pie de una página, artículo o sección, con información como autoría o enlaces. <footer> no sustituye al grupo de filas de una tabla.

Tampoco toda última fila necesita <tfoot>. Si JavaScript es el último curso del listado, sigue siendo un dato de <tbody>. Si una fila dice «Total de la oferta» y suma todas las duraciones, sí corresponde al pie. Para un subtotal dentro de una categoría, conserva el contexto de ese grupo de datos; el pie único puede reservarse para el resumen del conjunto.

Caso práctico: tres cursos y dos totales

Guarda este documento como cursos-tfoot.html, con codificación UTF-8, y ábrelo en tu navegador. Usa la oferta ficticia de la guía de <table>: HTML básico, CSS y JavaScript. Incluye todo el CSS y funciona sin servidor, recursos externos ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cursos y totales de la oferta</title>
    <style>
      body {
        max-width: 48rem;
        margin: 2rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.5;
        color: #222;
        background: #fff;
      }
      .cursos-scroll { max-width: 100%; overflow-x: auto; }
      .cursos-scroll:focus-visible {
        outline: 3px solid #1554ad;
        outline-offset: 3px;
      }
      .cursos { width: 100%; min-width: 32rem; border-collapse: collapse; }
      .cursos caption { padding: 0.75rem; text-align: left; }
      .cursos th, .cursos td {
        border: 1px solid #666;
        padding: 0.75rem;
        text-align: left;
      }
      .cursos td { text-align: right; }
      .cursos thead { background: #eef3fa; }
      .cursos tfoot > tr > * {
        border-top: 3px solid #222;
        background: #eaf2ff;
        font-weight: bold;
      }
      @media print {
        body { max-width: none; margin: 0; }
        .cursos-scroll { overflow: visible; }
        .cursos { min-width: 0; }
        .cursos th, .cursos td { padding: 0.4rem; }
      }
    </style>
  </head>
  <body>
    <h1>Cursos y totales de la oferta</h1>
    <p>Si la tabla no cabe, enfoca su región con Tab y usa
      las flechas izquierda y derecha para desplazarte.</p>
    <div class="cursos-scroll" role="region" tabindex="0"
         aria-label="Oferta de cursos con desplazamiento horizontal">
      <table class="cursos">
        <caption>Cursos: duración en horas y plazas disponibles</caption>
        <thead>
          <tr>
            <th scope="col">Curso</th>
            <th scope="col">Horas</th>
            <th scope="col">Plazas</th>
          </tr>
        </thead>
        <tbody>
          <tr><th scope="row">HTML básico</th><td>12</td><td>20</td></tr>
          <tr><th scope="row">CSS</th><td>16</td><td>15</td></tr>
          <tr><th scope="row">JavaScript</th><td>20</td><td>12</td></tr>
        </tbody>
        <tfoot>
          <tr><th scope="row">Total de la oferta</th><td>48</td><td>47</td></tr>
        </tfoot>
      </table>
    </div>
    <p>Las 48 horas suman las duraciones de los tres cursos.
      Las 47 plazas suman sus cupos, no personas únicas.</p>
  </body>
</html>

Verás tres filas de datos y un pie con fondo azul claro, negrita y una línea superior gruesa. El rótulo «Total de la oferta» comunica el resumen sin depender del color. Comprueba los cálculos: 12 + 16 + 20 = 48 horas y 20 + 15 + 12 = 47 plazas. En móvil, la región permite leer las columnas desplazándola; con teclado, llega mediante Tab y usa las flechas.

¿Tfoot calcula los totales?

No. Cambia las horas de CSS de 16 a 18: el pie seguirá mostrando 48 hasta que lo actualices a 50. Si una aplicación recalcula valores con JavaScript o en el servidor, esa operación pertenece a su código, no al elemento HTML.

Para comparar la agrupación, sustituye <tfoot> y </tfoot> por <tbody> y </tbody>. El resumen conserva su texto y sus cifras, pero pasa a ser otro cuerpo de datos y deja de recibir el selector CSS del pie. Si retiras las etiquetas del pie, mueve también su fila al final del <tbody> existente: así mantienes un contexto válido, aunque pierdes el grupo específico de resumen. Retirar solo el CSS conserva la estructura y los valores, pero elimina sus bordes y colores personalizados.

Cómo probar la impresión

Abre la vista previa con Ctrl + P, o Cmd + P en macOS, y revisa que aparezcan las tres columnas y ambos totales. El bloque @media print evita que el desplazamiento horizontal recorte la tabla y permite ajustar su ancho al papel.

Para explorar varias páginas, trabaja en una copia: sustituye las tres filas de <tbody> por 30 copias de ese bloque, es decir, 90 filas. Actualiza las cifras del pie a 1440 horas y 1410 plazas y adapta el párrafo explicativo. Revisa en la vista previa dónde aparece el pie y si se repite. Un pie repetido mantiene el total global escrito; no calcula subtotales por página.

La especificación CSS sobre grupos de pie permite a los navegadores repetir esas filas al imprimir una tabla de varias páginas. La repetición depende del motor, los estilos y la configuración de impresión; <tfoot> no garantiza el mismo resultado en todas las impresoras o navegadores. Comprueba la salida que vayas a entregar.

Atributos y asociaciones accesibles

<tfoot> no tiene atributos específicos vigentes; admite globales como id, class o lang. Evita los antiguos align, bgcolor, char, charoff y valign, recogidos como obsoletos por MDN. Para presentación, usa propiedades CSS como text-align, background-color o vertical-align en las celdas.

scope pertenece a <th>, no a <tfoot>. En el ejemplo, scope="col" identifica las columnas y scope="row" relaciona «Total de la oferta» con los dos valores de su fila. <caption> identifica la tabla y documenta sus unidades. Estas asociaciones siguen la guía de tablas con encabezados de fila y columna de W3C WAI.

El grupo de pie no sustituye esos encabezados ni garantiza un anuncio idéntico en todos los lectores de pantalla. La región enfocada del ejemplo sirve para desplazar la tabla; no transforma sus celdas en controles interactivos.

Errores frecuentes y etiquetas relacionadas

• Colocar el pie antes de <tbody> siguiendo un ejemplo antiguo: escribe los datos primero y el resumen después.
• Crear varios <tfoot> para varios totales: reúne sus filas en el mismo pie.
• Escribir <td> directamente en <tfoot>: crea primero una fila <tr>.
• Cambiar un dato y olvidar el total: revisa manualmente las sumas o actualízalas con el código de tu aplicación.
• Dar solo color al total: conserva un encabezado escrito que explique qué resume y sus unidades.

Consulta <table> para la estructura completa y la guía de <tbody> para los grupos de datos. <tr> crea cada fila y <th> proporciona sus encabezados; se usan dentro del pie, sin reemplazarlo.

Compatibilidad y fuentes

<tfoot> es un elemento ampliamente disponible en los navegadores actuales, según MDN, consultado el 4 de octubre de 2026. Su soporte básico es distinto del comportamiento de impresión: prueba la paginación y la posible repetición en el navegador que utilizarás.

El significado, el orden y la omisión del cierre se contrastaron con el HTML Living Standard; los atributos antiguos y la compatibilidad, con MDN. Los enlaces de las secciones anteriores permiten consultar cada detalle en su fuente.