Módulo 5: Tablas en HTML

En esta lección aprenderás a crear tablas en HTML para organizar información de forma clara y estructurada.

¿Qué es una tabla en HTML?

Una tabla se usa para mostrar datos en filas y columnas. En HTML usamos estas etiquetas principales:

<table> – define la tabla.
<tr> – define una fila (table row).
<th> – define un encabezado de columna.
<td> – define una celda de datos.

Estructura básica de una tabla

<table border="1">
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Luis</td>
        <td>30</td>
    </tr>
</table>

Salida:

Nombre	Edad
Ana	25
Luis	30

Secciones de una tabla

HTML permite dividir las tablas en tres secciones:

<thead> – Encabezado de la tabla.
<tbody> – Cuerpo de la tabla.
<tfoot> – Pie de la tabla.

<table border="1">
    <thead>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$800</td>
        </tr>
        <tr>
            <td>Tablet</td>
            <td>$300</td>
        </tr>
    </tbody>
</table>

Buenas prácticas con tablas

Usa <th> para los encabezados de columna, mejora la accesibilidad.
Evita usar tablas para diseñar la página (usa CSS en su lugar).
Usa border-collapse: collapse; en CSS para bordes más limpios.
Incluye caption (título de la tabla) cuando sea útil.

Preguntas de Repaso

Pregunta 1

¿Qué etiqueta se usa para crear una fila en una tabla?

A) <td>
B) <tr>
C) <th>
D) <row>

Pregunta 2

¿Qué etiqueta se usa para los encabezados de una tabla?

A) <td>
B) <th>
C) <thead>
D) <header>

Pregunta 3

¿Qué etiqueta agrupa el contenido principal de una tabla?

A) <thead>
B) <tbody>
C) <tfoot>
D) <tr>

Pregunta 4

¿Cuál de estas NO es una buena práctica?

A) Usar tablas solo para datos
B) Usar CSS para estilos de tablas
C) Usar tablas para hacer el diseño completo de la web
D) Usar <th> para encabezados

Pregunta 5

¿Qué etiqueta puedes usar para poner un título a la tabla?

A) <caption>
B) <title>
C) <th>
D) <summary>

Esta lección forma parte del curso básico de HTML. En la siguiente, aprenderás sobre formularios en HTML y cómo recoger información del usuario.

Universo de unos y ceros

Módulo 5: Tablas en HTML