Comencemos discutiendo las tablas. Específicamente, examinaremos 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 están compuestas por filas (<tr>) y celdas (<td>), que definen la estructura y el contenido de la tabla. La estructura básica de la 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 encabezados de columna o fila. Debe usarse 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 venir después de la sección thead y envolver todos los datos de la tabla excepto los encabezados. Todos los elementos dentro del tbody permanecen igual.
Ejemplo:

Resumiendo

Las tablas están estructuradas con una jerarquía de elementos:

1. Tabla

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

2. Encabezado de 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>), definiendo los encabezados de columna.

3. Cuerpo de la Tabla

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

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>), definiendo el contenido de cada columna dentro de la fila.

5. Celdas de la 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.

Tutorial en Video