Apuntes sobre Html

HTML nunca falla, solo se ve raro.

Tablas en HTML

Imagina que necesitas mostrar un horario de clases, una lista de precios, o los resultados de un torneo en tu sitio web. Las tablas en HTML te permiten organizar datos en filas y columnas, de forma clara y ordenada. Aunque antes se usaban para diseñar páginas web (toda la página era una enorme tabla), hoy se reservan para datos tabulares, como estadísticas o formularios. En esta lección, aprenderás a crear tablas con etiquetas como <table>, <tr>, <td>, <th>, y <caption>, a personalizarlas con atributos HTML (aunque muchos están en desuso), y a estilizarlas con CSS.

En esta lección

Estructura básica de una tabla

Una tabla en HTML se construye con tres etiquetas principales:

  • <table>: Define la tabla completa.
  • <tr> (table row): Crea una fila.
  • <td> (table data): Define una celda dentro de una fila.

Las columnas se forman automáticamente según las celdas de cada fila. Aquí tienes un ejemplo de una tabla con 2 filas y 3 columnas: 


<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <td style="border: 1px solid black;">Celda (1,1)</td>
    <td style="border: 1px solid black;">Celda (1,2)</td>
    <td style="border: 1px solid black;">Celda (1,3)</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Celda (2,1)</td>
    <td style="border: 1px solid black;">Celda (2,2)</td>
    <td style="border: 1px solid black;">Celda (2,3)</td>
  </tr>
</table>
  code>

Resultado:

Celda (1,1) Celda (1,2) Celda (1,3)
Celda (2,1) Celda (2,2) Celda (2,3)

Nota: Una tabla contiene filas, y cada fila contiene celdas. Las etiquetas <table> añaden un salto de línea antes y después, como un párrafo (<p>).

Ejemplo práctico: Lista de contactos

Creemos una tabla simple para una lista de contactos. Añadimos un borde para que lo visualices mejor:


<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <td style="border: 1px solid black;">Pepe Pérez</td>
    <td style="border: 1px solid black;">91 400 00 00</td>
  </tr>
</table>
  code>

Resultado:

Pepe Pérez 91 400 00 00

puedes añadir mas filas con una pareja de tr, y sus correspondientes celdas

Personalizar tablas: Cabeceras con <th>

La etiqueta <th> (table header) crea celdas de cabecera, que se suelen mostrar en negrita y centradas por defecto. Ejemplo: 


<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black;">Nombre</th>
    <th style="border: 1px solid black;">Teléfono</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Pepe Pérez</td>
    <td style="border: 1px solid black;">91 400 00 00</td>
  </tr>
</table>

Resultado:

Nombre Teléfono
Pepe Pérez 91 400 00 00

Títulos con <caption>

La etiqueta <caption> añade un título a la tabla, que aparece encima por defecto. Ejemplo: 


<table style="border: 1px solid black; border-collapse: collapse;">
  <caption style="caption-side: top;">Directorio telefónico</caption>
  <tr>
    <th style="border: 1px solid black;">Nombre</th>
    <th style="border: 1px solid black;">Teléfono</th>
  </tr>
</table>

Ancho y espaciado

Puedes definir el ancho de la tabla o celdas con style="width: 80%" (o píxeles, como 350px). El espaciado se controla con padding (dentro de celdas) y border-spacing (entre celdas, si no usas border-collapse: collapse). 


<table style="width: 80%; margin: auto; border: 1px solid black; border-collapse: collapse;">
  <tr>
    <td style="width: 50%; padding: 10px; border: 1px solid black;">Pepe Pérez</td>
    <td style="width: 50%; padding: 10px; border: 1px solid black;">91 400 00 00</td>
  </tr>
</table>

Tablas avanzadas: Combina celdas con colspan y rowspan

colspan hace que una celda ocupe varias columnas, y rowspan varias filas. Ejemplo: 


<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <td style="border: 1px solid black;" colspan="2">Estructura HTML</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">head</td>
    <td style="border: 1px solid black;">body</td>
  </tr>
</table>

Resultado:

Estructura HTML
head body

Estructura semántica con <thead>, <tbody>, <tfoot>

Para tablas grandes, usa <thead> (cabecera), <tbody> (cuerpo), y <tfoot> (pie) para mejorar la semántica y la impresión: 


<table style="border: 1px solid black; border-collapse: collapse;">
  <thead>
    <tr>
      <th style="border: 1px solid black;" scope="col">Nombre</th>
      <th style="border: 1px solid black;" scope="col">Teléfono</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid black;">Pepe Pérez</td>
      <td style="border: 1px solid black;">91 400 00 00</td>
    </tr>
  </tbody>
</table>

Tablas con CSS

En HTML5, atributos como border, width, align, cellpadding, y cellspacing están en desuso. Usa CSS para estilizar tablas. Ejemplo completo con CSS externo: 

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Lista de contactos</title>
  <style>
    table {
      width: 80%;
      margin: auto;
      border: 1px solid black;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      border: 1px solid black;
    }
    caption {
      caption-side: top;
      font-weight: bold;
    }
    .center {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Lista de contactos</h1>
  <table>
    <caption>Directorio telefónico</caption>
    <thead>
      <tr>
        <th scope="col">Nombre</th>
        <th scope="col">Teléfono</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Pepe Pérez</td>
        <td>91 400 00 00</td>
      </tr>
      <tr>
        <td>Paco López</td>
        <td>91 411 11 11</td>
      </tr>
      <tr>
        <td class="center" colspan="2">Emergencias: 112</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Consejos y errores comunes

  • Prueba siempre tu tabla: Abre el archivo HTML en un navegador para verificar bordes, anchos, y alineaciones.
  • Evita atributos obsoletos: Usa CSS en lugar de border, width, align, etc.
  • Celdas vacías: Si una celda está vacía, usa &nbsp; para mantener su estructura visible.
  • Errores con colspan/rowspan: Asegúrate de que el número total de celdas por fila coincida, o la tabla se desajustará.
  • Accesibilidad: Usa scope="col" o scope="row" en <th> para que los lectores de pantalla interpreten la tabla correctamente.

Tabla de referencia

Etiquetas y propiedades de tablas
Etiqueta/Atributo Descripción Equivalente CSS
<table> Define la tabla display: table
border="1" Añade bordes border: 1px solid black
width="80%" Define ancho width: 80%
align="center" Centra la tabla margin: auto
cellpadding="10" Espacio dentro de celdas padding: 10px
cellspacing="5" Espacio entre celdas border-spacing: 5px
TOP