Comencemos hablando sobre las tablas. En particular, se analizará la siguiente organización de texto:

Tablas

Las tablas en HTML se utilizan para mostrar datos en filas y columnas, proporcionando una forma estructurada de organizar la información.

Creación de tablas

La etiqueta <table> se utiliza para crear una tabla en HTML. Las tablas se componen de filas (<tr>) y celdas (<td>), que definen la estructura y el contenido de la tabla. La estructura básica de una tabla será la siguiente.
Ejemplo:

En el ejemplo anterior:

• La etiqueta <table> se utiliza para crear una tabla;
• Cada etiqueta <tr> representa una fila en la tabla;
• Dentro de cada fila, las etiquetas <td> representan celdas, definiendo el contenido de cada celda.

Aunque podríamos dejar de trabajar con tablas aquí, podemos mejorar su semántica para facilitar que los motores de búsqueda comprendan su contenido.

Encabezados de tabla

La etiqueta <th> define los encabezados de tabla que representan los títulos de columnas o filas. Debe utilizarse dentro de la sección <thead> de una tabla.
Ejemplo:

En el ejemplo anterior:

• La sección <thead> contiene celdas de encabezado de tabla definidas usando la etiqueta <th>;
• Cada etiqueta <th> representa una celda de encabezado.

Cuerpo de la tabla

La sección tbody debe ir después de la sección thead y envolver todos los datos de la tabla excepto los encabezados. Todos los elementos dentro de tbody permanecen igual.
Ejemplo:

Resumen

Las tablas se estructuran con una jerarquía de elementos:

1. Tabla

La etiqueta <table> es el elemento principal que define toda la tabla. Contiene todas las filas y columnas de la tabla.

<table></table>

2. Encabezado de la tabla

La etiqueta <thead> se utiliza para agrupar las filas de encabezado de la tabla. Contiene una o más filas (<tr>) de celdas de encabezado (<th>), que definen los títulos de las columnas.

<table>
  <thead></thead>
</table>

3. Cuerpo de la tabla

La etiqueta <tbody> se utiliza para agrupar las filas principales de contenido de la tabla. Contiene una o más filas (<tr>) de celdas de datos (<td>), que definen el contenido principal de la tabla.

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

4. Filas de la tabla

La etiqueta <tr> representa una fila dentro de la tabla. Contiene una o más celdas de tabla (<td> o <th>), que definen el contenido de cada columna dentro de la fila.

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

5. Celdas de tabla

La etiqueta <td> representa una celda de datos estándar dentro del cuerpo de la tabla. La etiqueta <th> representa una celda de encabezado dentro del encabezado de la tabla. Cada celda contiene el contenido real de la tabla, como texto, imágenes u otros elementos HTML.

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Tutorial en video