Tablas

Concepto
Una tabla no es otra cosa ms que un medio de organizar datos en filas y columnas. Este concepto ha
estado presente en nuestra sociedad por un largo perodo de tiempo y ha sido adoptado por en sus
etapas iniciales, como una forma de transmitir informacin que, de otro modo, no sera comprendida
tan fcilmente.
En documentos una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada
una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que
contiene a un grupo de filas, y esta diferencia tendr un impacto en la composicin y comportamiento
de la tabla.
Como muchas otras estructuras de , las tablas son construidas utilizando elementos. En particular, una
tabla bsica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr
(representando a las filas contenedoras de las celdas) y td (representando a las cedldas). Dejmoslo
ms claro con un ejemplo:
<table class="egt">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6
Ten en cuenta que a esta tabla se le han aplicado estilos mediante para mejorar su comprensin y
legibilidad. No se deberan esperar estos resultados en tablas sin atributos presentacionales asignados.
Puedes ver claramente en el ejemplo anterior, el concepto de filas conteniendo columnas del que
hablamos previamente. Aqu se hace evidente como las celdas, que han sido numeradas de acuerdo a su
aparicin en el cdigo, siguen una secuencia en la representacin que va de izquierda a derecha, una
fila por vez. Esto tendr implicaciones futuras, especialmente cuando se trate el tema de unificacin de
celdas y agrupamiento.

Celdas de encabezado
Ahora que ya hemos tratado la estructura bsica de una tabla, es hora de comenzar a crear tablas ms
tiles.
Una celda de encabezado es un tipo especial de celda utilizada para organizar y categorizar otras celdas
en la tabla. Dicho esto, es dicil imaginar una tabla donde una celda de encabezado no tenga utilidad.
Casi cualquier tabla puede beneficiarse de un grupo de celdas de encabezado bien ubicado.
En el siguiente ejemplo, construiremos una tabla para mostrar informacin acerca del clima en los
prximos das. Aqu, las celdas de encabezado, representadas por el elemento th, son ubicadas en la
primera fila de la tabla, encima de las celdas comunes.
<table class="egt">
<tr>
<th>Hoy</th>
<th>Maana</th>
<th>Jueves</th>
</tr>
<tr>
<td>Soleado</td>
<td>Mayormente soleado</td>
<td>Parcialmente nublado</td>
</tr>
<tr>
<td>19C</td>
<td>17C</td>
<td>12C</td>
</tr>
<tr>
<td>E 13 km/h</td>
<td>E 11 km/h</td>
<td>S 16 km/h</td>
</tr>
</table>

Hoy Maana Jueves

Soleado Mayormente soleado Parcialmente nublado
19C 17C 12C
E 13 km/h E 11 km/h S 16 km/h

El ttulo
El ttulo 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 ttulo, otras lo necesitarn
inexorablemente. En cualquier caso, el ttulo de una tabla puede mejorar pero nunca empeorar.
La idea de un ttulo es la de proveer una descripcin concisa acerca de la informacin presentada en la
tabla o su propsito, aportando contexto y hacindola significativamente ms fcil de comprender. En ,
los ttulos de las tablas son insertados mediante el elemento caption, justo despus de la etiqueta de
apertura de la misma y antes que todos los dems elementos de su estructura. En el ejemplo siguiente
hay una tabla en la cual el significado de los datos sera muy difcil de descifrar sin un ttulo 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

Unificacin de celdas
La unificacin de celdas es un mecanismo mediante el cual un autor puede combinar o fusionar dos o
ms celdas adyacentes (td y th) en una tabla. Este efecto puede lograrse utilizando los atributos
colspan, para unificacin horizontal, y rowspan, para unificacin vertical. Estos atributos pueden
tomar un valor entero mayor a cero, que representa el nmero de celdas que participarn en la
unificacin.
La idea detrs de este mecanismo se explica por s misma: cuando el atributo colspan es establecido
en una celda, indica a los intrpretes que la misma debe abarcar, no solamente su propio espacio, sino
tambin el espacio de un nmero de celdas contiguas hacia su derecha. Lo mismo sucede para el
atributo rowspan pero hacia abajo. Debido a la estructura de las tablas en , La unificacin slo puede
hacerse hacia la derecha o hacia abajo. Hacerlo hacia arriba o hacia la izquierda consistira 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 cmo la declaracin de las dos celdas a la derecha de esta celda particular han
sido omitidas en el cdigo. 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>Da 1</th>
<th>Da 2</th>
<th>Da 3</th>
<th>Da 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>

Da 1 Da 2 Da 3 Da 4
Mike (lastimado) 0 km 4 km
15 km
Susan 23 km 18 km 19 km
Ahora probaremos el atributo rowspan. Aunque la idea de unificacin es la misma (excepto por la
direccin), la estructura de las tablas en hace que la unificacin vertical sea un tanto diferente. En la
unificacin horizontal todo suceda en la misma fila (la declaracin del atributo colspan y la omisin
de las celdas contiguas). En la unificacin vertical, el atributo rowspan se establece en la celda de una
fila en particular y la omisin 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 tendrn una celda faltante cada una. Vemoslo con un ejemplo.
<table class="egt">
<tr>
<th></th>
<th>Bsico</th>
<th>Completo</th>
</tr>
<tr>
<th>Instalacin</th>
<td rowspan="2">Gratis!</td>
<td>$49.99</td>
</tr>
<tr>
<th>Primer ao</th>
<td>$19.99</td>
</tr>
<tr>
<th>Segundo ao</th>
<td>$9.99</td>
<td>$29.99</td>
</tr>
</table>

Bsico Completo
 Instalacin $49.99
Gratis!
Primer ao $19.99
Segundo ao $9.99 $29.99
Si prestas atencin vers 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 cdigo, a saber,