Unidad 7. Tablas (VII)

7.10. Modos de tabla

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualización. Nosotros hemos trabajado en todo el tema con el modo estándar, y vamos a seguir trabajando con él, pero se puede pasar a los otros modos a través del menú Ver opción Modo de tabla. Dentro de esta opción podemos elegir entre Modo estándar o el Modo de tablas expandidas.

Modo de tablas

El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda a las tablas de un documento y aumenta los bordes de las tablas para facilitar la edición. Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de inserción de forma precisa e introducir contenido pero en este modo no vemos la página como quedará exactamente.

En este curso nos limitaremos al modo estándar, aunque puedes emplear el Modo de tablas expandidas cuando lo creas útil.

7.11. Adaptar webs a distintas resoluciones

Siempre que se crea una página web hay que tener en cuenta que va a ser visitada por usuarios con monitores de distintos tamaños y con distintas resoluciones. Desde las pequeñas pantallas de los portátiles de bajo coste, hasta monitores panorámicos en alta resolución.

Existen dos tendencias principales a la hora de maquetar (distribuir los elementos) en nuestra página: el diseño fijo y el diseño elástico.

  • El diseño fijo especifica las medidas en píxeles. Por lo que el contenido siempre se mostrará del mismo tamaño, lo que facilita mucho el diseño. Por contra, se desaprovecha mucho el espacio en monitores grandes, o puede aparecer el "scroll" horizontal en monitores muy pequeños. Un ejemplo de este diseño sería la home de aulaClic.
  • El diseño elástico especifica las medidas en porcentajes. Esto hace que el contenido se adapte al tamaño de la ventana en la que se visualiza, lo que nos permite aprovecharla completamente. Por contra, en diseños elaborados, es más complicado hacer que la página no se descuadre, sobre todo cuando es demasiado ancha o estrecha. Un ejemplo de este diseño es la página de este curso.

Como recordarás, el tamaño de las tablas puede ser definido en píxeles o en porcentaje. Cuando el tamaño de la tabla sea definido en píxeles, la tabla se verá del mismo modo independientemente del tamaño de la ventana del navegador. En cambio, cuando el tamaño de la tabla sea definido en porcentaje, la tabla se ajustará al tamaño del elemento que la contiene, lo cual implica que el contenido de la tabla se puede descuadrar.

Pulsa aquí para ver una página con tablas de tamaño fijo, en píxeles. Imagina que la página ha sido diseñada para visualizarse correctamente en un monitor pequeño de baja resolución.

Si modificas el tamaño de la ventana, verás que la tabla es siempre del mismo tamaño. Esto tiene un gran inconveniente, ya que si maximizas la ventana del navegador (lo que equivaldría a visualizar la página en un monitor grande con alta resolución), a los lados de la tabla aparecerá un gran espacio vacío.

Pulsa aquí para ver una página con tablas de tamaño variable, en porcentaje.

Si modificas el tamaño de la ventana, verás que las tablas se ajustan a ella. Usar tablas con tamaño variable tiene también un gran inconveniente, ya que si maximizas la ventana del navegador apreciarás claramente cómo el contenido de las tablas se descuadra, quedando demasiado estirado, lo que dificulta su lectura.

En un principio puede parecer más conveniente utilizar tablas con tamaño fijo, aunque esto implique que aparezca el hueco vacío a la derecha, en el caso de los monitores con alta resolución. Pero con un poco de práctica a la hora de manejar las tablas, puedes salvar el inconveniente del descuadre de la página y así definir páginas con tamaño en porcentaje que aprovechen el ancho cuando el monitor de más grande.

No solo puede establecerse el tamaño de la tabla, también es posible establecer el tamaño de las celdas.

El tamaño de la celda a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre están en Píxeles. En la imagen anterior, la celda no tiene una anchura concreta, se ajusta al contenido. Si la queremos exactamente de de 200 píxeles, basta con introducir 200px en An.. Para que, por ejemplo, la anchura fuera del 25 por ciento de la tabla, en An. habría que escribir 25%.

Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qué contiene cada una de ellas (imágenes, texto alineado a la derecha, texto alineado a la izquierda, texto de gran tamaño, etc.), puede conseguirse que al visualizar la página en monitores de distintos tamaños y con distintas resoluciones, la apariencia sea bastante similar, o al menos que la distribución del contenido de la tabla no se vea muy afectado por el cambio de tamaño de la ventana del navegador.

• Ejercicio propuesto de la Unidad 7 • Prueba evaluativa de la Unidad 7
Pág. 7.7

Atrás  Inicio  Adelante