La Etiqueta TBODY

Se utiliza en HTML para agrupar las filas que contienen datos principales dentro de una tabla.

La etiqueta <tbody> (cuerpo de la tabla) se utiliza en HTML para agrupar las filas que contienen datos principales dentro de una tabla (<table>). Junto con <thead> (encabezados) y <tfoot> (pie), mejora la semántica, accesibilidad y organización de la información. Aquí te explicamos cómo usarla correctamente.

¿Qué es `<tbody>`?

Propósito: Define el bloque de filas que representan el contenido central de una tabla.
Semántica: Ayuda a navegadores, lectores de pantalla y motores de búsqueda a entender la estructura de los datos.
Uso implícito: Si no se especifica <tbody>, el navegador agrupa automáticamente todas las filas dentro de uno. Sin embargo, es buena práctica incluirlo explícitamente.

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

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

Resultado:

Producto	Precio
Laptop	$800
Teléfono	$300
Total	$1100

Casos de uso

a) Agrupar datos principales

Envuelve todas las filas de datos entre <tbody>:

<table>
  <thead>...</thead>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

b) Múltiples `<tbody>` para secciones

Divide los datos en grupos lógicos:

<table>
  <thead>
    <tr><th>País</th><th>Población</th></tr>
  </thead>
  <tbody>
    <tr><td>México</td><td>126M</td></tr>
    <tr><td>Colombia</td><td>51M</td></tr>
  </tbody>
  <tbody>
    <tr><td>Argentina</td><td>45M</td></tr>
    <tr><td>Chile</td><td>19M</td></tr>
  </tbody>
</table>

Estilización con CSS

Aplica estilos específicos al cuerpo de la tabla:

tbody {
  background: #f9f9f9; /* Fondo del cuerpo */
}

tbody tr:hover {
  background: #e0f7fa; /* Efecto hover */
}

tbody tr:nth-child(even) {
  background: #f0f0f0; /* Filas alternas */
}

Accesibilidad

Lectores de pantalla: Reconocen <tbody> para navegar entre secciones.

Atributos ARIA: Usa role="rowgroup" si es necesario:

<tbody role="rowgroup">
  <tr>...</tr>
</tbody>

Buenas prácticas

Orden de etiquetas:
<thead> → <tbody> → <tfoot> (aunque visualmente <tfoot> puede aparecer al final).
No anidar tablas: Evita colocar otra <table> dentro de <tbody>.
Contenido obligatorio: <tbody> debe contener al menos una fila (<tr>).

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: 12px;
      text-align: left;
    }
    th {
      background: #2ecc71;
      color: white;
    }
    tbody tr:nth-child(even) {
      background: #f9f9f9;
    }
    tbody tr:hover {
      background: #f1f1f1;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>País</th>
        <th>Capital</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>México</td>
        <td>Ciudad de México</td>
      </tr>
      <tr>
        <td>España</td>
        <td>Madrid</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Total: 2 países</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Resultado:

País	Capital
México	Ciudad de México
España	Madrid
Total: 2 países

Errores comunes

Etiquetas fuera de orden:

<table>
  <tbody>...</tbody>
  <thead>...</thead>
</table>

Contenido vacío:

<tbody></tbody> <!-- Falta <tr> -->

Conclusión

La etiqueta <tbody> es clave para:

Organizar datos tabulares de manera semántica.
Facilitar el estilo y la accesibilidad.
Separar secciones lógicas en tablas complejas.

Recuerda:

Usa <thead>, <tbody>, y <tfoot> para estructurar claramente.
Evita atributos obsoletos como align o bgcolor (mejor CSS).
Prioriza la claridad y la accesibilidad en tus tablas.

¡Ahora puedes crear tablas bien estructuradas y profesionales con <tbody>!

¿Qué es <tbody>?

Estructura básica de una tabla con <tbody>