Unidad 8. Tablas (VII)


8.10. 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.

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 8 • Prueba evaluativa de la Unidad 8

Marzo-2015
Pág. 8.7
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.