hecho con NvuCreación de Páginas Web con NVu/KompoZer
Página de inicio                                                                                                                                                                  Curso de Formación TIC 2007-2008

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 tablas

Una 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:

  • Alto y ancho (height y width): pueden medirse en pixels o en porcentaje del elemento contenedor (width= "100%" indica que ocupa el ancho del elemento en el que está colocada.
  • Border (borde) : Anchura del borde que rodea a la tabla. Si es 0 el borde no se ve
  • cellpadding (relleno): margen del contenido de cada celda. Se mide en pixels.
  • cellspacing (espaciado): espacio entre las celdas. Se mide en pixels.

2. Crear Tablas

Crear una tabla en NVU consiste en insertar el correspondiente elemento HTML, para lo cual tienes tres posibilidades:
  •  a) Usar el botón tabla de la barra de botones:
Botón tabla
  • b) Usar el menú Insertar y opción Tabla:

  • c) Usar el menú Tabla con la opción insertar

3. Definir la tabla

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



  • Preciso en esta pestaña podremos escribir directamente el número de filas y columnas de que constará nuestra tabla.

    • Filas: escribimos el número de filas que tendrá nuestra tabla.

    • Columnas: lo mismo, pero para el valor de las columnas.

    • Anchura: ancho de la tabla. Puede ir en píxeles, o en el porcentaje del espacio que ocupará la tabla dentro del elemento donde se encuentre insertada.

    • Borde: Grosor en píxeles que tendrá la línea que forma el borde de la tabla, si queremos que sea "invisible" , daremos al borde el valor cero.

  • Celda, en ella podemos añadir más detalles a los elementos que vayan en el interior de las celdas de nuestra tabla:

    • Alineación Horizontal: indicaremos si irán sin alineación, alineados a la izquierda, al centro, o a la derecha, según elijamos del menú desplegable.

    • Alineación Vertical, que puede ser, sin alinear, arriba, al centro, o abajo, según el valor que elijamos del menú desplegable

    • Marcando el apartado Ajustar, permitiremos que el texto introducido en la celda ocupe varias líneas, si deseamos que todo el texto se muestre en una sola línea, marcaremos No ajustar .

    • En el apartado Espacio entre las celdas introduciremos el valor en píxeles que queremos haya entre las celdas.

    • En el apartado Relleno de las celdas, el valor en píxeles que habrá entre los bordes de la celda y su contenido.


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:
  • El botón derecho del ratón
  • El menú Tabla
  • El botón tabla de la barra de menús

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 el apartado Tamaño, podemos modificar tanto el número de filas como el de columnas introduciendo los valores en las casillas correspondientes. También es posible modificar la altura y anchura de la tabla, especificando el valor absoluto en píxeles o el valor relativo en tanto por ciento de la ventana donde se mostrará la tabla.
tamaño de tablas

  • El segundo apartado permite modificar el grosor del borde externo de la tabla, del espaciado entre las celdas de la tabla y también el relleno o espacio que hay entre los bordes de la celda y su contenido; todo ello expresado en píxeles.


  • En el tercer grupo modificaremos la alineación de la tabla, que puede ser a la Izquierda, en el Centro, o a la Derecha del elemento o ventana donde tengamos la tabla. También podemos reservar un espacio encima, debajo, a la derecha o a la izquierda de la tabla para posteriormente, una vez cerrada la ventana de propiedades, ponerle un Título a la tabla.


  • El último de los apartados nos permite poner color al fondo de la tabla, para ello pulsamos en el rectángulo y se nos abre la ventana donde elegir el color.



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:
  • El botón derecho del ratón en la celda
  • En el menú Formato: Propiedades de Ccelda de Tabla
  • El botón tabla de la barra de menús
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.


  • En el apartado Selección encontramos un menú desplegable para indicar si las modificaciones que vamos a realizar se van a aplicar sólo a la celda seleccionada, a la fila o a la columna donde a la que pertenece esa celda (como si hubiéramos seleccionado toda la fila o toda la columna)

  • El apartado Tamaño funciona igual que las propiedades de la tabla, pudiendo introducir en altura y anchura los valores de tamaño absoluto en píxeles o relativos en % sobre el tamaño de la tabla. Ojo el alto de la celda afecta a toda la fila y el ancho a toda la columna.

  • La Alineación del contenido nos permite dos opciones:
  • Alineación vertical, en la que el contenido de la celda puede situarse en la parte superior, en el centro, o en la parte inferior de dicha celda.
  • Alineación horizontal, en la que el contenido puede ser situado a la izquierda, en el centro, a la derecha, o justificado por igual a ambos bordes laterales de la tabla.
Alineaciones
Izquierda Centro Derecha
Superior
Medio Inferior
  • En cuanto al estilo de celdas tenemos dos posibilidades, celdas normales, que serán la mayoría de las celdas de la tabla, y celdas cabecera (suele aplicarse a la primera fila o la primera columna) cuyo contenido aparecerá en mayor tamaño y en negrita.

  • El apartado Ajuste del texto ofrece dos opciones, una que el texto ocupe en la celda una sola línea, sin importar su longitud, o que ocupe varias líneas dentro de la misma celda de forma automática

  • El último de los apartados corresponde a la posibilidad de cambiar los Colores de fondo de las celdas, ya sea de forma individual, o combinándolo con el apartado selección, hacerlo por filas o por columnas, según el diseño que hayamos pensado para nuestra tabla. Su uso es similar al que hemos visto en propiedades de tabla.

7. Otras modificaciones

Una tabla puede modificarse también en cuanto a su definición e incluso en su cuadriculado aspecto, es lo que les da su gran flexibilidad. Así podemos: la insertar y eliminar de tablas, filas, columnas o celdas y la unión o división de celdas.
a) 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?

  Una tabla dentro de otra  
 
 
 
 
     

b) Eliminando elementos

De 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:

  • Hacemos clic con el botón derecho del ratón en cualquier punto del interior de la tabla y en el menú emergente elegimos la opción Eliminar tabla y dentro de ésta, lo que queremos borrar.
  • Seleccionar previamente la tabla, y después de desplegar el menú Tabla, elegir la opción Eliminar y dentro de ésta, lo que queremos borrar.

c) Combinando celdas
Es 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.

     
     
     
celda combinada
     
     

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
  • Pulsamos con el botón derecho del ratón eligiendo en el menú emergente la opción Unir celdas seleccionadas.
  • Desplegamos el menú Tabla y elegimos unir celdas seleccionadas.

Las celdas combinadas pueden volver a separarse, para ello pon el cursor sobre la celda combinada y seguir una de las habituales caminos:
  • Con el botón derecho se despliega el menú y se elige Dividir celda
  • Con el menú Tabla se elige la opción Dividir celda.
Dividir celdas

[ir arriba]

José Manual Lara Fuillerat - 2008 - I.E.S. Carbula (Almodóvar del Río, Córdoba)