Tablas HTML simples con thead y tbody

Nivel: Básico · HTML · Después de listas · 15 minutos

Al terminar tendrás una tabla de notas con encabezado, filas de datos y la estructura table → thead/tbody → tr → th/td clara.

Resultado final: una tabla «Materia | Nota» con tres filas de ejemplo que se ve ordenada en el navegador.

Paso 1: Piezas de una tabla

Trampa: usar tablas solo para maquetar la página entera — hoy el layout va con CSS; la tabla es para datos.

Paso 2: Escribe la tabla de notas

<table>
  <thead>
    <tr>
      <th>Materia</th>
      <th>Nota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Matemáticas</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Física</td>
      <td>90</td>
    </tr>
    <tr>
      <td>HTML</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

Cuenta: cada tr del body tiene el mismo número de celdas que el encabezado (aquí 2).

Paso 3: Atributo border (solo para ver)

Mientras aprendes, puedes probar <table border="1"> para ver las líneas. En proyectos reales el borde se controla con CSS; no abuses del atributo presentacional.

Trampa: fusionar celdas con colspan sin contar — descuadra el resto de filas.

Paso 4: Código completo en una página

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mis notas</title>
  </head>
  <body>
    <h1>Notas del trimestre</h1>
    <table border="1">
      <thead>
        <tr><th>Materia</th><th>Nota</th></tr>
      </thead>
      <tbody>
        <tr><td>Matemáticas</td><td>85</td></tr>
        <tr><td>Física</td><td>90</td></tr>
      </tbody>
    </table>
  </body>
</html>

Si algo no funciona

Reto: añade una tercera columna «Observación» y completa tres filas.

Para seguir: formularios HTML básicos — pedir datos al visitante con input y button.