Manual de HTML: Tablas

Tablas

Las tablas son una de las herramientas mas útiles para crear un documento HTML. Su finalidad básica es mostrar datos con estructura tabular, organizados en filas y columnas, pero por su facilidad a la hora de organizar los diferentes elementos que componen una página web (tanto texto como imágenes) se utilizan a menudo para maquetar.

Veamos un ejemplo: este código:

<table width="50%">
  <caption>Informe mensual</caption>
  <colgroup>
    <col width="20%" />
    <col width="20%" />
    <col width="30%" />
    <col width="30%" />
  </colgroup>
  <thead>
    <tr>
      <th colspan="4">Informe de gastos e ingresos</th>
    </tr>
    <tr>
      <th> </th>
      <th>Mes</th>
      <th>Ingresos</th>
      <th>Gastos</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td> </td>
      <td>Total</td>
      <td>$280</td>
      <td>$340</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td rowspan="3">Primer trimestre</td>
      <td>Enero</td>
      <td>$100</td>
      <td>$200</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>$80</td>
      <td>$40</td>
    </tr>
    <tr>
      <td>Marzo</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
  </tbody>
</table>

... se ve así:

• <table></table>

  Señala el inicio y final de una tabla.

• <tr></tr>

  Indica una fila de una tabla.

• <td></td>

  Identifica las columnas (y las celdas) dentro de cada fila.

  Atributos:

  • rowspan: permite combinar varias filas en una sola.
  • colspan: permite combinar varias columnas en una sola.
• <th></th>

  Usado en vez de <td> indica que el texto es un encabezado, por lo que el texto aparecerá en negrita y centrado.

• <thead></thead>

  Define la cabecera de la tabla y puede contener una o más filas.

• <tbody></tbody>

  Define el cuerpo de la tabla.

• <tfoot></tfoot>

  Define el pie de la tabla y puede contener una o más filas. La etiqueta <tfoot> debe aparecer antes que <tbody>.

• <caption></caption>

  Permite asociar un título a la tabla. Debe aparecer inmediatamente después de la etiqueta <table>.

• <colgroup></colgroup>

  Se utiliza al principio de la tabla para decirle al navegador cuántas columnas tiene y acelerar así la carga de la página.

• <col />

  Define cada una de las columnas y complementa a la etiqueta <colgroup>.

Celdas vacías en tablas

En muchas ocasiones tendremos tablas con celdas vacías. Si dejamos la celda vacía simplemente escribiendo:

<td width="15"></td>

... puede ocurrir que la anchura especificada no sea respetada por el navegador obteniendo resultados imprevisibles. Esto se puede evitar de dos maneras:

• introduciendo en la celda un espacio "&nbsp;":

  <td width="15"> </td>

• introduciendo en la celda una imagen transparente de 1x1 pixels (este método es más fiable):

  <td><img src="1x1.gif" width="15" /></td>

Tablas anidadas

Las tablas se pueden anidar unas en otras, basta con introducir una tabla con toda su estructura dentro de una celda de la tabla madre.

Ejemplo: este código:

<table width="200">
  <tr>
    <td>uno</td>
    <td>dos</td>
  </tr>
  <tr>
    <td>tres</td>
    <td>
      <table width="100%">
        <tr>
          <td>hijo 1</td>
          <td>hijo 2</td>
        </tr>
        <tr>
          <td>hijo 3</td>
          <td>hijo 4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

... se ve así: