Sesión 4 – Tablas HTML - Curso HTML & CSS

1

TeoríaTablas para datos tabulares

¿Cuándo usar tablas?

Las tablas HTML se utilizan para mostrar datos tabulares (información que se organiza naturalmente en filas y columnas). No deben usarse para maquetar la página (para eso existe CSS).

Etiquetas de tabla

<table> — Contenedor principal de la tabla.
<tr> (table row) — Define una fila.
<td> (table data) — Define una celda de datos.
<th> (table header) — Define una celda de encabezado (se muestra en negrita y centrado por defecto).
<caption> — Título descriptivo de la tabla (mejora la accesibilidad).
<thead> — Agrupa las filas de encabezado.
<tbody> — Agrupa las filas de datos.
<tfoot> — Agrupa las filas de pie de tabla.

Fusión de celdas

colspan="N" — La celda ocupa N columnas.
rowspan="N" — La celda ocupa N filas.

tbl

<table>

Contenedor principal que envuelve toda la tabla.

tr

<tr>

Define una fila dentro de la tabla.

td

<td> / <th>

Celda de datos o celda de encabezado.

col

colspan / rowspan

Fusiona celdas horizontal o verticalmente.

2

Ejemplos de códigoTablas básicas y fusión de celdas

Tabla básica con caption, thead, tbody

<table>
    <caption>Horario semanal</caption>
    <thead>
        <tr>
            <th>Hora</th>
            <th>Lunes</th>
            <th>Martes</th>
            <th>Miércoles</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>08:00 - 09:00</td>
            <td>Matemáticas</td>
            <td>Lengua</td>
            <td>Historia</td>
        </tr>
        <tr>
            <td>09:00 - 10:00</td>
            <td>Ciencias</td>
            <td>Inglés</td>
            <td>Educación Física</td>
        </tr>
        <tr>
            <td>10:00 - 11:00</td>
            <td>Informática</td>
            <td>Matemáticas</td>
            <td>Ciencias</td>
        </tr>
    </tbody>
</table>

Ejemplo con colspan

<table>
    <caption>Ejemplo de fusión de celdas</caption>
    <tr>
        <th>Nombre</th>
        <th colspan="2">Contacto</th>
    </tr>
    <tr>
        <td>Ana García</td>
        <td>ana@correo.com</td>
        <td>612 345 678</td>
    </tr>
</table>

Ejemplo con rowspan

<table>
    <tr>
        <th>Departamento</th>
        <th>Nombre</th>
        <th>Puesto</th>
    </tr>
    <tr>
        <td rowspan="2">Ingeniería</td>
        <td>Carlos</td>
        <td>Desarrollador</td>
    </tr>
    <tr>
        <td>María</td>
        <td>Diseñadora UX</td>
    </tr>
    <tr>
        <td rowspan="2">Marketing</td>
        <td>Pedro</td>
        <td>Director</td>
    </tr>
    <tr>
        <td>Laura</td>
        <td>Community Manager</td>
    </tr>
</table>

3

PruébaloVe las tablas renderizadas

Tabla horario

<table>
  <caption>Horario</caption>
  <thead>
    <tr>
      <th>Hora</th>
      <th>Lunes</th>
      <th>Martes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>08:00</td>
      <td>Mates</td>
      <td>Lengua</td>
    </tr>
    <tr>
      <td>09:00</td>
      <td>Ciencias</td>
      <td>Inglés</td>
    </tr>
  </tbody>
</table>

Resultado en el navegador

Horario semanal
Hora	Lunes	Martes	Miércoles
08:00 - 09:00	Matemáticas	Lengua	Historia
09:00 - 10:00	Ciencias	Inglés	Ed. Física
10:00 - 11:00	Informática	Matemáticas	Ciencias

Tabla con rowspan

<table>
  <tr>
    <th>Depto</th>
    <th>Nombre</th>
    <th>Puesto</th>
  </tr>
  <tr>
    <td rowspan="2">Ing.</td>
    <td>Carlos</td>
    <td>Dev</td>
  </tr>
  <tr>
    <td>María</td>
    <td>UX</td>
  </tr>
</table>

Resultado en el navegador

Departamento	Nombre	Puesto
Ingeniería	Carlos	Desarrollador
Ingeniería	María	Diseñadora UX
Marketing	Pedro	Director
Marketing	Laura	Community Manager

4

Ejercicio prácticoPon en práctica lo aprendido

Crea tablas con datos

En tu página index.html, añade una sección con un título <h2> que diga «Mi horario».
Crea una tabla con los días de la semana como encabezados de columna y las horas como encabezados de fila.
Rellena la tabla con asignaturas o actividades.
Añade una etiqueta <caption> descriptiva.
Utiliza colspan para fusionar celdas cuando una actividad ocupe varias columnas (por ejemplo, una excursión que dure toda la mañana).
Utiliza rowspan para fusionar celdas cuando una actividad ocupe varias horas seguidas.
Crea una segunda tabla con una lista de contactos (nombre, correo electrónico, teléfono).