Cómo Crear Tablas en HTML: Guía Paso a Paso con Ejemplos Prácticos

Introducción:
¿Quieres aprender a crear tablas en HTML desde cero? ¡Estás en el lugar correcto! En este artículo vamos a ver cómo estructurar correctamente una tabla HTML5, desde los elementos básicos como <table>, <tr>, <td> y <th>, hasta el uso de atributos avanzados como colspan y rowspan. Este tutorial está basado en un vídeo práctico y directo, ideal para quienes están empezando o necesitan repasar. ¡Vamos a ello!

Sección 1: Creando un documento HTML para tablas
Comenzamos creando un nuevo archivo HTML5, al que llamamos tablas.html. Este archivo tendrá una estructura básica con su etiqueta <title> donde escribimos “Tablas”. Luego, desde el index.html principal, añadimos un nuevo enlace de navegación que nos dirija a este nuevo archivo. Esto lo hacemos insertando un elemento <li> con un <a href="tablas.html">Tablas</a>.

Para mantener la navegación manual entre páginas (como en los primeros ejercicios), copiamos el encabezado (<header>) del documento principal y lo pegamos en el nuevo archivo. Esto asegura que al acceder a “Tablas” desde el menú, veamos el diseño habitual del sitio.

Sección 2: Estructura básica de una tabla HTML
Dentro del nuevo documento, insertamos una etiqueta <section> con un encabezado <h1> que dice “Tablas en HTML”. A continuación, comenzamos a construir una tabla con la etiqueta <table> y le añadimos un border="1" para que se visualice fácilmente (aunque más adelante se recomienda usar CSS).

La estructura básica incluye:

• <thead>: para los encabezados de columna.
• <tr>: define una fila.
• <th>: define una celda de encabezado.
• <tbody>: contiene los datos reales.
• <td>: define una celda de datos.

Ejemplo de encabezado:

<thead>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>Profesión</th>
  </tr>
</thead>

Ejemplo de datos:

<tbody>
  <tr>
    <td>Ana Pérez</td>
    <td>28</td>
    <td>Desarrolladora</td>
  </tr>
  <tr>
    <td>Carlos Ruiz</td>
    <td>34</td>
    <td>Diseñador</td>
  </tr>
</tbody>

Sección 3: Uso de colspan y rowspan en tablas HTML
Para avanzar un poco más, añadimos un nuevo ejemplo con un <h2> titulado “Colspan y Rowspan”. Estos atributos permiten combinar celdas verticalmente (rowspan) y horizontalmente (colspan), lo cual es muy útil, por ejemplo, para crear cabeceras complejas o estructuras como horarios.

Ejemplo de tabla combinada:

<table border="1">
  <tr>
    <th rowspan="2">Producto</th>
    <th colspan="2">Precio</th>
  </tr>
  <tr>
    <th>Unidad</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>Manzanas</td>
    <td>2 €</td>
    <td>10 €</td>
  </tr>
</table>

En este ejemplo:

• Producto ocupa dos filas (con rowspan="2").
• Precio ocupa dos columnas (con colspan="2"), creando una cabecera combinada.

Sección 4: Cómo crear un horario con tablas HTML
Ahora pasamos a un ejemplo práctico: construir un horario de clases. Comenzamos con una cabecera que contenga las horas y los días de la semana.

<table border="1">
  <tr>
    <th></th>
    <th>Lunes</th>
    <th>Martes</th>
    <th>Miércoles</th>
    <th>Jueves</th>
    <th>Viernes</th>
  </tr>

Después, añadimos filas para cada franja horaria:

  <tr>
    <td>15:00 - 15:55</td>
    <td>Web</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

Si, por ejemplo, una materia ocupa dos horas seguidas, usamos rowspan="2":

  <tr>
    <td>15:55 - 16:50</td>
    <td rowspan="2">Web</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

Y si una actividad como el patio se repite para todos los días, usamos colspan="5":

  <tr>
    <td>17:45 - 18:15</td>
    <td colspan="5">Patio</td>
  </tr>
</table>

Esto demuestra cómo podemos organizar visualmente información compleja de manera clara y estructurada.

Conclusión:
¡Y eso es todo por este tutorial! Ahora ya sabes cómo crear tablas en HTML, desde lo más básico hasta estructuras más avanzadas con colspan y rowspan. Este conocimiento es fundamental si quieres maquetar datos, horarios o informes de forma profesional en la web.

Si te ha sido útil este artículo, no olvides suscribirte al canal, dejar tu like y compartirlo con quien esté aprendiendo HTML. ¡Nos vemos en el próximo vídeo!