Está en la página 1de 15

Intro Trabajar con tablas tiene innumerables ventajas...

Actualmente, no existe sitio web desarrollado profesionalmente que no utilice el recurso de tablas para la diagramacin de pginas web. La diagramacin web con tablas, al mismo tiempo que proporciona resultados ptimos en el diseo web, mejora tambin la performance de trabajo para el diseador o desarrollador web. Las tablas son una herramienta potente para disponer ptimamente textos e imgenes. Permiten componer el espacio de pantalla de manera ordenada, simultnea y las pginas resultan ms atractivas. Permite componer el diseo de pgina con sectores en distintos colores, distintos fondos, etc. Se pueden componer textos en distintas columnas y en paralelo, textos en distintas extensiones horizontales, etc. Con el uso de tablas es posible controlar variables de visualizacin en distintas resoluciones de pantallas. Etcteras. Si bien, en las primeras prcticas el manejo de tablas puede resultar "estructurado", ustedes vern que con la prctica afianzada y experiencia, la estructuracin tiene infinitas posibilidades y... Siempre los resultados visuales pretenciosos derivan de un creativo trabajo de diagramacin con tablas. Insistimos en que las ventajas del uso de este recurso compete tanto a los objetivos de diseo visual-esttico, como a la etapa de desarrollo y posteriores actualizaciones o mantenimiento del sitio web. /1 TIPOS DE TABLAS Existen slo 2 tipos de tablas: A FIJAS / ABSOLUTAS = Tablas definidas en pxeles. Mantienen su dimensin horizontal, sin importar el tamao de apertura de la ventana del navegador y/o la resolucin de pantalla del usuario. Ofrecen mayor control al diseador web. B VARIABLES / RELATIVAS = Tablas definidas en porcentaje. "Acomodan" horizontalmente su dimensin segn el tamao de ventana del navegador y/o resolucin de pantalla del usuario. No ofrecen al diseador web control absoluto. No obstante, existen muchos sitios que utilizan este tipo de tablas. Ejemplos de Relatividad |1. - Relatividad en relacin al tamao de apertura de la ventana del navegador y a resoluciones de pantallas. Por ejemplo... Si definimos una tabla en 100%, sta tendr aproximadamente 800 pxeles para un usuario con pantalla 800x600 y el navegador maximizado; aproximadamente 640 pxeles para un usuario con pantalla configurada en 640x480 y as segn sea la resolucin de pantalla local. |2. - Existen factores que harn que una tabla definida como variable (%) pasa a ser fija (o cambie el valor porcentual asignado). A saber... Palabras largas: Los prrafos en la edicin con MDW se van acomodando automticamente al ancho asignado a su espacio de actuacin (al igual que en un procesador de textos).

