La Etiqueta TFOOT

Se utiliza para definir el pie de una tabla HTML, donde se suelen incluir resúmenes o totales de los datos mostrados.

La etiqueta <tfoot> se utiliza para definir el pie de una tabla HTML, donde se suelen incluir resúmenes o totales de los datos mostrados (como sumatorias, promedios, o notas explicativas). Junto con <thead> (encabezados) y <tbody> (cuerpo), mejora la semántica, accesibilidad y organización de la información tabular. Aquí te explicamos cómo usarla correctamente.

¿Qué es `<tfoot>`?

Propósito: Agrupar filas que representan el pie de una tabla, generalmente con datos resumidos.
Semántica: Ayuda a navegadores, lectores de pantalla y motores de búsqueda a entender la estructura de la tabla.
Posición en el HTML: Aunque visualmente el pie aparece al final, en el código puede colocarse antes de <tbody> (los navegadores lo renderizan correctamente).

Estructura básica de una tabla con `<tfoot>`

<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$800</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>$300</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$1100</td>
    </tr>
  </tfoot>
</table>

Resultado:

Producto	Precio
Laptop	$800
Tablet	$300
Total	$1100

Casos de uso

a) Resúmenes numéricos

<tfoot>
  <tr>
    <td>Subtotal</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>Impuestos (10%)</td>
    <td>$100</td>
  </tr>
  <tr>
    <td><strong>Total</strong></td>
    <td><strong>$1100</strong></td>
  </tr>
</tfoot>

b) Notas explicativas

<tfoot>
  <tr>
    <td colspan="2">* Precios incluyen IVA.</td>
  </tr>
</tfoot>

Atributos clave

colspan: Combina celdas horizontalmente (útil para notas que abarcan varias columnas).
rowspan: Combina celdas verticalmente (menos común en <tfoot>).
scope (en <th>): Indica si un encabezado corresponde a una columna (col) o fila (row).

Ejemplo con colspan:

<tfoot>
  <tr>
    <td colspan="2">Promoción válida hasta el 31/12/2023.</td>
  </tr>
</tfoot>

Estilización con CSS

Aplica estilos específicos al pie de la tabla:

tfoot {
  background: #f8f9fa;     /* Fondo */
  font-weight: bold;       /* Texto en negrita */
}

tfoot td {
  border-top: 2px solid #000; /* Borde superior */
  padding: 10px;
}

Ejemplo:

<tfoot style="background: #e9ecef;">
  <tr>
    <td>Total</td>
    <td>$1100</td>
  </tr>
</tfoot>

Accesibilidad

Lectores de pantalla: Reconocen <tfoot> para identificar resúmenes.
Encabezados claros: Usa <th> en lugar de <td> para etiquetas en el pie si corresponden a encabezados.
Atributos ARIA: En casos complejos, usa role="row" y role="cell".

Ejemplo accesible:

<tfoot>
  <tr role="row">
    <th scope="row" role="cell">Total</th>
    <td role="cell">$1100</td>
  </tr>
</tfoot>

Buenas prácticas

Orden lógico:

<table>
  <thead>...</thead>
  <tfoot>...</tfoot> <!-- Puede ir antes de tbody -->
  <tbody>...</tbody>
</table>

Evita contenido no relacionado: <tfoot> debe contener solo resúmenes o notas del cuerpo.

No uses <tfoot> para maquetación: Solo para datos tabulares.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    table {
      width: 80%;
      border-collapse: collapse;
      margin: 20px auto;
      font-family: Arial;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
    }
    th {
      background: #007bff;
      color: white;
    }
    tfoot {
      background: #f8f9fa;
    }
    tfoot td {
      font-weight: bold;
      border-top: 2px solid #007bff;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Producto</th>
        <th>Precio</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Total</td>
        <td>$1100</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Laptop</td>
        <td>$800</td>
      </tr>
      <tr>
        <td>Tablet</td>
        <td>$300</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Resultado:

Producto	Precio
Laptop	$800
Tablet	$300
Total	$1100

Errores comunes

Contenido irrelevante:

<tfoot>
  <tr>
    <td>Publicidad</td>
    <td><img src="anuncio.jpg"></td>
  </tr>
</tfoot>

Estructura incorrecta:

<tfoot>
  <div>...</div> <!-- Solo <tr> permitidos -->
</tfoot>

Conclusión

La etiqueta <tfoot> es esencial para:

Organizar datos resumidos en tablas.
Mejorar la accesibilidad para usuarios y tecnologías de asistencia.
Mantener una estructura semántica clara.

Recuerda:

Usa <tfoot> junto con <thead> y <tbody>.
Aplica estilos CSS para destacar el pie de tabla.
Evita usos incorrectos como maquetación no tabular.

¡Ahora puedes implementar tablas profesionales y accesibles con <tfoot>!

¿Qué es <tfoot>?

Estructura básica de una tabla con <tfoot>