[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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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:

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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