Curso HTML – Módulo 4: Tablas en HTML para diseñar y organizar Datos

Publicada el por

Módulo 4: Tablas en HTML para diseñar y organizar Datos

Las tablas en HTML son esenciales para organizar y presentar datos de manera clara y estructurada en la web.

Aunque hoy en día su uso principal se orienta a la visualización semántica de datos, entender sus fundamentos y técnicas avanzadas resulta vital para desarrollar interfaces accesibles y profesionalmente diseñadas.

En este artículo, abordaremos desde la creación de tablas simples hasta aspectos avanzados como la fusión de celdas, estructuras semánticas, accesibilidad y estilización con CSS.

Tanto si eres principiante como si buscas profundizar en el tema, aquí encontrarás conceptos y ejemplos prácticos que potenciarán tus habilidades.

¿Por Qué Usar Tablas en HTML?

Las tablas permiten:

  • Organización Visual: Facilitan la disposición de datos en filas y columnas.
  • Claridad y Accesibilidad: Mejoran la legibilidad de la información, tanto para usuarios como para motores de búsqueda.
  • Versatilidad: Se pueden diseñar tablas simples o complejas, adaptándolas a las necesidades de cada proyecto.

Conceptos Básicos de las Tablas en HTML

Antes de adentrarnos en ejemplos prácticos, es importante familiarizarnos con algunos términos clave:

  • Tabla: Contenedor principal definido con <table>, que organiza la información en filas y columnas.
  • Fila: Cada línea de la tabla, creada con <tr>.
  • Celda: Unidad de datos dentro de una fila. Se diferencia entre:
    • <td>: Celdas de datos.
    • <th>: Celdas de encabezado, que suelen destacar el contenido.
  • Encabezado: Elemento que etiqueta el contenido de una columna o fila, facilitando la lectura y accesibilidad.

Creación de una Tabla Simple

La estructura básica para crear una tabla es muy sencilla. Veamos un ejemplo de una tabla de 2×2:

<table>
   <tr>
      <td>Col 1, Fila 1</td>
      <td>Col 2, Fila 1</td>
   </tr>
   <tr>
      <td>Col 1, Fila 2</td>
      <td>Col 2, Fila 2</td>
   </tr>
</table>

Este código genera una tabla básica en la que defines filas con <tr> y celdas con <td>.

Uso de Encabezados: La Etiqueta <th>

Para resaltar títulos o encabezados, usamos la etiqueta <th>. Esto no solo da énfasis visual (por defecto en negrita y centrado) sino que también mejora la accesibilidad.

<table border="1">
  <tr>
    <th>Día</th>
    <th>Actividad</th>
  </tr>
  <tr>
    <td>Lunes</td>
    <td>Clases de HTML</td>
  </tr>
  <tr>
    <td>Martes</td>
    <td>Práctica de CSS</td>
  </tr>
</table>

Atributos de las Tablas

Aunque hoy se prefiere el uso de CSS para la presentación, es fundamental conocer algunos atributos heredados que pueden ser útiles o necesarios en ciertos casos:

  • id y class: Identificadores y clases para aplicar estilos o manipular la tabla con JavaScript.
  • style: Estilos en línea (aunque se recomienda usar hojas de estilo externas).
  • border: Agrega un borde a la tabla (valor numérico; 0 para sin borde).
  • cellpadding y cellspacing: Espaciado interno y entre celdas.
  • summary: Proporciona un resumen de la tabla, útil para la accesibilidad.
  • colspan y rowspan: Permiten que una celda abarque varias columnas o filas, respectivamente.
  • headers: Asocia una celda de datos con sus correspondientes encabezados.

Fusionar Celdas: colspan y rowspan

El atributo colspan se utiliza para que una celda se extienda horizontalmente sobre varias columnas.
Ejemplo:

<table border="1">
  <tr>
    <th>Equipo</th>
    <th colspan="2">Detalles</th>
  </tr>
  <tr>
    <td>Real Madrid</td>
    <td>Victoria</td>
    <td>Derrota</td>
  </tr>
  <tr>
    <td>Liverpool</td>
    <td>Empate</td>
    <td>Victoria</td>
  </tr>
</table>

Con rowspan, una celda puede abarcar varias filas.
Ejemplo:

<table border="1">
  <tr>
    <th>Equipo</th>
    <th>Detalle</th>
    <th>Resultado</th>
  </tr>
  <tr>
    <td rowspan="2">Liverpool</td>
    <td>Partido 1</td>
    <td>Victoria</td>
  </tr>
  <tr>
    <td>Partido 2</td>
    <td>Empate</td>
  </tr>
</table>

Estructura Semántica: <thead>, <tbody>, <tfoot> y <caption>

Dividir la tabla en secciones semánticas mejora la accesibilidad y facilita su mantenimiento:

  • <caption>: Proporciona un título descriptivo a la tabla.
  • <thead>: Agrupa los encabezados.
  • <tbody>: Contiene el cuerpo principal de datos.
  • <tfoot>: Agrupa el pie de la tabla (útil para totales o notas).

Ejemplo Completo:

<table border="1">
  <caption>Tabla de Posiciones</caption>
  <thead>
    <tr>
      <th scope="col">Equipo</th>
      <th scope="col">Partidos Jugados</th>
      <th scope="col">Puntos</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Real Madrid</td>
      <td>38</td>
      <td>88</td>
    </tr>
    <tr>
      <td>Liverpool</td>
      <td>38</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Promedio de Puntos</td>
      <td>86.5</td>
    </tr>
  </tfoot>
</table>

Uso del Atributo scope para Mejorar la Accesibilidad

El atributo scope indica si un encabezado se relaciona con una fila, columna o grupo, ayudando a los lectores de pantalla a interpretar la tabla.

  • scope="col": Encabezado para columnas.
  • scope="row": Encabezado para filas.
  • scope="colgroup" y scope="rowgroup": Encabezados para grupos de columnas o filas.

Ejemplo con scope="col":

<table border="1">
  <caption>Resultados del Partido</caption>
  <tr>
    <th scope="col">Estadística</th>
    <th scope="col">Local</th>
    <th scope="col">Visitante</th>
  </tr>
  <tr>
    <td>Goles</td>
    <td>2</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Tiradas</td>
    <td>10</td>
    <td>5</td>
  </tr>
</table>

Ejemplo con scope="row":

<table border="1">
  <caption>Horario de Clases</caption>
  <thead>
    <tr>
      <th>Hora</th>
      <th>Lunes</th>
      <th>Martes</th>
      <th>Miércoles</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">8:00 - 9:00</th>
      <td>Matemáticas</td>
      <td>Lenguaje</td>
      <td>Inglés</td>
    </tr>
    <tr>
      <th scope="row">9:00 - 10:00</th>
      <td>Física</td>
      <td>Química</td>
      <td>Educación Física</td>
    </tr>
  </tbody>
</table>

Tablas Anidadas

Las tablas anidadas consisten en insertar una tabla dentro de otra, lo que puede ser útil para mostrar información jerárquica o detallada en contextos específicos.

Ejemplo de Tabla Anidada:

<table border="1">
  <tr>
    <th>Producto</th>
    <th>Detalles</th>
  </tr>
  <tr>
    <td>Portátil</td>
    <td>
      <table border="1">
        <tr>
          <td>Marca</td>
          <td>XYZ</td>
        </tr>
        <tr>
          <td>Modelo</td>
          <td>Alpha</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>
      <table border="1">
        <tr>
          <td>Marca</td>
          <td>ABC</td>
        </tr>
        <tr>
          <td>Modelo</td>
          <td>Beta</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Accesibilidad en Tablas

La accesibilidad es clave en el desarrollo web. Al optimizar tus tablas, consideras a usuarios con discapacidades visuales o motoras. Algunas buenas prácticas incluyen:

  • Estructura semántica: Utiliza <caption>, <thead>, <tbody>, <tfoot> y atributos como scope para clarificar la relación entre datos.
  • Etiquetado claro: Asegúrate de que cada encabezado y celda esté correctamente etiquetado.
  • Contraste y tipografía: Usa colores y fuentes que faciliten la lectura.
  • Pruebas de accesibilidad: Herramientas como WAVE ayudan a identificar mejoras.

Estilos con CSS para Tablas

El aspecto visual de una tabla se puede mejorar drásticamente con CSS. Aquí un ejemplo de estilos básicos:

table {
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {
  background-color: #f2f2f2;
}

caption {
  font-weight: bold;
  margin-bottom: 8px;
}

Estos estilos aseguran que:

  • Los bordes se colapsen para evitar espacios dobles.
  • Se añada un espaciado uniforme en celdas.
  • Se aplique un fondo alterno a filas pares para mejorar la legibilidad.
  • El título de la tabla resalte mediante <caption>.

Ejercicios Propuestos

Poner en práctica lo aprendido es fundamental para consolidar los conocimientos. Aquí te proponemos algunos ejercicios:

Tabla de Horario de Clases:

    • Objetivo: Crear una tabla que represente el horario semanal de clases.
    • Requisitos:
      • Incluir encabezados para los días de la semana.
      • Usar <thead> para la cabecera y <tbody> para el contenido.
      • Aplicar estilos CSS para mejorar la legibilidad.

Uso de colspan y rowspan:

    • Objetivo: Diseñar una tabla de resultados deportivos que utilice ambos atributos.
    • Requisitos:
      • Utilizar colspan para agrupar encabezados de estadísticas.
      • Emplear rowspan para fusionar celdas cuando un equipo tenga datos que se extiendan en varias filas.

Tabla Semántica y Accesible:

    • Objetivo: Crear una tabla con datos de empleados o productos.
    • Requisitos:
      • Incluir un <caption> descriptivo.
      • Dividir la tabla en <thead>, <tbody> y <tfoot>.
      • Utilizar el atributo scope en los encabezados para definir si pertenecen a filas o columnas.

Tabla Anidada:

    • Objetivo: Diseñar una tabla principal que contenga información general (por ejemplo, productos) e insertar tablas anidadas en una o varias celdas para mostrar detalles específicos (como especificaciones técnicas).
    • Requisitos:
      • Asegurarte de que la estructura de la tabla principal se mantenga clara y funcional.