Instituto Tecnolgico de Durango

Ing. TICs

Programacin web

lvarez Alvarado Gerardo Rafael

Manejo bsico de tablas y frames

Armando vila Bueno

11041384

Durango, Dgo.

Tablas simples
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> 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>

Campo 2 Campo 3 Campo unificado Campo 5 Campo 6 Campo 8 Campo 9

Celdas de encabezado
Dos tipos de celda pueden ser definidas en una tabla HTML. Una de ellas es la celda simple (elemento HTML td), ya definido en los ejemplos anteriores, y la otra es un tipo especial de celda (elemento HTML th) que contiene informacin de encabezado para un conjunto de celdas especficas. Los navegadores pueden representar el contenido de las celdas de encabezado de una forma especial (usualmente como texto centrado y en negrita), atributos que pueden ser visualmente logrados con la utilizacin de celdas normales (elemento HTML td) con atributos presentacionales (texto centrado y en negrita). Pero las celdas de encabezado proveen ms informacin que puede ser til para navegadores no visuales (los navegadores hablados pueden hablar al usuario el contenido de la celda e inmediatamente asociarlo a la celda de encabezado) y motores de bsqueda.
El atributo "scope"

Las celdas afectadas por una celda de encabezado pueden ser definidas de diferentes maneras, pero la ms comn de todas es hacerlo a travs del atributo "scope". Utilizado en ambos, el tag HTML td y el tag HTML th, este atributo puede tomar cuatro valores: "row" y "col" afectando respectivamente a la fila o columna contenedora, y "rowgroup" y "colgroup" afectando respectivamente al grupo de filas o columnas contenedora (descriptos ms adelante en este tutorial). En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas de encabezado que utilizan el atributo "scope":
Cdigo <table> <tr> <th scope="col">Columna 1</th> <th scope="col">Columna 2</th> <th scope="col">Columna 3</th> </tr> <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>

El atributo "headers"

Otra forma de asociar celdas de encabezado a celdas normales es a travs del atributo "headers". Este atributo es definido en celdas normales (tag HTML td) y enuncia un conjunto de celdas (usando sus atributos "id", separados por espacios) que proveen informacin de encabezado para la misma. Existe un escaso nmero de casos (y son muy raros) en que este atributo no puede ser reemplazado por el atributo "scope". El prximo ejemplo muestra una tabla superpuesta, donde existe una lnea oblcua de celdas que va desde la esquina superior izquierda a la esquina inferior derecha y sirve como lmite para definir qu celdas reciben los encabezados superiores y de la derecha, y cules los inferiores y de la izquierda.
Cdigo <table> <tr> <td>&nbsp;</td> <th id="h1">H1</th> <th id="h2">H2</th> <th id="h3">H3</th> <td>&nbsp;</td> </tr> <tr> <th id="h4">H4</th> <td headers="h1 h4 h7 h10">C1</td> <td headers="h2 h7">T1</td> <td headers="h3 h7">T2</td> <th id="h7">H7</th> </tr> <tr> <th id="h5">H5</th>

<td headers="h1 h5">B1</td> <td headers="h2 h5 h8 h11">C2</td> <td headers="h3 h8">T3</td> <th id="h8">H8</th> </tr> <tr> <th id="h6">H6</th> <td headers="h1 h6">B2</td> <td headers="h2 h6">B3</td> <td headers="h3 h6 h9 h12">C3</td> <th id="h9">H9</th> </tr> <tr> <td>&nbsp;</td> <th id="h10">H10</th> <th id="h11">H11</th> <th id="h12">H12</th> <td>&nbsp;</td> </tr> </table>

El atributo "axis"

Este atributo, que puede ser definido tanto para celdas de encabezado como para celdas normales, agrupa encabezados e informacin en categoras, en las que las celdas pueden ser clasificadas. Auque su uso es un tanto complejo, provee formas nuevas y ms amplias de proveer informacin de encabezado, especialmente en el caso de navegadores hablados para gente ciega. El siguiente ejemplo ilustra el uso del atributo "axis" como una forma de hacer a la informacin ms legible y fcil de entender.
Cdigo <table> <tr> <th scope="col">Pas</th> <th scope="col" axis="ingresos">Autombiles</th> <th scope="col" axis="ingresos">Repuestos</th>

<th scope="col" axis="egresos">Insumos</th> <th scope="col">Balance</th> </tr> <tr> <td scope="row" axis="Amrica">Estados Unidos</td> <td>$5.432.551</td> <td>$3.275.268</td> <td>-$2.235,528</td> <td>$6,472,291</td> </tr> <tr> <td scope="row" axis="Europa">Reino Unido</td> <td>$3,763,221</td> <td>$1,342,231</td> <td>-$982,268</td> <td>$4,123,184</td> </tr> <tr> <td scope="row" axis="Europa">Francia</td> <td>$2.458.197</td> <td>$2.456.841</td> <td>-$1.315,548</td> <td>$3,599,490</td> </tr> <tr> <td scope="row" axis="Amrica">Canad</td> <td>$1.846.548</td> <td>$448.556</td> <td>-$351,559</td> <td>$1,943,545</td> </tr> </table>

Qu son los frames

Los frames (en ingls frame = cuadro, bastidor o marco) es un elemento implementado por Netscape, que permite dividir la pantalla en varias reas independientes unas de otras, y por tanto

con contenidos distintos, aunque puedan estar relacionados. No hay lmites para el contenido de cada una de estas reas: tienen las mismas propiedades que la pantalla completa normal, tal y como la conocemos. No hay que confundir los frames con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la celda de una tabla es fijo, en un rea de pantalla creado por el elemento FRAME se dispone de todos los recursos del HTML. Es una zona viva.

Las pginas que contienen una definicin de FRAME no pueden contener el elemento BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del elemento FRAMESET que es el que define la creacin del FRAME. Si esto no se cumple, el FRAME ser ignorado. Algunos visualizadores no soportan los frames. Para que nuestra pgina con frames no resulte opaca a ellos, se utilizar el elemento NOFRAMES que permite ofrecer un texto alternativo en entorno normal. Los frames permiten una flexibilidad de presentacin extraordinaria, y para contenidos muy complejos, de difcil estructura por los medios convencionales del HTML, son casi insustituibles. De nuevo se presenta la duda de para qu visualizador es preferible programar nuestro WWW. Por supuesto, los frames son parametrizables en cuanto a tamao y nmero de reas, si stas se pueden redimensionar por el usuario o son fijas, si tienen o no barras de scrolling, se pueden anidar, relacionar sus contenidos, etc. Veamos algunos ejemplos prcticos y su sintaxis:

Un frame bsico. Sintaxis general En general, todas las pginas que contengan definiciones de frames, se comportan como si fuesen llamadores o "lanzaderas", y debern ser ms o menos as:
<HTML> <HEAD><TITLE> Mi titulo ></TITLE></HEAD> <FRAMESET> <NOFRAMES> <BODY> Su visualizador no soporta frames. Pulse <A HREF="indice.htm">aqui </A> para volver. </BODY> </NOFRAMES> <FRAME SRC="pagina1.htm" > <FRAME SRC="pagina2.htm" > </FRAMESET> </HTML>

Fjate en que no aparece el elemento <BODY> en su posicin habitual, sino dentro de un elemento especial que se activa slo cuando el visualizador no soporta los frames: NOFRAMES. Si no declaras el rea NOFRAMES y el visualizador no soporta este efecto, no se ver nada. Obviamente, los visualizadores que s soportan frames ignorarn el contenido del rea NOFRAMES.

Hasta aqu ya podemos hacernos una idea de cmo funcionan los frames: Lo primero es crear una minipgina con la definicin del frame, viene a ser algo as como una "lanzadera" y slo contiene la definicin del frame. Y por ltimo, crear las pginas que constituirn el contenido de cada una de las reas definidas en la "lanzadera". En el ejemplo anterior son pagina1.htm y pagina2.htm, y aqu es donde escribirs tus cosas; es decir que son pginas completamente normales, y que tambin pueden ser utilizadas de la forma habitual. A su vez, la "lanzadera" puede ser invocada con un link desde cualquier pgina normal. Como puedes ver, no es obligado crear todo tu documento con frames: puedes utilizarlos solamente all donde sea necesario, si quieres. Es posible definir cualquier combinacin de reas verticales y horizontales. La clave est en combinar adecuadamente los anidamientos del elemento <FRAMESET> con sus atributos COLS o ROWS segn interese. Como puedes ver, el ms importante es el primer <FRAMESET>, ya que es el que define cmo va a ser "troceada" la pgina inicialmente, si en porciones verticales u horizontales, y sobre esta base se debern definir todos los dems anidamientos.

Un frame de 3 reas verticales (COLS) Se vera as: Y se escribira; as: A B C

<FRAMESET COLS=30%,20%,50%> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET>

Un frame de 3 reas horizontales (ROWS) Se vera as: A B C Y se escribira as:

<FRAMESET ROWS=25%,25%,50%> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET>

Un frame combinado de un rea vertical y dos horizontales Se vera as: Y se escribira as: B A C
<FRAMESET COLS=20%,*> <FRAME SRC="a.htm"> <FRAMESET ROWS=40%,*> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> </FRAMESET>

Un frame combinado de dos reas horizontales, la de abajo dividida en dos verticales Se vera as: Y se escribira as: A B C
<FRAMESET ROWS=50%,*> <FRAME SRC="a.htm"> <FRAMESET COLS=50%,*> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> </FRAMESET>