+

INTEGRANTES :ALMA KARLA MORALES HERRERA OLGA LILIANA SANCHEZ JUAREZ JORGE ALFREDO GÒMEZ GILABRAHAM MUNGUIA GARCIA

TABLAS

INTRODUCCIÒN

Las tablas presentan una serie de datos de forma clara y organizada dividiéndolos en filas y columnas además ofrece elementos para organizar contenidos y repartir el espacio.

INSERTAR TABLAMenú insertar, a la opción tabla; se tiene que especificar el numero de filas y columnas, así como el ancho de la tabla. El ancho se puede definir por pixeles o porcentaje • GROSOR DEL BORDE: indica el grosor del borde de la

tabla en pixeles por defecto se le asigna(1).• RELLENO DE CELDA:(cellpading)indica la distancia

entre el contenido de las celdas y los bordes de estas• ESPACIO ENTRE CELDAS:(cellspancing) indica la

diferencia entre las celdas de la tablaTambién se puede establecer un ENCABEZADO para la tabla, ya sea para indicar el contenido de filas y columnas.

RELLENAR LAS CELDAS

Para insertar texto o imágenes, simplemente hay que situar el punto de inserción dentro de la celda deseada haciendo clic.

A través del menú MODIFICAR “estando en punto de inserción de la tabla", o desplegado “menú contextual; se pulsa el botón derecho sobre ellacuando se selecciona una tabla dreamweaver muestra una zona verde, el ancho de la tabla y de cada columna.• MENU DE ENCABEZADO DE

TABLA• MENU DE ENCABEZADO DE

LA COLUMNA.

SELECCIONAR ELEMENTOS DE UNA CELDA

FORMATO DE TABLA

Las propiedades de la tabla se especifican a través de su inspector de propiedades. En este caso, se crearán atributos para la tabla. Pero algunos de estos valores, como el ancho, los podemos especificar mediante CSS.

FORMATO CSSComo cualquier elemento, podemos cambiar el aspecto de la tabla definiendo propiedades CSS.

Los selectores.Podemos definir una clase y aplicársela a la tabla desde el panel Propiedades, o si es una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.

Vemos que con el selector tabla nos referimos a la tabla completa. Con el selector tr hacemos referencia a las filas y con el selector td hacemos referencia a las celdas. Cuando las celdas sean encabezados, en vez de td, emplearemos el selector th. Observa que no hay un selector para referenciar a las columnas enteras, aunque sí existe un método

Propiedades

Podemos aplicar la mayoría de propiedades que ya hemos empleado a las tablas, filas y columnas: fuente, tamaño, color, imagen de fondo.Existen algunas propiedades CSS específicas de las tablas, como el borde colapsado. Dreamweaver no nos permite asignar estos estilos con los asistentes, así que los veremos más adelante.Un estilo muy útil es el que nos permite centrar la tabla en la página. Para ello, debemos editar los márgenes izquierdo y derecho (categoría Cuadro), estableciendo el valor auto para ambos

CAMBIAR TAMAÑO DE TABLA Y CELDAS

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

AÑADIR Y ELIMINAR FILAS Y COLUMNAS

• Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opción Tabla.

• Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna. La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

INSERTAR FILAS Y COLUMNAS

También tenemos una opción más completa, la opción Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde se insertarán.

ELIMINAR UNA FILA O UNA COLUMNA

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla. También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr).

ANIDAR,DIVIDIR Y COMBINAR CELDAS

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.

ANIDAR Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya hemos visto.

:COMBINAR CELDAS

consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de separación entre una celda y otra ya que serán una sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el título de la tabla, normalmente más ancho. En este caso habría que combinar todas las celdas de la primera fila en una sola.Mientras que dividir celdas consiste en partir en dos una celda. Una de las formas de dividir y combinar celdas es a través del inspector de propiedades

DIVIDIR Para dividir una celda hay que pulsar sobre el botón del inspector de propiedades, o sobre la opción Dividir celda de la opción Tabla.En ambos casos, aparece una ventana como ésta, en la que hay que especificar si la celda se va a dividir en filas o columnas, y el número de éstas.

MODOS DE TABLA

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualización. 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.

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

ADAPTAR WEBS A DISTINTAS RESOLUCIONES

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

DISEÑO FIJOEl 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.

EL DISEÑO ELASTICO

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

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 No solo puede establecerse el tamaño de la tabla, también es posible establecer el tamaño de las celdas