Crea tu Web: Indice de diseño  
Tablas (I)
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 atractgivas y fáciles de leer nos veremos en la necesidad de utilizar las tablas. 		 
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: 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.

 

Tablas HTML
Crear Tablas

Crear una tabla en NVU consiste en insertar el correspondiente elemento HTML, para lo cual tienes tres posibilidades:

Usar el botón tabla de la barra de botones: Botón tabla
Usar el menú Insertar y opción tabla: Insertar Tabla Usar el menú Tabla con la opción insertar Tabla insertar
 
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.

 

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




Diseño Web | Plantillas Web | Guia de Estilo | Lenguaje HTML | Curso NVU
Comunidad Virtual. Alojamiento web