Lección 9: Tablas en HTML

Introducción a las tablas en HTML

Las tablas en HTML se utilizan para presentar datos en filas y columnas. Son útiles para mostrar información estructurada de manera clara y organizada.

Estructura básica de una tabla

Una tabla en HTML se compone de los siguientes elementos principales:

<table>: Define la tabla.
<tr>: Define una fila (table row).
<th>: Define una celda de encabezado (table header).
<td>: Define una celda de datos (table data).

Ejemplo de una tabla simple:

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Fila 1, Celda 1</td>
    <td>Fila 1, Celda 2</td>
  </tr>
  <tr>
    <td>Fila 2, Celda 1</td>
    <td>Fila 2, Celda 2</td>
  </tr>
</table>

Resultado:

Encabezado 1	Encabezado 2
Fila 1, Celda 1	Fila 1, Celda 2
Fila 2, Celda 1	Fila 2, Celda 2

Elementos adicionales de tabla

<caption>: Proporciona un título o leyenda para la tabla.
<thead>: Agrupa el contenido del encabezado de la tabla.
<tbody>: Agrupa el contenido principal de la tabla.
<tfoot>: Agrupa el contenido del pie de la tabla.

Ejemplo de una tabla con estos elementos:

<table>
  <caption>Horario de Clases</caption>
  <thead>
    <tr>
      <th>Hora</th>
      <th>Lunes</th>
      <th>Martes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9:00</td>
      <td>Matemáticas</td>
      <td>Literatura</td>
    </tr>
    <tr>
      <td>10:00</td>
      <td>Ciencias</td>
      <td>Historia</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Horario sujeto a cambios</td>
    </tr>
  </tfoot>
</table>

Resultado:

Horario de Clases
Hora	Lunes	Martes
9:00	Matemáticas	Literatura
10:00	Ciencias	Historia
Horario sujeto a cambios

Combinación de celdas

Puedes combinar celdas horizontal o verticalmente usando los atributos colspan y rowspan:

colspan: Combina celdas horizontalmente.
rowspan: Combina celdas verticalmente.

Ejemplo:

<table>
  <tr>
    <th colspan="2">Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td rowspan="2">43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
  </tr>
</table>

Resultado:

Nombre		Edad
Jill	Smith	43
Eve	Jackson	43

Ejercicio práctico

Crea una tabla que represente un horario semanal simple. Debe incluir:

Un título usando <caption>
Encabezados para los días de la semana (Lunes a Viernes)
Al menos 3 filas de horarios
Usa <thead>, <tbody> y <tfoot>
Incluye al menos una celda combinada con colspan o rowspan