TABLAS

Cuando necesitamos visualizar una determinada informacin, la cual, se divide en diferentes conceptos, y deseamos verlos detallados en filas y/o columnas, necesitamos un nuevo tipo de elemento para llevar a cabo dicha visualizacin. Estamos hablando del elemento TABLE, ue nos va a permitir representar en nuestro documento, tablas. !na tabla se compone de una o m"s filas, ue al mismo tiempo se pueden dividir en columnas. La interseccin entre una fila y una columna, lo conocemos con el nombre de celda o celdilla. En el interior de #sta celda podemos incluir un te$to, ima%en, hiperv&nculo, etc.' incluso, otra tabla. Las tablas pueden tener un encabezado, un cuerpo y un pie. ( sus contenidos pueden ser datos o t&tulos.

Estructura
El elemento ue determina el comienzo y final del dise)o de tabla es TABLE. *entro del elemento Table podemos distin%uir cinco elementos, CA+T,-., C-L/0-!+/C-L, T1EA*, TB-*( y T2--T. CA+T,-.

Elemento opcional. 3u contenido ser" el t&tulo de la tabla. C-L/0-!+/C-L

Elemento opcional. +ermite establecer caracter&sticas a un %rupo de columnas o a una columna independiente.

Cap&tulo 45 6 Tablas

0esumen 1T7L

T1EA* a las filas

Elemento opcional. 1aremos referencia correspondientes al encabezado de la tabla. TB-*(

El elemento TB-*( debe aparecer una o m"s veces. En #l, haremos referencia a las filas correspondientes del cuerpo de la tabla. T2--T referencia a las filas

Elemento opcional. 1aremos correspondientes al pie de la tabla.

A continuacin vemos un e8emplo de es uema9

<TABLE > <CAPTION > <COLGROUP > <COL . > <COL .. > </COLGROUP> <COL .. > <THEAD> Columna independiente 2ilas de encabezado de la tabla +rincipio del dise)o de tabla T&tulo de la tabla </CAPTION>

A%rupacin de columnas Columnas de la a%rupacin Columnas de la a%rupacin

<TR> <TH>.</TH><TH></TH></TR> </THEAD> <TFOOT> 2ilas de pie de la tabla

<TR> <TH>.</TH><TH></TH></TR> </TFOOT> <TBODY> 2ilas del cuerpo de la tabla

<TR> <TD>.</TD><TD></TD></TR> </TBODY> </TABLE>

Cap&tulo 45 6 Tablas

0esumen 1T7L

El elemento TABLE

El elemento TABLE es el ue abarca toda la tabla, es un elemento de blo ue, por lo ue slo debe ser insertado en elementos de blo ue superior como *,;. Contiene todos los dem"s elementos de tabla, como elementos de t&tulo, columnas, filas y celdas. Los atributos para el elemento TABLE son los si%uientes9 lan%, dir, title, id, class, style, <idth, ali%n, border, b%color, cellspacin%, cellpaddin%, summary, rules, frame. La anchura de la tabla depende de la suma de sus columnas, podemos indicar un ancho fi8o con el atributo <idth, por e8emplo =55p$ o un porcenta8e 455>, con lo ue ocupar" toda el "rea donde este definida. En caso de no establecer tama)o determinado, ni a la tabla, ni a las respectivas columnas, cada columna tendr" el ancho necesario para %uardar su contenido. Al utilizar el atributo ali%n con los valores ri%ht o left, la tabla pasa a ser un ob8eto flotante, i%ual ue las im"%enes. El atributo summary, se utiliza para indicar una aclaracin, resumen, sobre el contenido de la tabla. Este atributo est" dise)ado para dispositivos especiales de voz o braille. El mar%en e$terior de las celdas, lo indicaremos con el atributo cellspacin% y el mar%en interior de las celdas, lo indicaremos con el atributo cellpadin%.

+ara confi%urar el %rosor de los bordes disponemos del atributo border y adem"s disponemos de dos atributos especiales para tablas, rules y frame. Cap&tulo 45 6 Tablas 0esumen 1T7L ?

2rame

*etermina el borde e$terior de la tabla. *isponemos de los si%uientes valores9 o ;oid o Bo$ o Above o Belo< o 1sides o ;sides o Lhs o 0hs 3in borde. Con borde los cuatro lados. Borde mar%en superior. Borde mar%en inferior. Borde mar%en superior e inferior. Borde mar%en iz uierdo y derecho. Borde mar%en iz uierdo. Borde mar%en derecho.

0ules

*etermina el borde interior de la tabla, es decir, las l&neas de divisin entre celdas. *isponemos de los si%uientes valores9 o .one o All o /roups o 0o<s o Cols 3in borde. Con borde alrededor de todas las celdas. Bordes de separacin entre %rupos de filas y columnas. Bordes de separacin entre filas. Bordes de separacin entre columnas.

Cap&tulo 45 6 Tablas

0esumen 1T7L

Cdigo fue !e e"e#$%o e%e#e !o& de !'(%'

Cap&tulo 45 6 Tablas

0esumen 1T7L

N')eg'do* +o,i%%'-Fi*efo.

Re&u%!'do e"e#$%o e%e#e !o& de !'(%'

N')eg'do* I !e* e! E.$%o*e*

Re&u%!'do e"e#$%o e%e#e !o& de !'(%'

Cap&tulo 45 6 Tablas

0esumen 1T7L

El elemento CAPTION

*icho elemento permite dar un t&tulo a la tabla. 3on necesarias la eti ueta de inicio CCA+T,-.D y fin C/CA+T,-.D. Los atributos para el elemento CA+T,-. son los si%uientes9 lan%, dir, title, id, class, style, ali%n. Con el atributo ali%n podemos indicar donde deseamos ue el t&tulo aparezca. Los valores son9 Top Bottom Left 0i%ht Arriba. Aba8o. Al lado iz uierdo de la tabla. Lado derecho.

El nave%ador ,nternet E$plorer no aplica los valores ri%ht y left, creando el t&tulo en la parte superior, como top, pero con el te$to 8ustificado a derecha e iz uierda, respectivamente.

+o,i%%'-Fi*efo. - Re&u%!'do e"e#$%o '%i e'/i

%ef! e

CAPTION

+o,i%%'-Fi*efo. - Re&u%!'do e"e#$%o '%i e'/i

!o$ e

CAPTION

Cap&tulo 45 6 Tablas

0esumen 1T7L

Columnas

+odemos hacer referencia a una columna en concreto, o bien, a un con8unto de columnas para indicar al%una caracter&stica como por e8emplo el ancho de columna. El elemento C-L/0-!+ permite a%rupar varias columnas. Tiene eti ueta de inicio CC-L/0-!+D y de fin C/C-L/0-!+D. +uede contener elementos C-L. El elemento C-L, hace referencia a una sola columna. Es un elemento vac&o, por tanto, la mar ue de inicio CC-LD es obli%atoria, pero, la eti ueta de final, no se usa. Los atributos de C-L/0-!+ y C-L son los si%uientes9 lan%, dir, title, id, class, style, ali%n, vali%n, <idth, span.

El ancho de columna lo establecemos con <idth, la alineacin horizontal con ali%n y la vertical con el atributo vali%n. El atributo span, permite indicar el nEmero de columnas hacemos referencia en una a%rupacin FC-L/0-!+G. ue

A continuacin vemos el si%uiente e8emplo de A columnas, en una primera a%rupacin de ?, y una se%unda de :9

<COLGROUP &$' 01 2id!30456> <COL '%ig 07%ef!7 > <COL '%ig 07/e !e*7 > <COL '%ig 07%ef!7 > </COLGROUP> <COLGROUP &$' 08 2id!30196 '%ig 0:/e !e*:> </COLGROUP>

Cap&tulo 45 6 Tablas

0esumen 1T7L

Filas

+ara introducir filas dentro de nuestro documento, disponemos de tres secciones diferentes, T1EA*, TB-*( y T2--T. El elemento T1EA*, representa las filas de encabezado de la tabla. *ispone de eti ueta de inicio CT1EA*D y de fin C/T1EA*D. El elemento TB-*(, representa las filas ue componen la tabla. *ispone de eti ueta de inicio CTB-*(D y de fin C/TB-*(D. Este elemento es obli%atorio al crear una tabla. El elemento T2--T, representa las filas de pie de la tabla. *ispone de eti ueta de inicio CT2--TD y de fin C/T2--TD. Los tres elementos contendr"n uno o m"s elementos T0, el elemento de fila. ue es

Los atributos de T1EA*, TB-*( y T2--T son los si%uientes9 lan%, dir, title, id, class, style, ali%n, vali%n. +ara establecer la alineacin horizontal utilizaremos el atributo ali%n Fleft, center, ri%htG y la vertical el atributo vali%nFbaseline,top, bottom, middleG.

El elemento T0 divide la tabla en filas. *ispone de eti ueta de inicio CT0D y de fin C/T0D. *entro del elemento podemos incluir elementos de celda, T1 y T*. Los atributos de T0 son los si%uientes9 lan%, dir, title, id, class, style, ali%n, vali%n, b%color.

Cap&tulo 45 6 Tablas

0esumen 1T7L

Celdas

Las celdas son el elemento b"sico de una tabla. 3e dividen en celdas de t&tulo y datos. !tilizaremos el elemento T1 cuando se desee ue la celda sea de t&tulo. Este elemento dispone de eti ueta de inicio CT1D y eti ueta de fin C/T1D. !tilizaremos el elemento T* cuando se desee ue la celda sea de datos. Este elemento dispone de eti ueta de inicio CT*D y eti ueta de fin C/T*D. Los atributos de T1 y T* son los si%uientes9 lan%, dir, title, id, class, style, ali%n, vali%n, bicolor, <idth, hei%ht, colspan, ro<span. Con los atributos colspan y ro<span, podemos indicar, ue una determinada celda, ocupe m"s de una columna y/o m"s de una fila. E8emplo9
CT0D CT* ro<spanJK@KD+ro%ramador LEBC/T*D CT*DLen%ua8e 1T7LC/T*D C/T0D C/T0D C/T0D C/T0D

CT0D CT*DLen%ua8e Mava3criptC/T*D CT0D CT*DLen%ua8e +1+C/T*D CT0D CT*DLen%ua8e 3NLC/T*D O. O O O .. O.. O O O CT2--TD CT0D C/T2--TD

CT1 colspanJK:KDComienzo de los cursos9 H de EneroC/T1D

C/T0D

Cap&tulo 45 6 Tablas

0esumen 1T7L

45

Re&u%!'do e"e#$%o !'(%'&

Re&u%!'do e"e#$%o !'(%' ; i#<ge e& - 3i$e*)= /u%o&

Cap&tulo 45 6 Tablas

0esumen 1T7L

44