Imgenes: Por ejemplo: tenemos una tabla definida al 55% y estamos visualizando nuestro sitio en 640x480 (55% = 352 pxeles). En esta tabla insertamos una imagen de 444 pxeles. Obviamente la imagen no se va a acomodar a la tabla, sino a al revs. Tabla absoluta dentro de una relativa: Por ejemplo: definimos una tabla al 100% y dentro de ella insertamos una nueva tabla absoluta definida a 700 pxeles. En resolucin de pantalla a 640x480, la ltima tabla en pxeles gobernar sobre la relativa al 100%, y ya no representar al 100% en este caso. Recomendamos tener en cuenta este concepto al trabajar con "tablas anidadas" /2 Antes de comenzar en MDW4 ... Si bien es posible en cualquier momento de la edicin de una pgina en MDW, modificar dimensiones horizontales de las tablas (que es lo que define su tipologa), recomendamos tomar la decisin estratgica de cul tipo de tablas utilizar como recurso de diagramacin de las pginas del sitio antes de comenzar a trabajar en MDW4. Por qu? La diagramacin de una pgina web debe responder a conclusiones de la etapa "proyecto web", especficamente en lo que refiere al "perfil de la audiencia". Esto implica tener particularmente en cuenta la resolucin de pantalla de los usuarios definidos cono futuros "consumidores" de nuestro sitio web. Pero no olvidemos nunca, que aunque desde la mejor resolucin (por ejemplo 1280x1024) los usuarios debern leer en pantalla que sabemos de base tiene limitaciones. Es importante siempre conocer los siguientes datos relativos al medio y referentes a las dos cuestiones sugeridas |1. Resoluciones de pantallas Estndar Argentina = 800x600 Podramos decir que los usuarios con resolucin 640x480 van desapareciendo, pero existen! Estndar USA = 1024x768 Resoluciones menores a 800x600 son un porcentaje bastante chico, pero an no se descartan. |2. Lectura en pantalla Se recomienda una extensin horizontal mxima de texto a leer en pantalla de 300/400 pxeles Al usar tablas en porcentaje, la extensin del texto deber ser como mximo del 80%. /3 Trabajar con tablas... |3A. ORDEN DE TAREAS PARA TRABAJAR CON TABLAS Como toda tcnica, el trabajo con tablas requiere un orden de tareas que garantiza mejores tiempos de desarrollo y mejores resultados de visualizacin de la diagramacin. |1 Realizar un boceto en papel de la estructura de diagramacin que se desea obtener con la tabla. En los inicios, sugerimos no ser "ambiciosos". Imaginen tablas simples para comenzar y afianzar las prcticas, y as luego, poder trabajar con estructuras ms complejas. |2 |3 |4 |5 Ir a MDW4, abrir la pgina e insertar la tabla Insertar contenidos (textos, imgenes, etc.) Optimizar la tabla (valores dimensionales, agregados de filas o columnas, espaciados, bordes, Insertar tablas anidadas.

colores, propiedades en general, etc.) |3B. COMPONENTES DE UNA TABLA

Es fundamental conocer los componentes de una tabla para poder "manipularlas" correcta y convenientemente, tanto en su construccin (insercin) como luego en las tareas de definicin de propiedades. Adems, las primeras indicaciones que daremos a MDW para insertar una tabla ser su composicin! |CELDA |FILA |COLUMNA = Unidad bsica = Sucesin de celdas en horizontal = Sucesin de celdas en vertical

1. Crear un nuevo archivo.htm en el sitio MI_SITIO de prcticas y editar en MDW4 Para esta primera prctica no ser necesario insertar textos e imgenes y, de hecho, sugerimos no hacerlo!.

/4 INSERTAR TABLA 1 PASO |1 |2 P+DW (clase 01/1) 2 PASO En la VENTANA DE TRABAJO del documento... 1 CLIC en el espacio de pantalla indicando el punto de insercin de la tabla. 3 PASO Desde el PALETA DE OBJETOS... 1 CLIC en el icono de "insertar tabla" Activar la Paleta OBJETOS MEN Ventana Objetos/Comn Si fuera necesario, en el Panel de Objetos/VER asegurar que la VISTA ESTNDAR est

activada ( 1 CLIC en el icono Vista Estndar). Es el tipo de vista que utilizaremos siempre durante las prcticas de

4 PASO

Cuadro de dilogo INSERTAR TABLA Aceptar los valores por default, o bien... completar segn se desee... Una vez completados los valores... OK/Aceptar para confirmar LISTO! Volvemos a la ventana del documento de trabajo. Visualizamos la tabla que acabamos de insertar.

Tener en cuenta que... El cuadro de dilogo "Insertar Tabla" muestra siempre los valores indicados anteriormente por ltima vez. Todos los valores asignados en este cuadro de dilogo, pueden modificarse posteriormente desde la ventana de trabajo del documento con el Panel de Propiedades. Observar que...

La tabla est sealada en su contorno general y presenta NODOS. Es decir, LA TABLA EST SELECCIONADA = ACTIVADA. Cuando una tabla est seleccionada, el Panel de Propiedades se actualiza automticamente con la interface de Propiedades/Tabla para modificar y/o agregar propiedades o atributos a la tabla.

/5 TABLA - Seleccionar / DEFINIR PROPIEDADES La definicin de propiedades de tabla se realiza individualmente por cada tabla del documento. 5.1 Seleccionar tabla Para definir o personalizar propiedades de tablas (o de cualquiera de sus componentes), siempre ser necesario en primer trmino "seleccionar". Una de las tantas opciones para seleccionar una tabla es... 1 acercar el mouse a la esquina superior izquierda de la tabla

2 Al visualizar el icono tpico de "MOVER"... 1 CLIC! La tabla presenta bordes perimetrales en color negro y NODOS. As indica MDW que LA TABLA EST SELECCIONADA = ACTIVADA Al seleccionar una tabla, el Panel de Propiedades de MDW reconfigura su interface especfica para Propiedades de Tabla y desde all se definen todas las propiedades (modificando y/o agregando atributos). 5.2 PROPIEDADES DE TABLA /1 PASO En la ventana de trabajo... activar el Panel Propiedades Men/Ventana/Propiedades, y luego... seleccionar la tabla Se activa el Panel de Propiedades/Tablas. El Panel muestra las propiedades previas que se han definido concretamente al insertar "esa" tabla (cantidad de filas, columnas, espaciados, bordes, ancho). Todos estos valores pueden ser modificados como veremos a continuacin. La interface del Panel de Propiedades/Tabla es similar a...

Hacia la izquierda superior del Panel de Propiedades se identifica iconogrficamente una tabla: sto significa que correctamente el Panel est disponible para definir "propiedades o atributos de tabla". /2 PASO En el Panel de Propiedades/Tabla... definir atributos o propiedades para la tabla seleccionada segn se desee. Los dos sectores (superior e inferior) del Panel presentan opciones de configuracin para tablas. A saber... Las propiedades de tabla competen a todas las celdas componentes de la tabla.

| Tabla El campo editable situado debajo de la palabra "tabla" es para indicar un nombre identificatorio de la tabla actual (a nivel cdigo HTML). No es necesario completar este campo. | Filas

- Para agregar escribir un valor mayor al actual. Se agregan filas hacia abajo de las filas actuales. - Para quitar escribir un valor menor al actual. Las filas se quitan de abajo hacia arriba. | Cols=Columnas - Para agregar escribir un valor mayor al actual. Las columnas se agregan hacia la derecha. - Para quitar escribir un valor menor al actual. Se quitan las columnas de derecha a izquierda.

| An=Ancho Indica el valor actual de ancho horizontal total de la tabla (en porcentajes o pxeles). - Para modificar: indicar un nuevo valor manteniendo la unidad O bien... indicar nuevo valor y unidad (con el desplegable). | Al=Alto Indica el valor actual de altura vertical total de la tabla (en % o pxeles). Sugerimos dejar este valor siempre en blanco. | Rell. Celda=Relleno de celda Indica en pxeles el espacio-relleno interior de celdas que tiene actualmente definido la tabla. - Para agregar o modificar escribir nmeros de 0 (cero) en adelante. No especificar valor equivale a 1 (un) pxel. El valor 0 (cero) = sin relleno El relleno de celda compete a cada celda componente de la tabla. | Esp. Celda / Espaciado de celda Indica en pxeles el espacio-relleno exterior entre celda y celda que tiene actualmente definido la tabla. - Para agregar o modificar escribir nmeros de 0 (cero) en adelante. No especificar valor equivale a 1 (un) pxel. El valor 0 (cero) = sin espaciado. El espaciado de celda compete a cada celda componente de la tabla. | Alinear Indica la posicin absoluta actual de la tabla (por ejemplo, en relacin al ancho horizontal total de la pgina). Las opciones son: predeterminado - centro - derecha -izquierda. Sugerimos en un principio no trabajar con estos atributos (o bien, definir en "Predet. = predeterminado"). La alineacin de una tabla podr depender de cuestiones avanzadas en el uso de tablas. En distintos casos, centro, izquierda o derecha podrn ser relativos a la pgina, o bien, si se trata de tablas anidadas o superpuestas, la alineacin ser entonces relativa a la celda de otra tabla madre (a su vez, la celda de la tabla madre podra tener sus propios valores de alineacin). | Borde Indica en pxeles el grosor del borde que tiene definido actualmente la tabla. - Para agregar o modificar, escribir nmeros de 0 (cero) en adelante. El valor 0 (cero) = sin borde. El grosor de borde de tabla compete a la totalidad de las subdivisiones. | Col. Borde=Color del borde - Para configurar o modificar color de borde desplegar los cubos de colores e indicar el color deseado. El color de borde de tabla compete a la totalidad de las subdivisiones. | Col. Fondo=Color de fondo - Para configurar o modificar color de fondo desplegar los cubos de colores e indicar el color deseado. El color de fondo de tabla compete a la totalidad de las celdas. | Im / Imagen de fondo

Indica la ruta de la imagen de fondo que tiene actualmente la tabla. - Para definir o modificar imagen de fondo: 1 CLIC sobre el icono de carpeta a la izquierda del campo. Se abrir la ventana "Seleccionar origen de la imagen" para localizar la imagen deseada desde el sitio local de trabajo La aplicacin de imagen de fondo de tabla compete a la totalidad de las celdas. Otras opciones son... - Borrar alto de fila: elimina el valor actual de Al/Alto - Borrar ancho de columna: elimina el valor actual de An/Ancho - Convertir ancho a pxeles: convierte a pxeles el valor actual de An/Ancho. - Convertir ancho a porcentajes: convierte a porcentaje el valor actual de An/Ancho.

Luego de indicar las propiedades requeridas... tecla "enter", o bien... 1 CLIC sobre la ventana de trabajo. /6 AGREGAR - QUITAR FILAS / COLUMNAS OPCIN #1 |1 PANEL DE PROPIEDADES/Tablas seleccionar la tabla Tenemos distintas herramientas.

| 2 En el Panel de Propiedades en los campos de Filas y Columnas... FILAS / Agregar-Quitar Las nuevas filas se agregan hacia abajo de actuales. Se quitan de abajo hacia arriba en relacin a la tabla. COLUMNAS / Agregar-Quitar Las nuevas columnas se agregan hacia la derecha de las actuales. Se quitan de derecha a izquierda en relacin a la tabla.

OPCIN #2 columna.

Barra MEN/Modificar...

/A INSERTAR - ELIMINAR / Fila o Columna | rdenes directas Inserta o quita slo 1 (una) fila o |1 1 CLIC dentro de la celda a partir de la cual agregar o quitar Esto significa "indicar posicin actual" | 2 Barra MEN MODIFICAR TABLA y desde all ... 1 CLIC en la opcin segn se requiera Insertar Fila / La nueva fila se agrega hacia arriba de la posicin actual. Insertar Columna Eliminar Fila Eliminar Columna / En ambos casos, elimina la fila completa o la columna completa que corresponda a la celda o posicin actual. /B INSERTAR / Filas o Columnas... / La nueva columna se agrega a la izquierda de la posicin actual.

| Cuadro de dilogo

Inserta o quita tantas filas o columnas segn se indique y segn hacia dnde se especifique

que se realize la operacin. |1 1 CLIC en una celda = "indicar posicin actual" | 2 Barra MEN MODIFICAR TABLA y desde all ... 1 CLIC en "Insertar filas o columnas..." Aparece el cuadro de dilogo "Insertar filas o columnas"... En primer trmino... Insertar = indicar Filas o Columnas segn corresponda. Segn el componente elegido, la interface del cuadro de dilogo se reconfigura automticamente con opciones de... Cantidad de unidades a agregar = indicar en nmeros Dnde = hacia dnde insertar en relacin a la posicin actual. - arriba o abajo en el caso de filas - antes o despus en el caso de columnas).

En el caso de "Opciones #2", siempre recordar que es necesario:1 indicar posicin actual, y luego ordenar "agregar o quitar" segn corresponda. Se pueden agregar o quitar filas y columnas tantas como sea necesario.

Slo tener en cuenta que a veces es conveniente no abusar de la cantidad de subsivisiones de una tabla y trabajar con "tablas anidadas" (clase 06/2) si se desea obtener estructuras complejas de diagramacin de pantalla.

1.Editar el archivo de la clase anterior, al que le hemos insertado una tabla. Si desean, pueden trabajar con un nuevo archivo e insertarle una tabla (con varias filas y columnas) 2.Agregar a la tabla existente varias filas y columnas. Sugerimos no insertar textos ni imgenes! por el momento. /1 CELDA - Seleccionar / Definir propiedades 1A SELECCIONAR UNA SOLA CELDA...

1 CLIC en el interior de la celda a configurar.


VARIAS CELDAS...

1 CLIC sin soltar! en el interior de una de las celdas a seleccionar, y arrastar el mouse hacia arriba, abajo,
derecha o izquierda segn las dems celdas a seleccionar segn corresponda.

1 B PROPIEDADES DE CELDA /1 PASO En la ventana de trabajo...

activar el Panel Propiedades Men/Ventana/Propiedades, y luego... seleccionar la celda


La interface del Panel de Propiedades CELDA es el siguiente:

Observar que en el sector inferior de panel se identifica un icono similar al de "tabla" con una celda sombreada. sto significa que MDW ha detectado la seleccin de celda/s. Sugerimos utilizar solamente el sector inferior del Panel de Propiedades. /2 PASO En el Panel de Propiedades...

definir atributos o propiedades para la celda seleccionada segn se desee.


/2 FILA - COLUMNA: Seleccionar / Definir propiedades 2 | TRABAJAR CON FILAS...

Al igual que las tareas de definir propiedades de tabla y del celda, para definir o personalizar propiedades de FILA, siempre ser necesesario "seleccionar " (una o varias filas). Seleccionar... UNA SOLA FILA 1 acercar el mouse desde la izquierda de la tabla a la altura de la fila a seleccionar 2 Al visualizar una flecha orientada a la derecha... 1 CLIC! VARIAS FILAS 1 acercar el mouse desde la izquierda de la tabla a la altura de una de las filas a seleccionar 2 Al visualizar la flecha orientada a la derecha... 1 CLIC sin soltar! y arrastar el mouse hacia arriba o hacia abajo para seleccionar las dems filas segn corresponda.

Definir PROPIEDADES DE FILAS 2B | TRABAJAR CON COLUMNAS...es igual a trabajar con filas Seleccionar... y definir PROPIEDADES DE COLUMNA /3 RECOMENDACIONES |1| Acerca del trabajo con TABLAS EN GENERAL Recuerden que como toda tcnica, conviene trabajar con cierto orden de tareas, 1| Realizar un boceto en papel de la estructura (subdivisiones) de la tabla. 2| Insertar la tabla en el archivo.htm 3| Insertar contenidos (textos, imgenes, etc.) 4| Optimizar la tabla (valores dimensionales, agregados de filas o columnas, espaciados, bordes, colores, propiedades en general, etc.) 5| Insertar tablas anidadas Traten con cuidado las tablas. Son sus propias tablas y no las del enemigo. No "estiren" las tablas en horizontal o en vertical en forma aleatoria para definir su ancho o alto. Siempre es recomendable definir parmetros desde Paleta de Propiedades Permitan que los textos se acomoden automticamente al ancho designado a la tabla segn corresponda. Al necesitar modificar la extensin en horizontal de textos, recurrir a la optimizacin de los valores con el Panel de Propiedades. Permitan que la altura vertical de la tabla o celda se defina segn la extensin de su contenido (textos, imgenes)

Generalmente es conveniente no definir altura de celdas o de tablas. |2| Acerca de COPIAR y PEGAR TABLAS entre archivos.htm Se puede copiar y pegar tablas en la misma pgina actual, o bien, copiar y pegar tablas de pgina a pgina. |4| Acerca de TEXTOS + TABLAS Se pueden"insertar" textos en las celdas tal cual hemos aprendido. Tambin se puede copiar y pegar textos diagramados en tablas entre distinas pginas del sitio local. Las recomendaciones son las mismas que se han puntualizado al respecto en la clase de "textos para la web". Especialmente en la configuracin de "alineacin" tener en cuenta que las celdas pueden tener definida su propia alineacin horizontal. Si bien en muchos casos pueden no presentarse rdenes en conflicto, para un mejor rendimiento al establecer la alineacin de textos sugerimos OPTAR...

OPCIN 1 Alineacin segn la celda (sector inferior de la paleta) O bien... OPCIN 2 Alineacin de propias de prrafos (sector superior de la Paleta) |5| Acerca del trabajo con TABLAS SUPERPUESTAS -clase 06/2 Practiquen el uso de tablas superpuestas o anidadas y vern que el trabajo de diagramacin de una pgina web resulta ms ordenado y la visualizacin final ms ptima. Si bien las subdivisiones posibles en una tabla son infinitas, no siempre veremos la diagramacin en la pantalla del navegador tal cual se ha pretendido en su edicin web. En muchos casos es conveniente recurrir al trabajo con "tablas superpuestas" .

1| Intentemos imaginar o bocetar una estructura de tabla nica para la construccin de las pginas de ejemplo que vemos hacia la derecha. 2| Probablemente se logre a partir de dividir, subdividir y seguir subdividiendo celdas, filas y columnas a la misma tabla hasta completar aprximadamente la estructura total requerida. Pero... 3| Una tabla con infinitas subdivisiones y un continuo agregado de celdas combinadas o subdividas a su vez, generalmente no es aconsejable. Mejor dicho... 4|

El abuso de subdivisiones en una misma tabla NUNCA derivan en buenos resultados. Porque... 5| Siempre (pero siempre!) habr diferencias entre lo planificado en la edicin web y la posterior visualizacin final en el navegador de la pgina

Cuando la diagramacin de una pgina web requiere el trabajo con estructuras complejas de tablas (subdivisiones), es siempre conveniente acudir al uso de TABLAS ANIDADAS O SUPERPUESTAS . La tablas anidadas o superpuestas son simplemente "TABLAS ALOJADAS EN CELDAS DE OTRAS TABLAS" Para superponer tablas deber existir una tabla "madre" que alojar otras tablas. Cada una de las tablas componentes de la "super-estructura" (la tabla madre y las nuevas superpuestas a sta) podr presentar las subdivisiones necesarias segn el diseo lo requiera.

La diagramacin web con tablas permite componer el espacio de pantalla de manera ordena y simultnea, posibilitando que distintos elementos y objetos (textos, colores, imgenes, etc.) interactun entre s.

El recurso de tablas superpuestas implica la posibilidad de diagramar estructuras complejas asegurando una mejor visualizacin final de la pgina. El uso de tablas superpuestas tambin implica un modo de trabajo gil a nivel de edicin web para la etapa de desarrollo y ms an, en posteriores etapas de mantenimiento del sitio 1. Crear un nuevo archivo.htm en el sitio de prcticas MI_SITIO Si desean pueden trabajar con cualquier otro archivo que ya tenga insertada una tabla. 2. Editar el nuevo archivo e insertar una tabla Ser conveniente para la prctica, que la tabla presente varias subdivisiones. 3. Definir "propiedades" de tablas Y tambin de celdas, filas y columnas! 3. En la tabla, insertar contenido (textos e imgenes) /A TRABAJAR CON TABLAS ANIDADAS En realidad, practicar el trabajo con "tablas anidadas", no implica absolutamente nada nuevo! Porque... Una tabla anidada dentro de otra tabla existente, es tan slo UNA TABLA. Al ser "tan slo una tabla", los componentes son los mismos: celdas, filas y columnas! /1 INSERTAR TABLA ANIDADA O SUPERPUESTA La metodologa para insertar tablas dentro de un tabla existente, es la misma que para insertar tablas en el documento primario. 1 PASO Desde el PALETA DE OBJETOS...

1 CLIC en el icono de "insertar tabla" 1 CLIC indicando el punto de insercin de

Activar la Paleta OBJETOS MEN Ventana Objetos/Comn. 2 PASO En la VENTANA DE TRABAJO del documento... la tabla. ATENCIN Tengan en cuenta que el punto de insercin de una tabla anidada estar siempre localizado dentro de una celda de una tabla existente (que ser la tabla "madre"). Es decir:

1 CLIC dentro de una CELDA DE LA TABLA EXISTENTE donde queremos insertar la nueva tabla. 3 PASO Desde el PALETA DE OBJETOS... 1 CLIC en el icono de "insertar tabla"
4 PASO Cuadro de dilogo INSERTAR TABLA Aceptar los valores por default, o bien...

Completar los valores segn se desee para la nueva tabla a insertar.


Volvemos a la ventana del documento de trabajo, donde visualizamos...

La tabla existente
= "tabla madre" = "tabla anidada". Observar que la nueva tabla insertada est sealada en su contorno general presentando NODOS. Esto significa que... LA TABLA EST SELECCIONADA = ACTIVADA. Cuando una tabla est seleccionada, el Panel de Propiedades se actualiza automticamente con la interface de Propiedades/Tabla para modificar y/o agregar propiedades o atributos a la tabla. Y tambin...

La nueva tabla que acabamos de insertar

