Elementos table, tbody, thead, tfoot, tr, th y td en HTML

Elementos table, tbody, thead, tfoot, tr, th y td en HTML

Las tablas en HTML se utilizan para presentar datos en un formato tabular. Los elementos principales son:

• <table>: define la tabla.
• <tbody>: agrupa el cuerpo de la tabla.
• <thead>: agrupa el encabezado de la tabla.
• <tfoot>: agrupa el pie de la tabla.
• <tr>: define una fila de la tabla.
• <th>: define una celda de encabezado en la tabla.
• <td>: define una celda de datos en la tabla.
• <caption>: proporciona un título para la tabla.
• <col>: define columnas en una tabla.
• <colgroup>: agrupa columnas en una tabla.
• <summary>: proporciona un resumen de la tabla.

Las tablas en HTML se construyen usando el elemento principal <table>, que contiene otros elementos como <tr> para filas, <th> para encabezados y <td> para celdas de datos. Los elementos <thead>, <tbody> y <tfoot> se utilizan para organizar el contenido de la tabla en secciones lógicas.

Ejemplo de tabla simple

<table>
  <tr>
    <th>Nombre</th>
    <th>Carrera</th>
    <th>Año</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Ingeniería en Sistemas</td>
    <td>2025</td>
  </tr>
</table>

Ejemplo de tabla con encabezados y pie de tabla

<table>
  <caption>Lista de estudiantes</caption>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Carrera</th>
      <th>Año</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>Ingeniería en Sistemas</td>
      <td>2025</td>
    </tr>
    <tr>
      <td>Juan</td>
      <td>Arquitectura</td>
      <td>2024</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total de estudiantes: 2</td>
    </tr>
  </tfoot>
</table>

Atributos comunes de las tablas

En la actualidad se recomienda usar estilos CSS para dar formato a las tablas, pero HTML también ofrece algunos atributos que pueden ser útiles:

• border: define el borde de la tabla.
• colspn: especifica cuántas columnas debe abarcar una celda.
• rowspan: especifica cuántas filas debe abarcar una celda.

<table border="1">
  <tr>
    <th rowspan="2">Facultad</th>
    <th colspan="2">Carreras</th>
  </tr>
  <tr>
    <th>Licenciatura</th>
    <th>Ingeniería</th>
  </tr>
  <tr>
    <td>UES</td>
    <td>Economía</td>
    <td>Computación</td>
  </tr>
</table>

<table>
  <caption>Listado de carreras UES</caption>
  <thead>
    <tr>
      <th>Facultad</th>
      <th>Carrera</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jurisprudencia</td>
      <td>Derecho</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Fuente: UES</td>
    </tr>
  </tfoot>
</table>

Ejemplo de tabla con agrupación de columnas y filas col, colgroup, summary

<table summary="Tabla de ejemplo con agrupación de columnas y filas">
  <caption>Tabla de ejemplo</caption>
  <colgroup>
    <col style="background-color: #f2f2f2">
    <col style="background-color: #e6e6e6">
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">Datos Personales</th>
    </tr>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Juan</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total de registros: 2</td>
    </tr>
  </tfoot>
</table>