Curso de diseño web - Apuntes
Tablas:
Desde que se comenzaron a diseñar las primeras páginas web, los diseñadores tratamos de obtener el mayor control posible del diseño. En un principio, la única manera de organizar el contenido era con tablas -a pesar de que su función original es la de tabular datos-.
El lenguaje HTML va evolucionando y paralelamente los navegadores. Todavía la mayoría de los sitios web publicados están armados con tablas, pero actualmente se está reemplazando su uso con la combinación de etiquetas DIVs y estilos CSS.
El objetivo de este cambio es lograr un código HTML más limpio separando el contenido del diseño. Esto mejora la accesibilidad, posibilita adaptar el diseño a diferentes dispositivos, facilita el trabajo en equipo y la actualización del sitio. (ver apuntes: Maquetar con DIVS y CSS y Web semántica, accesibilidad y estándares)
Características de las tablas
Medidas de tabla y resolución pantalla:
La tabla se utiliza como contenedor de todos los objetos dentro de una página. Es el elemento que define las medidas de ésta y la forma en que se relaciona con la pantalla del usuario. El ancho de tabla puede ser absoluto o relativo. Una tabla de 780 px (por ejemplo), ocupa casi toda la pantalla de un monitor de 800 x 600 de resolución, o deja espacios hacia la derecha o hacia ambos lados en un monitor de 1024 x 768. Dicha tabla genera un diseño rígido (desde el punto de vista del usuario que la navega) ya que para resoluciones mayores a 800 x 600 desperdicia espacio. En cambio se puede utilizar una tabla de 80% de ancho (por ejemplo) de manera que siempre ocupe ese porcentaje de la ventana independientemente de la resolución del monitor. Esto da como resultado un diseño más flexible y el usuario puede acomodar la ventana de su navegador como más le convenga ya que el diseño se adaptará a ésta.
Propiedades de tabla:
Con la tabla seleccionada, desde la ventana Propiedades se pueden modificar los siguientes datos:
Filas: desde la ventana Propiedades se puede agregar o quitar la última fila de la tabla (abajo). Si se quiere agregar o quitar una fila en otra ubicación, se puede hacer con el botón derecho del mouse o desde el menú Insertar.
Columnas: desde la ventana Propiedades se puede agregar o quitar la última columna de la tabla (a la derecha). Si se quiere agregar o quitar una columna en otra ubicación, se puede hacer con el botón derecho del mouse o desde el menú Insertar.
Espacio entre celdas: es una propiedad que se aplica a toda la tabla y define en pixels el espacio entre las celdas (calles).
Relleno de celda: es una propiedad que se aplica a toda la tabla y define en pixels la distancia entre el borde de la celda y su contenido. Esta opción se usaba antes para definir márgenes, pero ahora, utilizando estilos CSS se puede aplicar esta propiedad individualmente a cada celda.
Alineación: se refiere a la alineación de la tabla con respecto a la página y a la alineación de las tablas entre sí.
Propiedades de celdas:
La intersección de las filas con las columnas genera celdas. En ellas se puede colocar texto o imágenes. Con el cursor dentro de una celda, en la paleta propiedades se pueden modificar los siguientes datos:
Alineación horizontal y vertical: define la alineación del contenido de las celdas (textos o imágenes) con respecto a los límites de la celda.
Ancho y alto de celdas: al insertar una tabla (si no se arrastran los bordes con el mouse), las celdas no tienen medidas de ancho ni de alto. Al colocar contenido en su interior, las celdas se adaptan. Las imágenes fuerzan a las celdas a que tomen una medida determinada, en cambio el texto, es más flexible y se acomoda formando una columna.
Asignándole un valor al ancho de una celda se define el ancho de toda la columna, pero esa medida solamente tiene valor si el contenido de las celdas (por ejemplo una imagen) es igual o menor. Si por ejemplo, una celda tiene un ancho de 80 px, y se coloca una imagen de 100 px en su interior, la celda (y toda la columna) medirán 100 px reales aunque en el código diga 80.
A las celdas también se les pueden asignar un valor relativo, en ese caso debe escrbirise el signo "%" sin las comillas.
Dividir y combinar celdas: es una opción que se debe utilizar con mucho cuidado. Al combinar dos celdas se elimina la división entre ambas, esa opción puede resultar en algunos casos, pero si al colocar contenido, la tabla se desacomoda, sin duda es por esta razón. En ese caso, conviene replanetar el armado y utilizar tablas anidadas, o separadas. Dividir celdas es más arriesgado todavía, esta opción no divide la celda seleccionada sino que agrega por ejemplo una columna a toda la tabla y combina las celdas de arriba y de abajo (con respecto a la seleccionada) para que aparenten ser una sola.
Ancho y alto de celdas y tablas:
Se pueden eliminar con un solo clic todas las medidas de ancho y alto de las celdas y de la tabla desde la ventana Propiedades. Esta opción es útil para limpiar el código y volver a asignarle valores o para que la tabla se adapte al contenido.
Color de fondo:
La tabla y las celdas por defecto son transparentes. Se puede elegir un color de fondo para la tabla y un color de fondo para cada celda independientemente.
Imagen de fondo:
La tabla y las celdas pueden contener imagenes de fondo, estas quedan por arriba del color de fondo pero por debajo del contenido de la celda. Por defecto, una imagen de fondo se repite en x y en y. Para que esto no suceda, se puede resolver desde un estilo CSS donde se define si repite en x, en y o si no repite.
Tablas anidadas:
Normalmente las páginas se resuelven con más de una tabla. Puede colocarse una tabla debajo de otra, pero una al lado de otra no es conveniente. Para colocar una tabla al lado de otra se utiliza una tabla mayor (de dos columnas y una fila) que contenga a ambas.
Cuando se trabaja con tablas anidadas sin bordes ni espacio entre celdas, es difícil seleccionar cada tabla con el mouse. En ese caso conviene seleccionarla desde la etiqueta de código:
Links recomendados:
Por qué maquetar con estándares:
http://www.cesargarcia.com/inquiettudes/index.php/2006/02/23/por-que-maquetar-con-estandares/