/2 SELECCIONAR una TABLA ANIDADA = "seleccionar tabla!" / 3 PROPIEDADES de una TABLA ANIDADA = "propiedades de Tabla!" Las tareas para definir propiedades de una tabla anidada son EXACTAMENTE IGUALES a las tareas de la prctica realizada con "tablas". Las opciones de Propiedades para la nueva tabla son iguales a las que detallamos en la definicin de propiedades de tablas en clases anteriores. Pero... Existirn algunas "relatividades". TIPS Propiedades de tablas anidadas Al trabajar con propiedades de una tabla anidada, existen factores de "relatividad" en algunos atributos de la nueva tabla. Es decir, muchos atributos estarn dependiendo por default de atributos previamente definidos en la tabla (o celda) madre. Por ejemplo: PALABRAS LARGAS Sabemos que los prrafos se van acomodando automticamente al ancho asignado a su espacio de actuacin. Por ejemplo, si escribimos letras sin espacios (ujefjefhjewfjfjrjrvbfjcafsacdsvdsvdsvdsvdsrbvj) dentro de una tabla definida al 55%, el texto no se acomodar al 55%. Por el contrario, la tabla es la que se acomodar al texto variando su valor original. Cualquier valor de ancho definido en porcentajes, tanto en la celda o tabla madre como en la nueva tabla, siempre estarn sujetos a variables segn esta situacin (exagerada) de "palabras largas". IMGENES DE CONTENIDO Por ejemplo, tenemos una celda de tabla madre definida al 55% y estamos visualizando nuestro sitio en 640x480 (55% = 352 pxeles). En esta celda insertamos una tabla anidada y luego en la esta tabla insertamos una imagen de 444 pxeles. Los valores de todos los componentes de todas las tablas siempre se acomodarn a los valores de la imagen pixelar (horizontal y verticalmente). TABLA MADRE EN % - TABLAS ANIDADAS EN PXELES Por ejemplo: definimos una tabla madre al 100% y dentro de ella insertamos una nueva tabla definida a 700 pxeles.

Las tablas anidadas definidas en pxeles siempre gobernarn sobre la tabla madre definida con valores porcentuales (en casos en que se presenten valores en conflicto). En el ejemplo, en una resolucin de pantalla a 640x480, los 700px. segn la tabla anidada no permitirn que la tabla madre represente el 100%. |ALINEACIN La nueva tabla se presentar por default alineada segn alineaciones (horizontal y vertical) definidas previamente en la celda de la tabla madre. Si a la nueva tabla se le define atributo de "alineacin absoluta", en algunos casos pueden presentarse rdenes en conflicto. Sugerimos optar por una u otra forma de alineacin de elementos. Es decir... A- alinear segn indique la celda madre, O bien... B- definir la celda madre con valores de alineacin en "predeterminado" y alinear la nueva tabla segn sus propios valores absolutos. Tener en cuenta que la alineacin absoluta de la nueva tabla slo le compete a ella misma. Es decir, no le compete a otros elementos contenidos en la misma celda de la tabla madre en la que est insertada la nueva tabla. | COLOR - IMAGEN DE FONDO Por default, la nueva tabla tomar valores de imagen y color de fondo de tabla y celda segn se hayan definido previamente en la celda o tabla madre. Obviamente, podrn indicarse valores propios para la apariencia de la nueva tabla. | + TABLAS SUPERPUESTAS Cualquier tabla anidada podr ser "madre" de otras nuevas tablas que se superpongan a ella (y as sucesivamente!). Esto es una "super-estructura" En super-estructuras tambin existirn las "relatividades" para cada tabla anidada En estos casos, habr "jerarquas de relatividades". Es decir, tablas madres, hijas, madres que pasan a ser abuelas porque los hijos tienen hijos y entonces aparecen los nietos, etc., y seguramente habr primos por all alinendose... JA! | LMITES DE SUPER-ESTRUCTURAS La superposicin de tablas no tiene lmites. El nico lmite para super-estructuras es nuestra imaginacin y especialmente nuestra concentracin. En este sentido, al igual que se recomienda no abusar de subdivisiones en una tabla nica, tampoco es recomendable trabajar con abusos de estructuras superpuestas.

También podría gustarte