TABLAS

Tablas HTML

¿Qué son las tablas en HTML?

Las tablas es el elemento del lenguaje HTML que utilizaremos para mostrar información de forma agrupada. Ya sea texto, imágenes, vídeos,…

El elemento table será el que nos ayudará para crear las tablas en HTML.

Un mal uso de las tablas en HTML es el motivo de maquetación, uso que se dió a las tablas en los principios del lenguaje HTML. Algo que hoy en día es una mala práctica. Cambiando por un modelo de maquetación apoyado en capas.

Crear una tabla simple

Para crear una tabla vamos a necesitar conocer, al menos, tres elementos: table, tr y td. Si bien existen otros cuantos que nos permitirán ampliar la funcionalidad de las tablas.

El primer elemento es table. table es el elemento que representa las tablas y será el que agrupe al resto de elementos. Por lo tanto tiene sus etiquetas de inicio y cierre.

<table> ... </table>

Siguiendo con la construcción de la tabla el siguiente elemento que necesitamos es tr. El elemento tr representa a una fila de la tabla. Por lo tanto tendremos tantos elementos tr como filas tenga la tabla.

Así, si queremos tener una tabla de tres filas tendremos un código como el que sigue:

<table>

  <tr> ... </tr>

  <tr> ... </tr>

  <tr> ... </tr>

</table>

El último elemento que necesitamos conocer es td. El elemento td es el que representa de una forma unitaria a una celda. Por lo tanto los elementos tr tendrán tantos elementos td en su interior como celdas contenga la fila.

El contenido que haya entre los elementos td será el contenido de la celda.

Una tabla de tres filas por cuatro columnas quedaría de la siguiente forma:

<table border=”5”>

  <tr>

    <td>Fila 1 Columna 1</td>

    <td>Fila 1 Columna 2</td>

    <td>Fila 1 Columna 3</td>

    <td>Fila 1 Columna 4</td>

  </tr>

  <tr>

    <td>Fila 2 Columna 1</td>

    <td>Fila 2 Columna 2</td>

    <td>Fila 2 Columna 3</td>

    <td>Fila 2 Columna 4</td>

  </tr>

  <tr>

    <td>Fila 3 Columna 1</td>

    <td>Fila 3 Columna 2</td>

    <td>Fila 3 Columna 3</td>

    <td>Fila 3 Columna 4</td>

  </tr>

</table>

Así con los tres elementos table, tr y td tenemos construida nuestra tabla.

Visualmente tendríamos algo así:

Fila 1 Columna 1	Fila 1 Columna 2	Fila 1 Columna 3	Fila 1 Columna 4
Fila 2 Columna 1	Fila 2 Columna 2	Fila 2 Columna 3	Fila 2 Columna 4
Fila 3 Columna 1	Fila 3 Columna 2	Fila 3 Columna 3	Fila 3 Columna 4

Agrupando Celdas

A la hora de presentar datos en una tabla nos puede surgir la necesidad de agrupar celdas, ya que el contenido a presentar refleja una agrupación de datos.

Imaginemos una tabla que nos saca los ingresos y gastos por meses. Existirá una columna con el mes, la cual agrupará dos columnas: ingresos y gastos.

Algo como lo siguiente:

Enero		Febrero
Ingresos	Gastos	Ingresos	Gastos
1.000€	700€	1.100€	580€
1.800€	920€	1.750€	920€

En este caso lo que estamos diciendo es que una celda ocupa dos espacios. Para ello vamos a utilizar el atributo colspan sobre el elemento td de la celda.

Así indicaremos que el colspan de esa celda es 2. Ya que ocupa dos celdas.

<td colspan="2">Enero</td>

El código completo sería:

<table>

  <tr>

    <td colspan="2">Enero</td>

    <td colspan="2">Febrero</td>

  </tr>

  <tr>

    <td>Ingresos</td>

    <td>Gastos</td>

    <td>Ingresos</td>

    <td>Gastos</td>

  </tr>

  <tr>

    <td>1.000€</td>

    <td>700€/td>

    <td>1.100€</td>

    <td>580€</td>

  </tr>

  <tr>

    <td>1.800€</td>

    <td>920€</td>

    <td>1.750€</td>

    <td>920€</td>

  </tr>

</table>