Tablas en HTML

Este tutorial explica la forma correcta y completa de definir tablas en documentos HTML. Est pensado tanto para principiantes como para avanzados, al presentar algunas herramientas e ideas que muchas veces no son usadas o conocidas. Tabla de contenidos 1. 1 Tablas simples 2. 2 Unificacin de celdas 3. 3 Celdas de encabezado 1. 3.1 El atributo "scope" 2. 3.2 El atributo "headers" 3. 3.3 El atributo "axis" 4. 4 Agrupacin horizontal 5. 5 Agrupacin vertical 6. 6 El ttulo de una tabla 7. 7 Sumarios Pginas:12345> Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de informacin. An cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial. En las prximas lneas intentaremos cubrir todas las caractersticas de las tablas para estar listos para utilizarlas cuando se necesite.

Simple tables
Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevs). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo: Cdigo <table> <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> Vista Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6 Nota: los bordes en este ejemplo fueron establecidos mediante el uso de CSS para mejorar la visualizacin. Te recomiendo evitar el uso de atributos presentacionales como "border" ya que son candidatos a ser desaprobados en el futuro. Adems, nota que, las celdas vacas deben ser declaradas utilizando sus respectivos tags para lograr una correctitud en el cdigo. cuando el contenido de una celda debe ser vaco, deberas usar una espacio en blanco (&nbsp;) como su contenido. Esto har que tu pgina sea ms compatible ya que algunos navegadores tienen problemas representando celdas vacas.

Unificacin de celdas
Para algunas tablas puedes necesitar unificar dos o ms celdas en una sola que pasar a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificacin vertical) y "colspan" (para unificacin horizontal), ambos disponibles para celdas (tag HTML td y tag HTML th). Cdigo <table> <tr> <td>Campo 1</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td colspan="2">Campos 4 y 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 7</td> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> Vista Campo 1 Campo 2 Campo 3 Campos 4 y 5 Campo 6 Campo 7 Campo 8 Campo 9 Mira en el ejemplo anterior cmo una definicin de celda que unifica a dos, es el equivalente a dos definiciones de celdas simples. Esto tambin funciona para uificacin vertical, con una pequea diferencia debido a la naturaleza de las tables en HTML.

Cuando se unifican celdas verticalmente, las definiciones de celdas en las filas afectadas por la unificacin deben ser omitidas. Mira el ejemplo, donde los campos 1, 4 y 7 son unificados: Cdigo <table> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> Vista Campo 2 Campo 3 Campo unificado Campo 5 Campo 6 Campo 8 Campo 9 Debes tener cuidado al unificar filas y columnas de no encimar las celdas unificadas. Esto podra tener resultados inesperados.
Para crear una pgina dividida en marcos, es necesario crear varios archivos HTML referidos a un archivo principal, que es el que permite su gestin. As pues, antes de nada hace falta impostar este archivo "fuente", y, posteriormente, los dems archivos que componen el marco. Imaginemos que debemos crear una ventana dividida en marcos como la de la figura, con un marco en la parte superior fijo (en el cual cargaremos el archivo "top.htm", que deberemos crear aparte) y un marco central (en el cual cargaremos el archivo "central.htm", que deberemos, asimismo, crear aparte) que cambiar segn cual sea la pgina que deba mostrar. Como hemos sealado antes, la gestin de estos dos marcos correr a cargo de un tercer archivo, el cual deber invocarlos asignndoles una parte de la pgina. He aqu el cdigo de esta pgina:

<FRAMESET rows="80,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </FRAMESET>

Como podemos ver, el cdigo del marco est encerrado entre las marcas <FRAMESET></FRAMESET> que se comportan como las marcas usuales <HTML></HTML>. El tamao de los marcos, o mejor dicho, el espacio que cada uno de ellos debe ocupar en la pgina, queda establecido mediante la marca rows="80,*, que significa que el marco alto (que

en este caso es una fila, "row") debe tener 80 pxel, mientras que "*" significa que todo el resto debe asignarse al marco central. Asimismo, habramos podido expresar el tamao de los marcos en tantos por ciento de esta manera: <FRAMESET rows="20%,*">

