HTML: Tablas

Las tablas permiten organizar datos en filas y columnas, y constituyen un elemento muy útil para presentar la información. Con HTML se puede crear tablas de forma muy completa y sin demasiadas complicaciones. Para ello se utiliza varias etiquetas: <table>, <tr> (filas) y <td> (celdas). Existen más etiquetas que permiten crear títulos, cabeceras y pies de página.

Cabe señalar que históricamente se usaban las tablas para diseñar o estructurar páginas web; así definían la cabecera, los menús y el pie de página. Incluso el sitio web de la NASA estuvo estructurado así. Esto no es correcto en la actualidad, aunque algunos malos diseñadores las sigan utilizando de forma incorrecta. Para diseñar páginas web debe usarse el CSS. Aunque parezca una obviedad:

Las tablas deben usarse para mostrar información organizada.

Lista de elementos tratados en este artículo:

Crear una tabla en HTML: elementos <table>, <tr> y <td>

Para crear una tabla en HTML necesitamos tres elementos principales: <table>, <tr> y <td>. Primero debemos crear las etiquetas <table> (de apertura) y </table> (de cierre); así indicamos el principio y el fin de la tabla.

Dentro del elemento <table> se introducen las filas con el elemento <tr>. Este elemento también tiene dos etiquetas: <tr> (de apertura) y </tr> (de cierre). Podemos añadir tantas filas como sea necesario.

Dentro de cada fila (<tr>) se introducen las celdas (columnas) con el elemento <td>. Al igual que en el caso de los otros elementos mencionados, también tiene dos etiquetas: <td> (de apertura) y </td> (de cierre).

Los elementos <table> y <tr> son elementos de bloque, mientras que el elemento <td> es un elemento de línea.

Ejemplo de código HTML de una tabla:

<table>
  <tr>
    <td>Fila 1 - Celda 1</td>
    <td>Fila 1 - Celda 2</td>
    <td>Fila 1 - Celda 3</td>
  </tr>
  <tr>
    <td>Fila 2 - Celda 1</td>
    <td>Fila 2 - Celda 2</td>
    <td>Fila 2 - Celda 3</td>
  </tr>
</table>

Se visualiza así:

¿Lo ves? La tabla de ejemplo anterior tiene dos filas y tres celdas (columnas).

En resumen: con el elemento <table> indicamos el inicio y el final de la tabla, y contiene todas las filas y columnas. A su vez, el elemento <tr> (Table Row) permite definir las filas y contiene todas las columnas, que se introducen con el elemento <td>. Las columnas son en realidad celdas de datos (Table Data).

Atributos del elemento <td>

El elemento <td> para crear filas o columnas tiene varios atributos propios, y conviene conocerlos bien para poder ajustar mejor las tablas de datos.

El atributo ‘colspan’

El atributo colspan permite fusionar la celda actual con la celda de la siguiente columna. El valor de este atributo debe ser el número de columnas que ocupará. Por tanto, si queremos que la celda ocupe más de una columna, el valor deberá ser mayor que 1. No tiene sentido usar el valor 1 por defecto. Si se usa el valor de 0, la celda se extenderá hasta el final de la fila.

Ejemplo de código HTML de tabla usando colspan:

<table>
  <tr>
    <td colspan='2'>Celda 1</td>
  </tr>
  <tr>
    <td>Celda 2</td>
    <td>Celda 3</td>
  </tr>
</table>

Dando como resultado:

El atributo ‘rowspan’

El atributo rowspan permite fusionar la celda actual con la celda de la fila inferior. De la misma manera que sucede con colspan, el valor de rowspan también debe ser un número entero; y en este caso debe indicar el número de filas que ocupará. Si queremos que la celda ocupe más de una fila, el valor deberá ser mayor que 1. Si se usa el valor 0, la fila se extenderá hasta la última fila de la tabla.

Ejemplo de código HTML de tabla usando rowspan:

<table>
  <tr>
    <td rowspan='2'>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
  </tr>
</table>

Dando como resultado:

Celdas de cabecera: elemento <th>

Si se quiere que una celda sea cabecera de una fila o una columna, se utiliza el elemento <th> (Table Header Cell) como sustituto del elemento <td>. Se trata de un elemento similar al <td>, ya que también es un elemento de línea y comparten los mismos atributos. La diferencia es que verá diferente, dependiendo de las hojas de estilo CSS de cada sitio web; en nuestro caso se ve en negrita.

Este elemento se puede usar en cualquier celda de una tabla. Normalmente se usa en la primera fila para indicar los títulos de cada columna. Pero también se puede usar para tratar la primera columna como cabecera; e incluso se puede usar en la última fila de la tabla, por ejemplo para remarcar los totales de una suma.

Ejemplo de código HTML de una tabla con cabecera:

<table>
  <tr>
    <th>Cabecera 1</th>
    <th>Cabecera 2</th>
  </tr>
  <tr>
    <td>Fila 2 - Celda 1</td>
    <td>Fila 2 - Celda 2</td>
  </tr>
</table>

Este es el resultado:

Estructura de una tabla: elementos <thead>, <tbody> y <tfoot>

