Tablas en HTML

El título

El título de una tabla es otro componente que aporta a la legibilidad. Mientras que algunas tablas, debido a su estructura o simplicidad, pueden sobrevivir sin un título, otras lo necesitarán inexorablemente. En cualquier caso, el título de una tabla puede mejorar pero nunca empeorar.

La idea de un título es la de proveer una descripción concisa acerca de la información presentada en la tabla o su propósito, aportando contexto y haciéndola significativamente más fácil de comprender. En HTML, los títulos de las tablas son insertados mediante el elemento caption, justo después de la etiqueta de apertura de la misma y antes que todos los demás elementos de su estructura. En el ejemplo siguiente hay una tabla en la cual el significado de los datos sería muy difícil de descifrar sin un título apropiado.

<table class="egt">
  <caption>Consumo de combustible de los autos a lo largo de las pruebas de manejo</caption>
  <tr>
    <th scope="col">Car</th>
    <th>Enero</th>
    <th>Febrero</th>
    <th>Marzo</th>
  </tr>
  <tr>
    <th>Chevrolet Camaro</th>
    <td>1254 lts</td>
    <td>1582 lts</td>
    <td>685 lts</td>
  </tr>
  <tr>
    <th>Lamborghini Aventator</th>
    <td>1854 lts</td>
    <td>1978 lts</td>
    <td>1502 lts</td>
  </tr>
</table>
Consumo de combustible de los autos a lo largo de las pruebas de manejo
Car Enero Febrero Marzo
Chevrolet Camaro 1254 lts 1582 lts 685 lts
Lamborghini Aventator 1854 lts 1978 lts 1502 lts

Unificación de celdas

La unificación de celdas es un mecanismo mediante el cual un autor puede combinar o fusionar dos o más celdas adyacentes (td y th) en una tabla. Este efecto puede lograrse utilizando los atributos colspan, para unificación horizontal, y rowspan, para unificación vertical. Estos atributos pueden tomar un valor entero mayor a cero, que representa el número de celdas que participarán en la unificación.

La idea detrás de este mecanismo se explica por sí misma: cuando el atributo colspan es establecido en una celda, indica a los intérpretes que la misma debe abarcar, no solamente su propio espacio, sino también el espacio de un número de celdas contiguas hacia su derecha. Lo mismo sucede para el atributo rowspan pero hacia abajo. Debido a la estructura de las tablas en HTML, La unificación sólo puede hacerse hacia la derecha o hacia abajo. Hacerlo hacia arriba o hacia la izquierda consistiría un intento de abarcar espacio ya utilizado.

En el siguiente ejemplo, una celda de la tabla está ocupando el espacio de tres celdas, como lo indica su atributo colspan. Nota cómo la declaración de las dos celdas a la derecha de esta celda particular han sido omitidas en el código. Esto es algo muy apropiado, ya que el espacio de estas celdas ha sido tomado por la anterior.

<table class="egt">
  <tr>
    <th></th>
    <th>Día 1</th>
    <th>Día 2</th>
    <th>Día 3</th>
    <th>Día 4</th>
  </tr>
  <tr>
    <th>Mike (lastimado)</th>
    <td colspan="3">0 km</td>
    <td>4 km</td>
  </tr>
  <tr>
    <th>Susan</th>
    <td>23 km</td>
    <td>18 km</td>
    <td>19 km</td>
    <td>15 km</td>
  </tr>
</table>
Día 1 Día 2 Día 3 Día 4
Mike (lastimado) 0 km 4 km
Susan 23 km 18 km 19 km 15 km

Ahora probaremos el atributo rowspan. Aunque la idea de unificación es la misma (excepto por la dirección), la estructura de las tablas en HTML hace que la unificación vertical sea un tanto diferente. En la unificación horizontal todo sucedía en la misma fila (la declaración del atributo colspan y la omisión de las celdas contiguas). En la unificación vertical, el atributo rowspan se establece en la celda de una fila en particular y la omisión de las celdas unificadas se realiza en las filas subsiguientes, una a una. Esto significa que si una celda en la primera fila abarca el espaio de tres celdas verticalmente, las filas dos y tres tendrán una celda faltante cada una. Veámoslo con un ejemplo.

<table class="egt">
  <tr>
    <th></th>
    <th>Básico</th>
    <th>Completo</th>
  </tr>
  <tr>
    <th>Instalación</th>
    <td rowspan="2">Gratis!</td>
    <td>$49.99</td>
  </tr>
  <tr>
    <th>Primer año</th>
    <td>$19.99</td>
  </tr>
  <tr>
    <th>Segundo año</th>
    <td>$9.99</td>
    <td>$29.99</td>
  </tr>
</table>
Básico Completo
Instalación Gratis! $49.99
Primer año $19.99
Segundo año $9.99 $29.99

Si prestas atención verás que la segunda fila del ejemplo anteior, tiene una celda que abraca dos espacios. Por lo tanto, la tercera fila tiene una celda faltante en el código, a saber, su segunda. Esto significa que la segunda celda declarada (en el código) en la tercera fila ("$19.99") representa a la tercera celda de esa fila y no a la segunda.

Cuando se utilizan conjuntamente en una misma tabla, los atributos colspan y rowspan deben ser cuidadosamente declarados de forma que no produzcan celdas superpuestas.

Prev12345Próx