Una vez impostados los dos parmetros <FRAMESET></FRAMESET>, dentro de ellos se definen los nombres y los archivos que debern invocarse en los dos marcos creados. Es necesario dar un nombre al marco (name="alto") e indicar el archivo HTML que deber cargarse dentro del marco (SRC="top.htm"). Deben, por tanto, crearse previamente dos archivos de nombre "top.htm" y "central.htm". Fjate bien en lo importante que es la colocacin dentro del cdigo para una correcta interpretacin por parte del navegador. As, si se invirtiera el orden de esta manera: <FRAMESET rows="80,*"> <frame name="central" src="central.htm"> <frame name="alto" src="top.htm"> </FRAMESET> el navegador invertira el orden de asignacin y cargara el archivo "central.htm" en el marco superior, y el archivo "top.htm" en el marco central. Haz clic aqu para ver el resultado de este marco.

Para crear dos marcos verticales basta sustituir el trmino "rows" (filas) con el trmino "cols" (columnas):
<FRAMESET cols="100,*"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </FRAMESET>

Haz clic aqu para ver el resultado de este marco.

Los antiguos navegadores no soportaban los marcos por lo cual, dada la posibilidad de que se use uno de estos viejos programas para visualizar las pginas, es til insertar un cdigo que advierta de la presencia de marcos y de la imposibilidad de que el navegador los muestre. ste es el cdigo que debes incluir: <noframe> <HTML> <body> Atencin. Tu navegador no soporta la opcin de los marcos. Para ver estas pginas es necesario descargar un navegador que soporte dicha opcin. Te aconsejo Netscape 3.0 o superior. </body> </html> </noframe>

Es posible adoptar simultneamente una divisin tanto en columnas como en filas, de manera que se cree una ventana dividida en varios marcos. Veamos cmo debemos intervenir en el cdigo HTML del documento segn el nmero y la posicin de los marcos que queremos crear.

<frameset rows="100,*"> <frame name="alto" src="top.htm"> <frameset cols="150,*"> <frame name="sx" src="sx.htm.htm"> <frame name="central" src="central.htm"> </frameset>

Haz clic aqu para ver el resultado de este marco.

</frameset>

<frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="100,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset>

Haz clic aqu para ver el resultado de este marco.

</frameset>

<frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="20%,60%,20%,*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> <frame name="bajo" src="basso.htm"> </frameset>

Haz clic aqu para ver el resultado de este marco.

</frameset>

<frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset> <frame name="dx" src="dx.htm"> </frameset>

Haz clic aqu para ver el resultado de este marco.

<frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frameset cols="20%,80%*"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </frameset> </frameset> <frame name="dx" src="dx.htm"> </frameset>

Haz clic aqu para ver el resultado de este marco.

<frameset cols="75%,25%"> <frameset rows="20%,80%*"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> </frameset> <frameset rows="24%,76%"> <frame name="top" src="top2.htm"> <frame name="dx" src="dx.htm"> </frameset> </frameset>

Haz clic aqu para ver el resultado de este marco.

<frameset cols="25%,75%"> <frameset rows="80%,20%"> <frame name="alto" src="top.htm"> <frame name="bajo" src="basso.htm"> </frameset> <frame name="central" src="central.htm"> </frameset>

Haz clic aqu para ver el resultado de este marco.

<frameset rows="20%,60%,20%"> <frame name="alto" src="top.htm"> <frame name="central" src="central.htm"> <frame name="bajo" src="basso.htm"> </frameset>

Haz clic aqu para ver el resultado de este marco.

<frameset cols="20%,60%,20%"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> <frame name="dx" src="dx.htm"> </frameset>

Haz clic aqu para ver el resultado de este marco.

Para eliminar el borde gris de los marcos, se debe insertar el siguiente cdigo: <frameset cols="20%,60%,20%" border=0> Para impedir que los marcos sean redimensionados por el visitante: <frame name="alto" src="top.htm" noresize> Para eliminar siempre las barras de desplazamiento (scrollbars): <frame name="alto" src="top.htm" scrolling="no"> Para mostrarlas siempre: <frame name="alto" src="top.htm" scrolling="yes"> Para mostrarlas slo cuando son necesarias: <frame name="alto" src="top.htm" scrolling="auto"> Para regular la distancia del contenido del marco al margen superior (marginheight) y a los mrgenes izquierdo y derecho (marginwidth): <frame name="alto" src="top.htm" marginheight=2 marginwidth=5>

