Tablas

Organiza datos tabulares con table, thead, tbody, tr, th, td y celdas combinadas.

📖

Teoría

Las tablas son para datos tabulares (no para layout). Estructura básica:

<table> → Contenedor de la tabla

<thead> → Cabecera (filas de encabezado)

<tbody> → Cuerpo de datos

<tr> → Fila (Table Row)

<th> → Celda de encabezado (Table Header)

<td> → Celda de datos (Table Data)

colspan / rowspan → Combinar celdas

html

<table>
  <thead>
    <tr>
      <th>Materia</th>
      <th>Lunes</th>
      <th>Miércoles</th>
      <th>Viernes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Programación Web</td>
      <td>8:00 AM</td>
      <td>8:00 AM</td>
      <td colspan="1">—</td>
    </tr>
    <tr>
      <td>Bases de Datos</td>
      <td colspan="2">10:00 AM - 12:00 PM</td>
      <td>10:00 AM</td>
    </tr>
  </tbody>
</table>

⚠️Tablas no son para layout

Antes de CSS, se usaban tablas para crear layouts de páginas. Esto era una mala práctica. Hoy usa Flexbox y CSS Grid para layouts, y reserva <table> solo para datos realmente tabulares como horarios, reportes y comparaciones.

⚡

Ejercicio práctico

🎯 Tu misión

Crea una tabla de horario de clases para una semana universitaria. Filas = bloques horarios, Columnas = días. Usa colspan para materias que duran más de un bloque.

Vista previa

←Capítulo anterior

Siguiente capítulo→