Creación de Páginas Web con
NVu/KompoZer |
||
TABLAS
Las
tablas no solo son útiles para mostrar listas de datos, son
también un
elemento primordial para maquetar las páginas web, o sea,
para colocar
con cierta libertad los elementos que forman la página web.
Las tablas nos permiten organizar y distribuir los espacios de una
manera óptima. Por ejemplo no permite poner el texto en
columnas como
en los periódicos, prefijar los tamaños ocupados
por distintas
secciones de la página o poner de una manera sencilla un pie
de foto a
una imagen. En el momento en que queremos mostrar páginas
webs
atractivas y fáciles de leer nos veremos en la necesidad de
utilizar
las tablas. 1. Descripción de las tablasUna tabla podemos describirla como un conjunto de espacios organizados en filas y columnas. La intersección de las filas se llaman celdas. Una cuadrícula es una tabla, en cuyas celdas podemos poner cualquier elemento HTML, desde texto hasta imágenes. Algunos atributos propios de las tablas son:
![]() 2. Crear TablasCrear una tabla en NVU
consiste en insertar el
correspondiente elemento HTML, para lo cual tienes tres posibilidades:
![]()
![]()
![]() 3. Definir la tablaAl insertar la tabla nos aparece un cuadro de diálogo que nos permite definir las caracterísitcas de la tabla. En él encontramos tres pestañas: La primera de ellas es Rápido, es la opción por defecto y nos permite dimensionar la tabla de manera gráfica. Para ello desplazamos el cursor con el ratón por la cuadrícula. Una vez tengamos la distribución que nos interesa, hacemos clic y tendremos la tabla insertada en la página.![]()
![]()
![]() 4. Modificar tablas
Después
de insertar la tabla en nuestra página podemos modificar sus
características mediante el cuadro de diálogo
"propiedades de tabla".
Este cuadro nos permite por una parte modificar las propiedades
generales de la tabla y por otra las propiedades de las celdas. Para
usarlo la tabla o las celdas han de ser previamente seleccionadas.
Seleccionar una tabla o sus elementos es tan sencillo como colocar el cursor dentro de la tabla (hacer click con el botón izquierdo del ratón dentro de la tabla) y a continuación desplegar el menú Tabla y elegir la opción Seleccionar, dentro de ella tenemos todos los elementos de la tabla seleccionables: Tabla, Fila, Columna, Celda, Todas las celdas. También podemos llevar a cabo esta operación pulsando sobre la tabla con el botón derecho del ratón dentro de la tabla. Esto nos ofrecerá la opción Seleccionar Tabla... ![]() 5. Propiedades de la tabla
Una
vez seleccionada la tabla debemos abrir el diálogo de
propiedades. Esto
se consigue mediante cualquiera de los tres métodos:
En cualquiera de estos caminos nos lleva al cuadro de diálogo propiedades de la tabla en el que vemos claramente diferenciados cuatro apartados: el tamaño, los bordes y el interlineado, la alineación, y el color de fondo. ![]()
![]()
![]()
![]()
![]() ![]() En nuestro ejemplo la tabla tendría un aspecto como este:
Para ver como se maneja el cuadro de colores ve a esta
sección. Aunque allí se aplica este
mismo cuadro de diálogo
al color de las letras, la forma de seleccionar los colores es la
misma. 6. Propiedades de la celda
De forma similar a como
modificamos las propiedades de las tablas podemos modificar las
propiedades de celdas individuales. Se usa un cuadro de diálogo parecido al de las propiedades
de tabla y
al que se accede de manera similar. Picamos con el
botón izquierdo sobre la celda que vamos a modificar y luego
seguimos
uno de los siguientes métodos:
Sea
cual sea el método usado llegaremos a un cuadro de
diálogo con las
propiedades que podemos modificar en la celda seleccionada. El cuadro
se parece bastante al usado en propiedades de Tabla. Aquí
podemos
modificar cinco apartados: La selección, el
tamaño, la alineación, el
estilo y ajuste, y el color de fondo.
7. Otras modificacionesa) Insertar elementos
Algunas
de las operaciones que solemos realizar con las tablas no implican
necesariamente el uso de la pantalla de propiedades de la tabla o
celda, sino que están disponibles directamente en algunos
menús, por
ejemplo: inserción o eliminación de una tabla
completa, de una fila, de
una columna o incluso de celdas individuales (no recomendable).
Para insertar una fila en una tabla ya creada, basta con hacer clic con el botón derecho del ratón sobre una celda cualquiera de la fila que hayamos elegido, y en el menú emergente, dentro de la opción Insertar tabla..., marcar la opción Fila superior, o Fila inferior. O también, si el cursor está en la tabla, podemos usar el menú Tabla de la barra de menús y en la opción Insertar elegir Fila superior o inferior como en el caso anterior. Al insertar una fila podemos ponerla por encima o por debajo de la fila en la que se encuentre el cursor de edición en el momento de abrir este diálogo. ![]() De la misma forma debemos proceder para insertar columnas, solo que ahora las columnas se pueden insertar a la izquierda del cursor (columna anterior) o a su derecha (columna siguiente). ¡Incluso podemos insertar una tabla completa dentro de una celda!. Al seleccionar esta opción (Insertar Tabla -> Tabla...) nos aparecerá el ya conocido menú de inserción de tablas, que ya se ha visto en esta misma unidad. ¿Ves la potencia de las tablas?
b) Eliminando elementosDe la misma forma que insertamos filas o columnas o celdas en una tabla podemos eliminarlas, y podemos igualmente eliminar una tabla entera. El procedimiento es para borrar tablas y sus elementos es uno de los siguientes:
![]()
![]() c) Combinando celdasEs
posible unir un grupo de celdas contiguas y que éstas
compartan su
contenido. Por ejemplo podemos crear una cabecera de tabla uniendo o
combinando todas las celdas de la primera fila. Algo parecido
podríamos
hacer para ponerle un pie a la tabla. La opción de combinar
varias
celdas en una sola permite organizar el contendio de la
página web casi
en cualquier forma.
El
proceso para unir celdas comienza seleccionando varias celdas
contiguas, para ello arrastramos el ratón sobre ellas con el
botón
izquierdo pulsado. A continuación tenemos dos
métodos
![]()
![]() Las
celdas combinadas pueden volver a separarse, para ello pon el cursor
sobre la celda combinada y seguir una de las habituales caminos:
![]() |
||||||||||||||||||||||||||||||||||||||||||||
| José Manual Lara Fuillerat - 2008 - I.E.S. Carbula (Almodóvar del Río, Córdoba) | ||||||||||||||||||||||||||||||||||||||||||||