HTML 04: Tablas - Kit de Aprendizaje

1. Estructura Básica de una Tabla

Una tabla se define con <table>.

<tr> (Table Row): Define una fila.
<th> (Table Header): Define una celda de encabezado (negrita y centrada por defecto).
<td> (Table Data): Define una celda de datos normal.

Tabla Simple

Nombre	Edad	Ciudad
Ana	25	Madrid
Luis	30	Barcelona

Código:

<table>

    <tr>

        <th>Nombre</th>

        <th>Edad</th>

        <th>Ciudad</th>

    </tr>

    <tr>

        <td>Ana</td>

        <td>25</td>

        <td>Madrid</td>

    </tr>

    <tr>

        <td>Luis</td>

        <td>30</td>

        <td>Barcelona</td>

    </tr>

</table>

2. Secciones de la Tabla (Semántica)

Para tablas largas, es bueno agrupar las filas.

<thead>: Cabecera de la tabla.
<tbody>: Cuerpo de la tabla (datos).
<tfoot>: Pie de la tabla (totales, resúmenes).

Tabla Estructurada

Producto	Precio
Manzanas	2€
Naranjas	3€
Total	5€

Código:

<table>

    <thead>

        <tr>

            <th>Producto</th>

            <th>Precio</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Manzanas</td>

            <td>2€</td>

        </tr>

        <tr>

            <td>Naranjas</td>

            <td>3€</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <th>Total</th>

            <th>5€</th>

        </tr>

    </tfoot>

</table>

3. Combinar Celdas (Rowspan y Colspan)

A veces una celda debe ocupar más de una fila o columna.

rowspan="2": Ocupa 2 filas verticales.
colspan="2": Ocupa 2 columnas horizontales.

Tabla Compleja

Día	Hora	Actividad
Lunes	10:00	Reunión
Lunes	12:00	Comida
Martes	Día Libre (ocupa Hora y Actividad)

Código:

<table>

    <tr>

        <th>Día</th>

        <th>Hora</th>

        <th>Actividad</th>

    </tr>

    <tr>

        <td rowspan="2">Lunes</td>

        <td>10:00</td>

        <td>Reunión</td>

    </tr>

    <tr>

        <!-- La celda de "Lunes" ocupa esta fila también -->

        <td>12:00</td>

        <td>Comida</td>

    </tr>

    <tr>

        <td>Martes</td>

        <td colspan="2">Día Libre</td>

    </tr>

</table>

Combinación Simultánea

Una misma celda puede expandirse en ambas direcciones a la vez.

Hora	Lunes	Martes	Miércoles
09:00	Taller Intensivo		Estudio
10:00	Taller Intensivo		Examen
11:00	Libre	Libre	Libre

Código:

<table>

    <tr>

        <th>Hora</th>

        <th>Lunes</th>

        <th>Martes</th>

        <th>Miércoles</th>

    </tr>

    <tr>

        <td>09:00</td>

        <td rowspan="2" colspan="2">Taller Intensivo</td>

        <td>Estudio</td>

    </tr>

    <tr>

        <td>10:00</td>

        <!-- Lunes y Martes ocupados -->

        <td>Examen</td>

    </tr>

    <tr>

        <td>11:00</td>

        <td>Libre</td>

        <td>Libre</td>

        <td>Libre</td>

    </tr>

</table>