Tablas en la Web I

Hasta que no se empezaron a usar las tablas, la única manera de tabular las cosas era utilizar la etiqueta de pre-formateado, con la que es necesario porner manualmente los espacios en blanco para que quede todo alineado formando filas y columnas, con un resultado muy poco estético.

Estructura de una tabla

Vamos a ver ordenadamente (de afuera hacia dentro) las etiquetas necesarias para confeccionar las tablas.

La etiqueta general

La etiqueta general es <table> y </table>

Es decir:

<table>
[Resto de las etiquetas]
</table>

Con esto se representarían los datos tabulados, pero faltaria la característica que hace más atractivas a las tablas, y es que estos datos vayan dentro de unos cajones formados por un borde. Para esto tenemos que añadir el atributo border a la etiqueta, es decir:

<table border>
[Resto de las etiquetas]
</table>

En el siguiente nivel

Dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, y estas se forman con las etiquetas <tr> y </tr>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla, es decir, para una tabla con dos filas, sería:

<tr>
[Etiquetas de las distintas celdas de la primera fila]
</tr>
<tr>
[Etiquetas de las distintas celdas de la segunda fila]
</tr>

En el ultimo nivel

Dentro de las etiquetas anteriores están las etiquetas de cada celda, o las que forman las columnas, que son <td> y </td>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirlas tantas veces como celdas queremos que haya en esa fila.

Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:

<table border>
<tr>
<td>Fila1-Celda1</td>
<td>Fila1-Celda2</td>
<td>Fila1-Celda3</td>
</tr>
<tr>
<td>Fila2-Celda1</td>
<td>Fila2-Celda2</td>
<td>Fila2-Celda3</td>
</tr>
</table>

Que resulta:

Fila1-Celda1	Fila1-Celda2	Fila1-Celda3
Fila2-Celda1	Fila2-Celda2	Fila2-Celda3

Filas con desigual numero de celdas

En este ejemplo hemos puesto dos filas con igual numero de celdas. ¿Qué pasa si ese número es ditinto? Pues el navegador forma el número de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas.

Si en el ejemplo anterior eliminamos la tercera celda de la segunda fila, es decir si borramos <td>Fila2-Celda3</td>.

<table border>
<tr>
<td>Fila1-Celda1</td>
<td>Fila1-Celda2</td>
<td>Fila1-Celda3</td>
</tr>
<tr>
<td>Fila2-Celda1</td>
<td>Fila2-Celda2</td>
</tr>
</table>

Resultara:

Fila1-Celda1	Fila1-Celda2	Fila1-Celda3
Fila2-Celda1	Fila2-Celda2

Variando el espesor de los bordes

El atributo border (visto más arriba) pone por defecto un borde de espesor igual a la unidad. Peo se puede hacer que este borde sea tan grueso como queramos, poniendo:

<table border=número deseado>

Si en el ejemplo anterior ponemos:

<table border=12>

<table border=12>
<tr>
<td>Fila1-Celda1</td>
<td>Fila1-Celda2</td>
<td>Fila1-Celda3</td>
</tr>
<tr>
<td>Fila2-Celda1</td>
<td>Fila2-Celda2</td>
<td>Fila2-Celda3</td>
</tr>
</table>

Resultara:

Fila1-Celda1	Fila1-Celda2	Fila1-Celda3
Fila2-Celda1	Fila2-Celda2	Fila1-Celda3

Celdas de cabecera

Además de las celdas que contiene datos normales, podemos poner, si nos conviene, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado.

Esto se consigue con la etiqueta <th> y </th> (en vez de la normal <td> y </td>).

Vamos añadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya existían:

<tr>
<th>Columna 1</th>
<th>Columna 2 </th>
<th>Columna 3 </th>
</tr>

<table border=5>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td>Fila1-Celda1</td>
<td>Fila1-Celda2</td>
<td>Fila1-Celda3</td>
</tr>
<tr>
<td>Fila2-Celda1</td>
<td>Fila2-Celda2</td>
<td>Fila2-Celda3</td>
</tr>
</table>

Que resulta: