2.7.- Insertar Tablas

Transcripción

1 2.7.- Insertar Tablas Las tablas son una herramienta potente para presentar datos e imágenes en páginas HTML. Proporcionan a los diseñadores Web formas de añadir estructura vertical y horizontal a una página. Se utilizan las tablas para presentar datos tabulares, diseñar columnas o disponer texto o gráficos en una página Web. Se puede agregar contenido; añadir, eliminar, dividir y combinar filas y columnas; modificar las propiedades de tablas, de filas o de celdas para añadir color y alineaciones, así como copiar y pegar celdas. Las tablas constan de tres componentes básicos: filas, columnas y celdas. Las filas son espacios horizontales, las columnas son espacios verticales y las celdas son contenedores que se originan en las intersecciones de las filas y las columnas. Algo muy similar a una hoja de cálculo es Excel. a) Creación y utilización de tablas Para insertar una tabla debemos llevar a cabo los siguientes pasos: 1.- Situamos el punto de inserción en el lugar de la ventana de documento donde deseamos que aparezca la tabla y hacemos clic en el botón Tabla de la categoría Común, en el panel Objetos, o también podemos elegir Insertar > Tabla. Aparecerá el cuadro de diálogo "Insertar tabla".

2 2.- Aceptamos los valores actuales de este cuadro de diálogo o escribimos otros nuevos. En el campo Filas, especificamos el número de filas de la tabla. En el campo Columnas, especificamos el número de columnas de la tabla. El campo relleno de celda se utiliza para especificar el número de píxeles que habrá entre el contenido de la celda y el límite de ésta. El valor predeterminado de relleno es 1 píxel. Si no deseamos relleno especificamos el valor 0. En el campo espacio de celda, especificamos el número de píxeles que debe haber entre las celdas de la tabla. El valor predeterminado es 2 píxeles o 0 si no deseamos espaciado. En el campo ancho, especificamos el ancho de la tabla como un número de píxeles o como porcentaje de la ventana del navegador. En el campo borde, especificamos el ancho en píxeles del borde de la tabla. Introduzcamos cero (0) si no desea que la tabla tenga borde. Finalmente hacemos clic en Aceptar para crear la tabla. Propiedades de las tablas El inspector de propiedades muestra las propiedades de tabla cuando hay una tabla seleccionada. Para especificar las propiedades de una tabla seleccionamos la tabla y hacemos clic en la flecha de ampliación, situada en la esquina inferior derecha del inspector de propiedades, para ver todas las propiedades.

3 En el campo Tabla podemos introducir un nombre para nuestra tabla. Los campos Filas y Cols, se utilizan para especificar el número de filas y columnas de la tabla. An especifica el ancho de la tabla como un número de píxeles o como porcentaje de la ventana del navegador. Normalmente no es preciso especificar el alto de una tabla. El campo Alinear lo utilizamos para especificar cómo debe alinearse una tabla con otros elementos del mismo párrafo, como pueden ser texto o imágenes, podemos elegir la alineación predeterminada del navegador. Los botones Borrar alto de fila y Borrar ancho de columna borran todos los valores de alto de fila y ancho de columna de la tabla. El botón Convertir ancho de tabla a píxeles se utiliza para convertir el ancho de la tabla expresada en forma de porcentaje de la ventana del navegador a su ancho actual expresado en píxeles. Utilizamos el botón Convertir ancho de tabla a porcentaje para convertir el ancho de la tabla expresado en píxeles a un porcentaje de la ventana del navegador. Podemos establecer el relleno y el espaciado de las celdas utilizando los campos Rell. Celda (especifica el número de píxeles que habrá entre el contenido de la celda y el límite de ésta) y Esp. Celda (especifica el número de píxeles que debe haber entre las celdas de la tabla). Cuando no se asignan valores específicos de espaciado y relleno de celda, Netscape Navigator, Microsoft Internet Explorer y Dreamweaver muestran la tabla como si el espaciado de celda fuera 2 y el relleno de celda fuera 1. Para establecer los bordes de la tabla disponemos de las siguientes opciones: En el campo Borde, especificamos el ancho del borde de la tabla en píxeles. La mayoría de los navegadores muestran el borde como una línea tridimensional. Si utiliza la tabla para la disposición de la página, especifique 0 como valor de borde. Para ver los límites de celda y tabla cuando el borde está definido como 0, elija Ver > Ayudas visuales > Bordes de tabla. Utiliza el campo Col. borde para seleccionar un color de borde para toda la tabla. Utiliza las opciones Color fondo para establecer la imagen de fondo o el color de fondo de la tabla. Utiliza el campo Im. fondo para establecer la imagen de fondo de la tabla.

4 b) Formato de celdas (unir, separar) Si necesitamos aplicar formato a una fila, una columna o una celda, vamos a seleccionar cualquier combinación de celdas en la tabla. Hacemos clic en la flecha de ampliación que se encuentra en la esquina inferior derecha del inspector de propiedades para ver todas las propiedades de las celdas. Disponemos de las siguientes opciones de apariencia: Utilizamos el menú emergente Horiz para configurar la alineación horizontal del contenido de una celda, una columna o una fila. Podemos alinear el contenido a la izquierda, a la derecha o al centro, o bien con el valor predeterminado del navegador (generalmente a la izquierda para celdas normales y centro para celdas de encabezado). El menú emergente Vert configura la alineación vertical del contenido de una celda, una columna o una fila. Puede alinear el contenido con la parte superior, media, inferior, con la línea de base o con el valor predeterminado del navegador (generalmente alineación al medio). En los campos An y Al, especificamos en píxeles el ancho y el alto de las celdas seleccionadas. Para usar porcentajes, introduzca el símbolo de porcentaje (%) tras el valor. Para definir una imagen de fondo para una celda, columna o fila, utilice el campo Fnd. Hacemos clic en el icono de carpeta para localizar una imagen. También podemos escribir la ruta de la imagen o utilizar el ícono de señalización. Para definir el color de fondo para una celda, columna o fila, utilizamos el campo Fnd. y con el selector de colores seleccionamos el color deseado. Para establecer un color de borde para las celdas, se utiliza la opción Borde. Disponemos de algunas herramientas que nos permiten editar las celdas como las siguientes: El botón Combinar celdas seleccionadas y crear una celda, el botón Dividir celda convertirla en dos celdas. para combinar las celdas, filas o columnas para dividir una celda y La opción No aj. Evita que se ajuste el texto, lo cual hace que las celdas sean más anchas para dar cabida a todos los datos conforme los escribes o los pegas en una celda. (Generalmente, las celdas se amplían en horizontal para dar cabida a la palabra más larga y, a continuación, se amplían en vertical.)

5 La opción Enc. Aplica formato de encabezado de tabla a las celdas o filas seleccionadas. El contenido de las celdas de encabezado de la tabla aparece en negrita y centrado de forma predeterminada. Cambiar el tamaño de tablas y celdas Se puede cambiar el tamaño de una tabla completa o bien de filas y columnas individuales. Cuando se cambia el tamaño de toda la tabla, las celdas cambian de forma proporcional. Para cambiar el tamaño de la tabla primero se selecciona, se arrastra uno de los manejadores de selección horizontales y/o verticales para cambiar el tamaño de la tabla en esa dimensión, si se arrastra el manejador de la esquina se cambian ambas dimensiones. Para cambiar el tamaño de una fila se arrastra el borde inferior de la fila y para cambiar el ancho de una columna se arrastra el borde derecho de la columna. También se pueden añadir filas o columnas, hacemos clic en una celda donde desea que aparezca la nueva fila o columna y se ejecutan alguna de las siguientes operaciones: Para añadir una fila, se elige Modificar > Tabla > Insertar fila o elija Tabla > Insertar fila en el menú contextual (éste aparece al hacer clic derecho dentro de una casilla). Para añadir una columna, se elige Modificar > Tabla > Insertar columna o elija Tabla > Insertar columna en el menú contextual. Para añadir filas y columnas, se elige Modificar > Tabla > Insertar filas o columnas, o elija Tabla > Insertar filas o columnas en el menú contextual. Aparece un cuadro de dialogo en que se introduce el número de filas o columnas que se desean añadir así como si las queremos antes o después de las seleccionadas. Si lo que necesitamos es eliminar una fila o una columna, entonces tenemos que seleccionarla y luego realizar lo siguiente:

6 Para eliminar una fila, se elige Modificar > Tabla > Eliminar fila o elija Tabla > Eliminar fila en el menú contextual. Para eliminar una columna, se elige Modificar > Tabla > Eliminar columna o elija Tabla > Eliminar columna en el menú contextual. Anidar Tablas Una tabla anidada es una tabla que está dentro de otra tabla. Se puede configurar una tabla anidada como cualquier otra tabla, no obstante, su ancho se verá limitado por el ancho de la celda en la que aparece. Para realizar estas acciones debemos hacer lo siguiente: Se selecciona la celda donde se desea que aparezca la segunda tabla y nos vamos al menú Insertar > Tabla. Otra forma es arrastrar el botón "Tabla" de la categoría Común, en el panel Objetos, hasta la celda donde desea insertar la segunda tabla. Se especifican las propiedades de la tabla en el cuadro de diálogo Insertar tabla y hacemos clic en Aceptar. c) Seleccionar Una vez creada nuestra tabla podemos seleccionar elementos de la misma, ya sea toda la tabla, una fila, una columna o bien un rango contiguo de celdas dentro de la tabla. Para seleccionar toda la tabla, realizamos los siguientes pasos: Hacemos clic en la esquina superior izquierda de la tabla o en cualquier punto del borde derecho o inferior. Hacemos clic en la tabla y elija Modificar > Tabla > Seleccionar tabla. Hacemos clic en la tabla y elija Edición > Seleccionar todo. Situamos el punto de inserción en cualquier lugar dentro de la tabla y seleccione la etiqueta <table> en el selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento.

7 Aparecerán manejadores de selección alrededor de la tabla cuando ésta esté seleccionada. Para seleccionar filas o columnas: Situamos el punto de inserción en el margen izquierdo de una fila o en la parte superior de una columna. Hacemos clic cuando aparezca la flecha de selección. Para seleccionar una o varias celdas: Hacemos clic en una celda o arrastre en horizontal o en vertical para seleccionar varias filas o columnas. d) Copiado y pegado de celdas Podemos copiar y pegar al mismo tiempo varias celdas de una tabla conservando su formato o bien copiar y pegar únicamente el contenido de la celda. Las celdas se pueden pegar en un punto de inserción o en el lugar de una selección en una tabla existente. Para pegar varias celdas de una tabla, el contenido del Portapapeles debe ser compatible con la estructura de la tabla o la selección de la tabla en la que se va a pegar. Para cortar o copiar celdas en una tabla lo primero que debemos hacer es seleccionar las celdas a copiar y utilizando los comandos cortar o copiar del menú de Edición, posteriormente nos vamos a la celda destino y seleccionamos el comando pegar del menú Edición. Si pegamos filas o columnas completas en una tabla existente, éstas se añadirán a la tabla. Si pegamos una celda individual, se reemplazará el contenido de la celda seleccionada. Si pegamos fuera de una tabla, las filas, columnas o celdas se utilizarán para definir una tabla nueva. Para eliminar el contenido de una celda únicamente se elige la opción Borrar del menú Edición o bien con la tecla Suprimir del teclado.

8 e) Ordenar datos en tablas Cuando introducimos datos en una tabla lo hacemos de forma aleatoria, es decir, sin seguir un orden específico. Una vez que tenemos los datos capturados en la tabla y necesitamos que tengan un orden entonces lo que debemos hacer es lo siguiente: Primero que nada seleccionamos la tabla, después nos vamos a Comandos y elegimos Ordenar Tabla, nos aparecerá una pantalla como la siguiente: Seleccionamos la columna por la que queremos ordenar, el tipo de dato que vamos a ordenar ya sea Numérico o Alfabéticamente y la forma en que lo queremos ordena si es Descendente o Ascendente. Luego si deseamos ordenar además por otra columna también podemos elegir. Seleccionamos las opciones que se ajusten a nuestra tabla y ordenamiento y hacemos clic en aplicar y luego en aceptar.