Por lo que se refiere a los enlaces dentro de los marcos (es decir, cmo cargar una pgina en un marco diverso de aqul en que se encuentra el enlace) hay que hacer referencia al nombre que hemos asignado a los diferentes marcos en la fase de realizacin. Este nombre no se refiere al archivo sino a lo que aparece escrito despus de "name=". Por ejemplo, en este caso: <frame name="alto" src="top.htm"> el nombre asignado es "alto". Tomemos la siguiente pgina subdividida en marcos:
<frameset cols="20%,60%,20%"> <frame name="sx" src="sx.htm"> <frame name="central" src="central.htm"> </frameset>

Pongamos que de un enlace presente en "SX" tengamos que cargar otra pgina en el marco "central". Si el enlace presente en el marco "SX", fuera simplemente: <A HREF="nuova.htm">Haz clic</A> la pgina se cargara dentro del mismo marco (es decir, "SX") porque sin adecuadas marcas especficas el navegador interpreta que debe cargar la nueva pgina en el mismo marco en que est presente el enlace. El cdigo exacto sera: <A HREF="nuova.htm" TARGET="central">Haz clic</A>

Haz clic aqu para probar. Otro uso fundamental de la marca <TARGET> es el de llamar un enlace a otra pgina, la cual se visualizar ocupando la pantalla completa y eliminando todos los marcos preexistentes. Aqu est el cdigo: <A HREF="nuova.htm" TARGET="_parent">Haz clic</A> Haz clic aqu para probar. Si insertas el cdigo: <base target="_top"> a la cabeza del documento HTML todos los enlaces presentes en las pginas eliminarn los marcos existentes, sin necesidad de ir enlace por enlace.

Es posible tambin que queramos cargar, con un solo clic, dos o ms marcos (naturalmente, la ventana tiene que estar dividida por lo menos en tres marcos). Tomemos una pgina subdividida como en la figura:
<frameset cols="120,*"> <frame name="sx" src="sx.htm"> <frameset rows="100,*"> <frame name="alto2" src="top.htm"> <frame name="centrale3" src="central.htm"> </frameset> </frameset>

Lo que queremos es insertar un solo enlace en el marco de "SX" que cargue simultneamente dos pginas diversas en los dos marcos de la derecha: "alto" y "central". Para ello, es necesario insertar algunas lneas con cdigo JavaScript. La primera parte del cdigo va insertada entre <HEAD></HEAD>: <HEAD> <script language="JavaScript"> <!-- Hiding function loadtwo(page2, page3) { parent.alto2.location.href=page2; parent.centrale3.location.href=page3; } // --> </script> </HEAD> mientras que la segunda parte deber quedar comprendida entre <BODY></BODY>, donde se quiere insertar el enlace: <BODY> <FORM NAME="buttons"> <INPUT TYPE="button" VALUE="Haz clic" onClick="loadtwo('nuovo1.htm','nuovo2.htm')"> </FORM> </BODY>

Aqu tenemos una tabla sencilla que ilustra algunas de las caractersticas del modelo de tablas de HTML. La siguiente definicin de tabla:
<TABLE border="1" summary="Esta tabla da algunas estadsticas sobre la mosca de la fruta: altura y peso medio, y porcentaje con los ojos rojos (para machos y para hembras)."> <CAPTION><EM>Una tabla de prueba con celdas fusionadas</EM></CAPTION> <TR><TH rowspan="2"><TH colspan="2">Media <TH rowspan="2">Ojos<BR>Rojos <TR><TH>altura<TH>peso <TR><TH>Machos<TD>1.9<TD>0.003<TD>40% <TR><TH>Hembras<TD>1.7<TD>0.002<TD>43% </TABLE>

podra representarse de una manera similar a sta en un dispositivo tty:

Una tabla de muestra con celdas fusionadas /-----------------------------------------\ | | Media | Ojos | | |-------------------| rojos | | | altura | peso | | |-----------------------------------------| | Machos | 1.9 | 0.003 | 40% | |-----------------------------------------| | Hembras | 1.7 | 0.002 | 43% | \-----------------------------------------/

o a sta por un agente de usuario grfico: