Maquetacion (Tablas)

[FUNDAMENTOS DE PROGRAMACION WEB] HTML
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
DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 1

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)

Cargado por

Copyright:

Formatos disponibles

Maquetacion (Tablas)

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Maquetacion (Tablas)

Cargado por

Copyright:

Formatos disponibles

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 1

2. Como se crea una tabla

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 2

note que la primera esta en negrita.

3. Propiedades de una tabla

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 3

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

Veamos con un ejemplo

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 4

 top: Los datos de la celda se alinean con la parte superior de la celda.

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

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 5

Mire el siguiente diseño

Ahora note el siguiente diseño

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 6

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 7

Por ejemplo vamos a seleccionar algunas celdas y combinar las celdas

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 8

Veamos el resultado que se obtiene de realizar lo anterior

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 9

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 10

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 11

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

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 12

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 13

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 14

También podría gustarte