Estructura de tablas en HTML

Las tablas HTML permiten organizar información en filas y columnas. Se utilizan, por ejemplo, para mostrar inventarios, reportes o listas de registros.

Estructura básica

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Precio</th>
      <th>Existencia</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Teclado</td>
      <td>15000</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>8000</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

¿Qué hace cada etiqueta?

Etiqueta	Función
<table>	Define la tabla completa.
<thead>	Agrupa la sección de encabezados.
<tbody>	Agrupa las filas con los datos.
<tr>	Define una fila (table row).
<th>	Define una celda de encabezado (table header).
<td>	Define una celda de datos (table data).
<tfoot>	Agrupa el pie de la tabla, si se necesita.
<caption>	Define el título o descripción de la tabla.

Ejemplo con título y pie

<table>
  <caption>Inventario de productos</caption>

  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Monitor</td>
      <td>85000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Total de productos</td>
      <td>1</td>
    </tr>
  </tfoot>
</table>

Truco para recordarlo

Piensa en la estructura así:

• table: la tabla completa.
• thead: los encabezados.
• tbody: los datos.
• tr: cada fila.
• th o td: las celdas dentro de cada fila.

Regla clave: dentro de una fila (tr) colocas las celdas (th o td); las filas se organizan dentro de la tabla.