La Etiqueta TABLE

Se utiliza para crear tablas y estructurar datos en filas y columnas.

La etiqueta <table> en HTML se utiliza para crear tablas y estructurar datos en filas y columnas. Es esencial para mostrar información organizada, como horarios, listas de precios, estadísticas o cualquier conjunto de datos que requiera una presentación tabular. Aquí te explicamos cómo implementarla correctamente.

Estructura básica de una tabla

Una tabla se compone de:

  • <table>: Contenedor principal.

  • <tr>: Define una fila (table row).

  • <th>: Celda de encabezado (table header).

  • <td>: Celda de datos (table data).

Ejemplo mínimo:

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
  </tr>
</table>

Resultado:

Nombre Edad
Ana 25

Atributos comunes

Aunque se recomienda usar CSS para estilos, algunos atributos básicos son:

  • border: Define el borde de la tabla (no recomendado, mejor usar CSS).

  • cellpadding: Espacio interno entre el contenido y el borde de la celda.

  • cellspacing: Espacio entre celdas.

Ejemplo:

<table border="1" cellpadding="8" cellspacing="0">
  <!-- Filas y celdas -->
</table>

Agrupación de elementos

a) <thead>, <tbody>, <tfoot>

Organiza la tabla en secciones semánticas:

<table>
  <thead> <!-- Encabezados -->
    <tr>
      <th>Producto</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody> <!-- Cuerpo -->
    <tr>
      <td>Laptop</td>
      <td>$800</td>
    </tr>
  </tbody>
  <tfoot> <!-- Pie -->
    <tr>
      <td>Total</td>
      <td>$800</td>
    </tr>
  </tfoot>
</table>

b) <colgroup> y <col>

Aplica estilos a columnas específicas:

<table>
  <colgroup>
    <col style="background: #f0f0f0;"> <!-- Primera columna -->
    <col> <!-- Segunda columna -->
  </colgroup>
  <!-- Filas y celdas -->
</table>

Combinar celdas: rowspan y colspan

  • colspan: Combina celdas en columnas.

  • rowspan: Combina celdas en filas.

Ejemplo:

<table border="1">
  <tr>
    <th colspan="2">Datos Personales</th>
  </tr>
  <tr>
    <td>Nombre</td>
    <td>Ana</td>
  </tr>
  <tr>
    <td rowspan="2">Contacto</td>
    <td>ana@email.com</td>
  </tr>
  <tr>
    <td>+123456789</td>
  </tr>
</table>

Resultado:

Datos Personales  
Nombre Ana
Contacto ana@email.com
  +123456789

Accesibilidad

  • <caption>: Añade un título descriptivo.

  • scope: Indica si un encabezado (<th>) corresponde a una fila (row) o columna (col).

<table>
  <caption>Lista de estudiantes</caption>
  <tr>
    <th scope="col">Nombre</th>
    <th scope="col">Nota</th>
  </tr>
  <tr>
    <td>Carlos</td>
    <td>9.5</td>
  </tr>
</table>

Estilizar con CSS

Reemplaza atributos obsoletos con CSS moderno:

table {
  width: 100%;
  border-collapse: collapse; /* Elimina espacios entre celdas */
  margin: 20px 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background: #007bff;
  color: white;
}

/* Efecto hover para filas */
tr:hover {
  background: #f5f5f5;
}

/* Zebra striping */
tr:nth-child(even) {
  background: #f9f9f9;
}

Tablas responsivas

En dispositivos pequeños, usa un contenedor con scroll horizontal:

<div style="overflow-x: auto;">
  <table>
    <!-- Tabla ancha -->
  </table>
</div>

Errores comunes

Usar tablas para maquetación:

<table>
  <tr>
    <td>Menú</td>
    <td>Contenido</td>
  </tr>
</table>

(Usa CSS Grid o Flexbox en su lugar).

Olvidar <th> o <caption>:
Reduce la accesibilidad y semántica.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    table {
      width: 80%;
      border-collapse: collapse;
      margin: 20px auto;
      font-family: Arial;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 12px;
    }
    th {
      background: #2ecc71;
      color: white;
    }
    tr:nth-child(even) {
      background: #f9f9f9;
    }
    tr:hover {
      background: #f1f1f1;
    }
    caption {
      font-size: 1.2em;
      margin: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <caption>Inventario de productos</caption>
    <thead>
      <tr>
        <th scope="col">Producto</th>
        <th scope="col">Categoría</th>
        <th scope="col">Precio</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Laptop</td>
        <td>Tecnología</td>
        <td>$800</td>
      </tr>
      <tr>
        <td>Libro</td>
        <td>Educación</td>
        <td>$20</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">Total</td>
        <td>$820</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Resultado:

Producto Categoría Precio
Laptop Tecnología $800
Libro Educación $20
Total   $820

Conclusión

La etiqueta <table> es fundamental para:

  • Organizar datos de forma clara y estructurada.

  • Mejorar la accesibilidad con encabezados y descripciones.

  • Facilitar la interpretación de información compleja.

Recuerda:

  • Usa CSS para estilos y evita atributos obsoletos como border.

  • Prioriza la semántica con <thead>, <tbody>, y <tfoot>.

  • Optimiza para móviles con contenedores de scroll horizontal.

¡Ahora puedes crear tablas profesionales y accesibles en tus proyectos web!