Crear una Tabla en HTML

Untitled

Untitled

Untitled

Untitled

1. <table>: Es el contenedor principal de la tabla. Todo el contenido de la tabla debe estar dentro de este elemento.

2. <thead> (Table Head): Agrupa el conjunto de filas del encabezado de la tabla.

3. <tbody> (Table Body): Agrupa el conjunto de filas del cuerpo de la tabla.

4. <tfoot> (Table Foot): Agrupa el conjunto de filas del pie de la tabla, que suele contener resúmenes o totales.

5. <tr> (Table Row): Define una fila en la tabla. Cada fila de la tabla se crea con un elemento <tr>.

6. <th> (Table Header): Define una celda de cabecera en una fila. Estas celdas suelen contener encabezados para las columnas y, por defecto, su texto aparece en negrita y centrado.

7. <td> (Table Data): Define una celda de datos en una fila. Estas celdas contienen los datos de la tabla.

Vamos a ver cómo se combinan estos elementos para crear una tabla completa.

Primero, definimos la estructura básica de la tabla con el elemento <table>:

Dentro de la tabla, agregamos las secciones usando <thead>, <tbody> y <tfoot>:

Dentro de <thead>, agregamos filas de cabecera con el elemento <tr> y celdas de cabecera con <th>:

Dentro de <tbody>, agregamos filas de datos con el elemento <tr> y celdas de datos con <td>:

Dentro de <tfoot>, agregamos filas de pie de tabla con el elemento <tr> y celdas de datos o cabecera con <td> o <th> según corresponda:

Aquí tienes un ejemplo completo de una tabla simple en HTML con todas las secciones:

1. Cabecera de la Tabla:

2. Cuerpo de la Tabla:

3. Pie de la Tabla:

4. Estilos CSS: