Portales de Informacin

HTML: 6. Tablas
2009 - 2010
1. Tablas

Desde sus primeras versiones, HTML incluy el
soporte para crear tablas de datos en las pginas
web.

Adems de ser sencillo, el modelo definido por HTML
es muy flexible y bastante completo.

Las tablas en HTML utilizan los conceptos de filas,
columnas, cabeceras y ttulos.
1. Tablas
2. Buen uso de las tablas !!!

A pesar de que las tablas HTML son fciles de
comprender y utilizar, son uno de los elementos ms
polmicos de HTML.

El problema de las tablas es que no siempre se
utilizan adecuadamente.

Aunque parezca obvio, las tablas se deben utilizar
para mostrar informacin tabular.
2. Buen uso de las tablas !!!

Hasta hace unos aos, las tablas tambin se
utilizaban para definir la estructura de las pginas
web.

La cabecera de la pgina era una fila de una gran tabla,

el pie de pgina era otra fila de esta tabla y

la zona de contenidos estaba formada por varias columnas
dentro de esa gran tabla.
2. Buen uso de las tablas !!!

Aunque algunos malos diseadores siguen utilizando
hoy en da las tablas para definir la estructura
completa de las pginas web, se trata de una
tcnica obsoleta y nada recomendable.

El motivo es que se complica en exceso el cdigo
HTML y su mantenimiento es muy complejo.

La solucin correcta para definir la estructura
de las pginas consiste en la utilizacin de
hojas de estilos CSS.
3. Una tabla sencilla

Las tablas ms sencillas de HTML se definen con tres
etiquetas:

<table> para crear la tabla,

<tr> para crear cada fila y

<td> para crear cada columna.

La etiqueta <table> encierra todas las filas y columnas de la

tabla.

Las etiquetas <tr> (del ingls "table row") definen cada fila de
la tabla y encierran todas las columnas.

Por ltimo, la etiqueta <td> (del ingls "table data cell") define
cada una de las columnas de las filas, aunque realmente HTML
no define columnas sino celdas de datos.
 3. Una tabla sencilla

Al definir una tabla,

Se debe pensar en primer
lugar en las filas que la
forman y a continuacin en
las columnas.

El motivo es que HTML
procesa primero las filas y
por eso las etiquetas <tr>
aparecen antes que las
etiquetas <td>.
3. Elementos bsicos de tablas
 3. Elementos bsicos de tablas

ACLARACIN:

En la definicin de los
elementos se incluye los
atributos comunes: bsicos,
i18N, eventos.

En la imagen adjunta veis a
qu atributos concretos se
refieren estos grupos
3. Elementos bsicos de tablas
3. Elementos bsicos de tablas

Algunas de las celdas de la tabla se utilizan como
cabecera de las dems celdas de la fila o de la
columna.

En este caso, HTML define la etiqueta <th> (del
ingls "table header cell") para indicar que una celda
es cabecera de otras celdas.
3. Elementos bsicos de tablas

Los atributos de la etiqueta <th> son idnticos que

los atributos definidos para la etiqueta <td>.
3. Elementos bsicos de tablas

Por otra parte, HTML define la etiqueta <caption>
para establecer la leyenda o ttulo de una tabla.

La etiqueta debe colocarse inmediatamente despus
de la etiqueta <table> y cada tabla slo puede
incluir una etiqueta <caption>.
4. Fusin de filas y columnas

Las tablas complejas suelen disponer de una
estructura irregular que junta varias columnas para
formar una columna ancha o une varias filas para
formar una fila ms alta que las dems.

Para fusionar filas o columnas, se utilizan los
atributos rowspan y colspan respectivamente.

La siguiente imagen muestra una tabla compleja que
ha fusionado dos columnas simples para formar una
columna ms ancha:
4. Fusin de columnas

La primera fila de la tabla
est formada slo por una
columna, mientras que la
segunda fila est formada
por dos columnas.

En principio, podra pensarse
en utilizar el siguiente cdigo
HTML para definir la tabla:
4. Fusin de columnas

Si se utiliza el cdigo anterior, el navegador visualiza de forma
incorrecta la tabla, ya que las tablas en HTML deben disponer
de una estructura regular.

En otras palabras, todas las filas de una tabla HTML deben
tener el mismo nmero de columnas.

Si se quieren mostrar menos columnas en una fila, se fusionan
mediante el atributo colspan, que indica el nmero de columnas
simples que va a ocupar una determinada celda.

En el ejemplo anterior, la celda de la primera fila debe ocupar el
espacio de dos columnas simples, por lo que el cdigo HTML
debe ser <td colspan="2">A</td>.
4. Fusin de filas

De forma equivalente, si se quiere disear una tabla
HTML que fusiona filas como la de la siguiente
imagen:
Fusin de columnas ms compleja

Utilizando los atributos rowspan y colspan, es posible
disear tablas tan complejas como las que se
muestran en los siguientes ejemplos.
Fusin de columnas ms compleja
Fusin de filas ms compleja
Fusin de filas ms compleja
Tablas avanzadas

Es comn que las tablas ms avanzadas dispongan
de una seccin de cabecera, una seccin de pie y
varias secciones de datos.

Un ejemplo clsico de tablas avanzadas es el de las
tablas utilizadas en contabilidad
Tablas avanzadas
Tablas avanzadas

Las partes que componen las tablas complejas se
definen mediante las etiquetas <thead>, <tbody> y
<tfoot>.

La cabecera de la tabla se define con la etiqueta <thead>,

el pie de la tabla se define mediante <tfoot>

y cada seccin de datos se define con una etiqueta
<tbody>.
Tablas avanzadas

Cada tabla puede contener solamente una cabecera y un

pie, pero puede incluir un nmero ilimitado de secciones.

Si se define una cabecera y/o un pie, las etiquetas <thead>
y/o <tfoot> deben colocarse inmediatamente antes que
cualquier etiqueta <tbody>.
Tablas avanzadas
Tablas avanzadas