Las tablas se pueden dividir en tres porciones correspondientes a una cabecera (<thead>), un cuerpo (<tbody>) y un pie de tabla (<tfoot>). La cabecera y el pie de tabla son parecidos a los que se usan en un documento de un procesador de textos (como LO Writer o MS Word), que se mantienen en cada página mientras que el cuerpo es el contenedor principal del contenido de la tabla.

Descripción de los tres elementos de la estructura de una tabla:

• <thead>: Para crear una cabecera separada de la tabla.
• <tbody>: Para indicar el cuerpo principal de la tabla.
• <tfoot>: Para crear un pie de tabla separado de la tabla.

Estos tres elementos son de bloque y pueden contener una o más filas de datos. Dentro de cada fila podemos introducir tantas celdas (columnas) como sea necesario. Esto no cambia, el tratamiento de las celdas es el mismo, como cuando las introducimos dentro de las etiquetas <table> y </table>.

Una tabla puede contener varios elementos de cuerpo (<tbody>) para especificar varias “páginas” o grupos de datos. No obstante, cada tabla sólo puede tener un elemento de cabecera <thead>. Además, el elemento <tfoot> debe ir después de <thead> y antes de todos los <tbody> de la tabla. Aunque este orden parezca ilógico debe ir así para que el código HTML sea válido. El navegador web se encargará de situar el elemento <tfoot> al final de la tabla.

Ejemplo de código HTML de una tabla completa:

<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan='2'>Total</td>
      <td>410</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Teclado</td>
      <td>1</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Ratón</td>
      <td>2</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>3</td>
      <td>120</td>
    </tr>
  </tbody>
</table>

Este es el resultado:

Título descriptivo: elemento <caption>

El elemento <caption> es el encargado de dar un título descriptivo a una tabla. Este elemento tiene dos etiquetas obligatorias: <caption> (de apertura) y </caption> (de cierre). Puede contener texto y otros elementos de línea. El título descriptivo siempre aparecerá en la parte superior de la tabla.

Es importante destacar que este elemento debe ser el primer elemento hijo de una tabla. Además, cada tabla sólo puede contener un elemento <caption>.

Código de tabla con un título descriptivo:

<table>
  <caption>Título descriptivo</caption>
  <tr>
    <td>Fila 1 - Celda 1</td>
    <td>Fila 1 - Celda 2</td>
  </tr>
  <tr>
    <td>Fila 2 - Celda 1</td>
    <td>Fila 2 - Celda 2</td>
  </tr>
</table>

Resultado de cómo se verá el título descriptivo:

Grupos de columnas: elementos <colgroup> y <col>

Mediante los elementos <colgroup> y <col> es posible aplicar estilos CSS a columnas enteras. El elemento <colgroup> se usa como contenedor para las especificaciones de los grupos de columna; y cada elemento <col> permite especificar un grupo de columnas. Todos los elementos <col> deben ir entre las etiquetas <colgroup> (apertura) y </colgroup> (cierre).

Los elementos <colgroup> y <col> usan el atributo span, cuyo valor será un número entero que indica el número de columnas siguientes a las que se debe aplicar los estilos CSS, contando de izquierda a derecha. Por defecto sólo se aplicarán los cambios a la columna asociada (span="1").

Las columnas se asocian según el orden en el que están insertadas en la tabla. De este modo, el primer elemento <col> se asociará a la primera columna, y agrupará tantas columnas como indique el atributo span. Los siguientes elementos <col> aplicarán cambios a las columnas de la derecha.

Si las primeras columnas no deben ser alteradas, existe dos caminos: el primero es insertando tantos elementos <col> vacíos como sea necesario hasta llegar a la columna que nos interese. El segundo es usar un elemento <col> con el atributo span, pero sin especificar cambios de diseño.

Los cambios de diseño se indican mediante los atributos globales. Por ejemplo, puede usarse el atributo class para añadir clases que luego se definirán con CSS, o puede usarse el atributo style para indicar los cambios de diseño CSS sobre el mismo elemento. Ambos casos son del todo correctos.

No todos los cambios de diseño CSS están permitidos en los elementos <colgroup> y <col>. Lista de propiedades CSS permitidas:

• width
• visibility
• background
• border

Ejemplo de tabla HTML con las dos columnas centrales pintadas:

<table>
  <colgroup>
    <col span="1">
    <col span="2" style="background: rgba(180,20,20,0.20)">
  </colgroup>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
  </tr>
</table>

Resultado:

Tal y como se puede ver, para poder pintar las dos columnas centrales se ha declarado un elemento <col> vacío para la primera columna. En la segunda columna se ha añadido el atributo span="2". De este modo, se ven afectadas las columnas 2 y 3, pero no la última.

En el ejemplo se ha modificado el color de fondo, pero también se podría modificar el ancho de las columnas y los bordes. Con el atributo visibility: collapse es posible esconder totalmente un grupo de columnas.

Anidación de tablas

Una de las particularidades interesantes de las tablas es que se pueden anidar, es decir, que podemos crear o insertar tablas dentro de otras tablas. Para hacerlo es tan sencillo como introducir el código HTML de una tabla dentro de una celda. No obstante, la necesidad de anidar tablas no es muy común, y en muchos casos encontraremos soluciones más fáciles de implementar.