maquetacion (tablas)

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

DOCENTE: Salinas Encinas, Aldo [email protected] Página 1

Capítulo: CREANDO TABLAS (Maquetación 1)

1. ¿Qué significa maquetar?

Ordenar contenido (imágenes, texto, etc) dentro de un

espacio.

Maquetación, composición de una página, compaginación de

diferentes elementos. Son términos diferentes, que se utilizan

para hacer referencia a una misma cosa; la forma de ocupar el

espacio del plano mesurable en la página.

Todo diseñador gráfico, cuando inicia su trabajo, se encuentra

con el problema de cómo disponer el conjunto de elementos

de diseño impresos (texto, titulares, imágenes) dentro de un

determinado espacio, de tal manera que se consiga un equilibrio estético entre ellos.

Maquetar un diseño consiste en dar un formato a los documentos, a todo el conjunto de elementos que lo

componen, las imágenes, los textos, etc



2. Como se crea una tabla

Para poder crear una tabla primero debemos definir cuantas filas y columnas va a tener dicha tabla.

En esta tabla mostrada tiene 3 columnas (vistas de manera vertical) y 2 filas (vistas de manera horizontal).

Para poder crear una tabla, utilizaremos la etiqueta <table></table>

Debemos tener presente que:

<tr></tr> inserta una linea en la tabla

<th></th> inserta una columna pero en negrita (Bold)

<td></td> inserta una columna normal

Vamos a crear la figura anterior mostrada, donde hay 2 filas y 3 columnas



note que la primera esta en negrita.

Si deseamos que se muestre la tabla como en la imagen incial, solo debemos agregarle borde

3. Propiedades de una tabla

A una tabla no solo le podemos agregar borde, sino tambien color, una imagen de fondo, alinearlo, dar espacios

entre sus filas y columnas, etc.

align Este atributo especifica la posición del título con respecto a la tabla.

align = top|bottom|left|right

Valores posibles:

top: El título está en la parte superior de la tabla. Este es el valor por defecto. bottom: El título está en la parte inferior de la tabla. left: El título está a la izquierda de la tabla. right: El título está a la derecha de la tabla.

background Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.

bgcolor Da color de fondo a la tabla.

border Define el número de píxel del borde principal.

bordercolor Define el color del borde.

height Define la altura de la tabla en píxel o porcentaje.

width Define la anchura de la tabla en píxel o porcentaje.



cellpadding Define, en píxel, el espacio entre los bordes de la celda y el contenido de la misma.

cellspacing Define el espacio entre los bordes (en píxel).

Veamos con un ejemplo

Su codigo es:

Algunas propiedades de las celdas, en el ejemplo anterior ya se vieron por ejemplo la propiedad style, veamos otras más:

valign Este atributo especifica la posición vertical de los datos dentro de una celda.



valign = top|middle|bottom|baseline

Valores posibles:

top: Los datos de la celda se alinean con la parte superior de la celda. middle: Los datos de la celda se centran verticalmente dentro de la celda. Este es el valor por defecto. bottom: Los datos de la celda se alinean con la parte inferior de la celda. baseline: Todas las celdas que estén en la misma fila que una celda cuyo atributo valign tenga este valor

deberían tener sus datos textuales posicionados de tal modo que la primera línea de texto aparezca en una línea de base común para todas las celdas de la fila. Esta restricción no se aplica a las líneas subsiguientes de texto de estas celdas.

height Define la altura de la celda en píxel o porcentaje.

width Define la anchura de la celda en píxel o porcentaje.

background Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.

4. Como modificar la forma y cantidad de filas y columnas

Para poder modificar la cantidad de filas y columnas, solamente hay que agregarlas nada mas. Tengamos presente

que la cantidad de columnas y la cantidad de filas deben ser iguales, para eso existen colspan y rowspan veamos

como se utiliza dichas propiedades.



Mire el siguiente diseño

Note que el titulo TABLAS ocupa el espacio de las 3 columnas, veamos cual es el código para realizar eso.

Ahora note el siguiente diseño

Veamos cual es el código para generar 2 filas en una sola.



Pero utilizando Dreamweaver es mucho más fácil su entendimiento, veamos por ejemplo a partir del diseño de una tabla

Mostrándose lo siguiente, el cual arrastramos de uno de los tiradores como se muestra:



Ahora con el tamaño selecciona podemos utilizar el panel de propiedades, pero debemos tener presente de seleccionar la tabla

Por ejemplo vamos a seleccionar algunas celdas y combinar las celdas

Veamos el resultado



Ahora, así como podemos combinar celdas también podemos dividir celdas ya sea por filas o columnas, veamos

Veamos el resultado que se obtiene de realizar lo anterior



Finalmente podemos personalizar con el panel de propiedades asignando color, alienación, borde, etc. Ahora veamos el código que se ha generado



5. Tablas avanzadas

Algunas tablas complejas están formadas por más elementos que filas y celdas de datos. Así, es común que las tablas más avanzadas dispongan de una sección de cabecera, una sección de pie y varias secciones de datos. Además, también es posible agrupar varias columnas de forma lógica para poder aplicar estilos similares a un determinado grupo de columnas.

Las partes que componen las tablas complejas se definen mediante las etiquetas <thead>, <tbody> y <tfoot>. La cabecera de la tabla se define con la etiqueta <thead>, el pie de la tabla se define mediante <tfoot> y cada sección de datos se define con una etiqueta <tbody>.

Cada tabla puede contener solamente una cabecera y un pie, pero puede incluir un número ilimitado de secciones. Si se define una cabecera y/o un pie, las etiquetas <thead> y/o <tfoot> deben colocarse inmediatamente antes que cualquier etiqueta <tbody>.



Veamos un ejercicio de maquetación, realizaremos la siguiente página

El cual es código generado para obtener esta maquetación es:



Ahora si deseamos podemos mejorar nuestra página colocándole imágenes, animaciones, enlaces, logo, etc…

maquetacion (tablas)

Documents