Saltar al contenido principal

Ejercicio práctico 6: Tablas en HTML

En este ejercicio práctico aprenderás a insertar y configurar una tabla con tres filas y tres columnas usando la etiqueta <table>.

Actividad​

Crea una tabla con tres filas y tres columnas usando la etiqueta <table>.

Solución interactiva​

Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

Solución con el código HTML completo​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Tablas</title>
  </head>
  <body>
    <h1>Tabla</h1>
    <table border="1">
      <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
        <th>Encabezado 3</th>
      </tr>
      <tr>
        <td>Fila 1, Columna 1</td>
        <td>Fila 1, Columna 2</td>
        <td>Fila 1, Columna 3</td>
      </tr>
      <tr>
        <td>Fila 2, Columna 1</td>
        <td>Fila 2, Columna 2</td>
        <td>Fila 2, Columna 3</td>
      </tr>
    </table>
  </body>
</html>

Variantes del mismo ejercicio​

Variante 1: Tabla con estructura semántica completa​

Las tablas HTML5 tienen etiquetas semánticas que separan el encabezado, el cuerpo y el pie de la tabla. Esto mejora la accesibilidad y permite estilizar cada sección por separado.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Tabla Semántica</title>
  </head>
  <body>
    <h1>Ventas Mensuales</h1>
    <table border="1">
      <thead>
        <tr>
          <th>Producto</th>
          <th>Enero</th>
          <th>Febrero</th>
          <th>Marzo</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Laptops</td>
          <td>$12,000</td>
          <td>$15,000</td>
          <td>$18,000</td>
        </tr>
        <tr>
          <td>Monitores</td>
          <td>$8,000</td>
          <td>$9,500</td>
          <td>$11,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <td>$20,000</td>
          <td>$24,500</td>
          <td>$29,000</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
  • <thead>: agrupa las filas de encabezado. Los lectores de pantalla lo identifican como encabezado de columna.
  • <tbody>: contiene los datos principales de la tabla.
  • <tfoot>: fila de resumen o totales al pie de la tabla. Aunque se escribe antes o después de <tbody>, el navegador siempre lo muestra al final.

Variante 2: Celdas combinadas con colspan y rowspan​

Para tablas más complejas como horarios o calendarios, colspan y rowspan permiten que una celda ocupe múltiples columnas o filas.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Horario de Clases</title>
  </head>
  <body>
    <h1>Horario Semanal</h1>
    <table border="1">
      <thead>
        <tr>
          <th>Hora</th>
          <th>Lunes</th>
          <th>Martes</th>
          <th>Miércoles</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>08:00 - 10:00</td>
          <td>Matemáticas</td>
          <td>Física</td>
          <td>Matemáticas</td>
        </tr>
        <tr>
          <td>10:00 - 12:00</td>
          <td colspan="3" align="center">Taller de Programación (todos los días)</td>
        </tr>
        <tr>
          <td>12:00 - 14:00</td>
          <td rowspan="2">Laboratorio</td>
          <td>Inglés</td>
          <td>Laboratorio</td>
        </tr>
        <tr>
          <td>14:00 - 16:00</td>
          <td>Deportes</td>
          <td>Inglés</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
  • colspan="3": la celda "Taller de Programación" ocupa 3 columnas (Lunes + Martes + Miércoles).
  • rowspan="2": la celda "Laboratorio" ocupa 2 filas en la columna del Lunes.

Variante 3: Tabla sin bordes HTML​

El atributo border está obsoleto en HTML5. Lo correcto es dejar que CSS maneje los bordes y estilos visuales.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Tabla con Estilo CSS</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th, td {
        border: 2px solid #333;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
        color: #333;
      }
    </style>
  </head>
  <body>
    <h1>Tabla Estilizada con CSS</h1>
    <table>
      <thead>
        <tr>
          <th>Nombre</th>
          <th>Edad</th>
          <th>Ciudad</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ana García</td>
          <td>28</td>
          <td>Buenos Aires</td>
        </tr>
        <tr>
          <td>Carlos López</td>
          <td>35</td>
          <td>Córdoba</td>
        </tr>
        <tr>
          <td>María Rodríguez</td>
          <td>22</td>
          <td>Rosario</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Separar estructura (HTML) de presentación (CSS) es una de las mejores prácticas más importantes del desarrollo web.

Mini-desafío: Ponelo a prueba​

Creá un horario de clases semanal que contenga:

  • Una fila de encabezado con los días: "Hora", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes" (6 columnas)
  • Al menos 3 filas con diferentes materias
  • Una celda que use colspan para una materia que ocupe dos días seguidos
  • Una celda que use rowspan para una actividad de 2 horas seguidas
  • Usá <thead> y <tbody>

No copies y pegues de la Variante 2: adaptá el esquema a 6 columnas y creá tu propio horario.

Errores comunes con tablas HTML​

ErrorPor qué es un problema
No cerrar etiquetas <tr>, <td> o <th>El navegador intenta adivinar la estructura y puede mostrar celdas desordenadas
Usar tablas para el layout de la páginaPráctica obsoleta desde hace 15 años. Para layouts usá CSS Grid o Flexbox. Las tablas son solo para datos tabulares
No usar <th> para encabezadosLos lectores de pantalla no pueden asociar celdas de datos con sus encabezados. <th> + atributo scope es obligatorio para accesibilidad
Usar border="1" en lugar de CSSEl atributo border está obsoleto en HTML5. Usá border-collapse: collapse y border en CSS
Olvidar <tbody>Aunque el navegador lo agrega automáticamente, sin <tbody> no podés estilizar el cuerpo de la tabla por separado ni aplicar scroll en tablas largas

Preguntas frecuentes​

¿Las tablas son malas para SEO?​

No. Las tablas bien usadas (para datos tabulares) son perfectamente válidas para SEO. Google las interpreta como datos estructurados y puede mostrar fragmentos enriquecidos si los datos son relevantes. Lo que es malo para SEO es usar tablas para el layout de la página, porque confunde a los crawlers sobre la estructura real del contenido.

¿Cuándo usar tablas vs CSS Grid?​

Usá tablas HTML cuando tengas datos con relaciones fila-columna (precios, horarios, rankings, reportes numéricos). Usá CSS Grid para la maquetación visual de la página (header, sidebar, footer, galerías). La regla es simple: si exportarías el contenido a Excel, va en una tabla. Si es diseño visual, va en Grid.

Practicá con DivZone AI

¿Ya dominás las tablas? Generá una página con datos tabulares usando DivZone AI y analizá cómo se estructuran las tablas con thead, tbody y tfoot en un proyecto real. ¡Ver código generado es la mejor forma de aprender!

info

🔎 Revisa las siguientes secciones con más información sobre este tema: