Uso de tablas en HTML para presentación de datos

Las tablas en HTML están diseñadas específicamente para organizar y mostrar datos de forma estructurada, no para maquetar diseños de página. Su principal ventaja radica en la claridad y legibilidad que ofrecan al presentar información compleja, especialmente en interfaces de administración o paneles de control.

Estructura básica

<table>
  <tr>
    <td>Contenido de celda</td>
    <!-- Más celdas -->
  </tr>
  <!-- Más filas -->
</table>

<table>: Contenedor principal de la tabla.
<tr>: Define una fila dentro de la tabla.
<td>: Representa una celda de datos (table data), debe estar anidada dentro de una fila.

Celdas de encabezado

Para destacar títulos de columnas o filas, se usa la etiqueta <th> (table header). El contenido se muestra en negrita y centrado por defecto:

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

Atributos comunes (obsoletos en HTML5, preferible usar CSS)

Atributo	Valores típicos	Descripción
`align`	`left`, `center`, `right`	Alineación horizontal de la tabla
`border`	`1` o cadena vacía	Muestra u oculta el borde de la tabla
`cellpadding`	Valor en píxeles	Espacio entre el contenido y los bordes internos de la celda
`cellspacing`	Valor en píxeles	Espacio entre celdas adyacentes
`width`	Píxeles o porcentaje	Ancho total de la tabla

Estructura semántica avanzada

Para mejorar la organización y accesibilidad, se recomienda dividir la tabla en secciones lógicas:

<thead>: Agrupa las filas del encabezado (normalmente la primera fila).
<tbody>: Contiene las filas con los datos principales.

<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$999</td>
    </tr>
  </tbody>
</table>

Fusión de celdas

Se pueden combinar celdas horizontal o verticalmente mediante atributos especiales:

Fusión horizontal: colspan="n" combina n columnas.
Fusión vertical: rowspan="n" combina n filas.

Reglas clave:

Identificar si la fusión es por columnas o filas.
Aplicar el atributo a la celda superior izquierda del área a fusionar.
Eliminar las celdas redundantes que quedarían superpuestas.

Ejemplo práctico:

<table>
  <tr>
    <td colspan="2">Celda combinada (2 columnas)</td>
  </tr>
  <tr>
    <td rowspan="2">Celda combinada (2 filas)</td>
    <td>Dato 1</td>
  </tr>
  <tr>
    <td>Dato 2</td>
  </tr>
</table>

Etiquetas: HTML tablas estructura-semántica

Publicado el 9-20 20:33

Friki Work