Espacio Latino Cine Cultura Ocio Juegos Música Técnicos Estilo

29 de A bril de 2016

Guía de diseño Plantillas Web Manual HTML C urso NVU Foro General

Las tablas
Tablas
Definición
Definir las filas
El manual completo HTML en formato PDF Definir las celdas
Títulares
¡ sólo 4 €!
arriba

Tablas
Tras confirm ar e l pago re cibirá
e l archivo e n su e m ail
La organización del texto en una página es posible gracias a las tablas. Muchas páginas web son como páginas de revistas, y
Introducción al curso la forma más simple de emular las funciones de maquetación son las tablas. Una tabla no es más que una colección de listas
y columnas a cuyas interseccinoes le vamos a llamar celdas, y es en esas celdas donde podmeos colocar textos o
El HTML imágenes. Las tablas se pueden incluso anidar y las celdas se pueden agrupar unas con otras para lograr disposiciones de
texto e imagen prácitcamente similares a las que se podrían conseguir en páginas de revistas gracias a los programas de
Mi primera página
maquetación.
El documento HTML
arriba
Formato del texto
Definir tablas
Tipos de letras
Para definir una tabla tan solo debemos definar las filas que la componen. Y dentro de estas las características de las celdas.
Caracteres especiales
Por ejemplo la siguiente tabla posee 2 filas (2 <TR></TR>) y 3 columnas (3 pares <TD></TD> en cada fila) así:
Enlaces web
<TABLE>
Listas <TR>
<TD>1,1</TD>
Imágenes <TD>1,2</TD>
<TD>1,3</TD>
Formularios </TR> 1,1 1,2 1,3
<TR> 2,1 2,2 2,3
Formularios avanzados
<TD>2,1</TD>
Mapas <TD>2,2</TD>
<TD>2,3</TD>
Tablas </TR>

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Tablas
</TABLE>
Marcos
Pero la definición va más allá, podemos poner bordes, colores de fondo a las celdas, definir márgenes en las celdas,
Hojas de estilo (1)
aumentar o disminuir el espaciado entre celdas. Resumimos todo esto en la siguiente tabla de atributos:
Hojas de estilo (2)
WIDTH Anchura de la tabla. Puede ir en pixels o en porcentaje de la anchura total disponible.
Los scripts ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
Capas BORDER Especifica el grosor del borde que se dibujará alrededor de las tabla y celdas.
BORDERCOLOR Define el color de los bordes de la tabla
Sonido
CELLSPACING Espacio entre celdas, en pixels.
Trucos
CELLPADDING Borde interior de las celdas, en pixels.
Guía de estilo
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo
Enlaces de interés siguiente:

1,1 1,2 1,3

2,1 2,2 2,3

El contenido escrito son las coordenadas de la celda, así 1,2 indica que esa celda es la correspondiente a la fila 1 y la
columna 2.

arriba

Definiendo las filas

La definición de cada fila se inicia con la etiquete <TR> y finaliza con </TR>, entre ellas colocaremos las celdas. C ada
etiqueta TR tiene los siguientes atributos:

ALIGN Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
arriba

Defiminiendo las celdas

Ya sólo nos queda definir cada celda para lo que disponemos de las TD y TH. Esta última es una celda especial que se verá
destacada, como un título para la columna: en negrita y centrado. Ambas etiquetas admiten los siguientes atributos:

ALIGN Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
WIDTH Especifica la anchura de la celda. También se puede especificar tanto en pixels como en porcentaje, teniendo en
cuenta que, en este último caso, será un porcentaje respecto al ancho total de la tabla (no de la ventana del
navegador).
NOWRAP Impide que, en el interior de la celda, se rompa la línea en varias lineas.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 COLSPAN Número de celdas de una fila agrupadas.
ROWSPAN Número de celdas de la columna agrupadas.

Los dos últimos parámetros se usan para fundir celdas de una misma fila o de una misma columna. Por ejemplo veamos
una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:

<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
1,1 y 1,2 1,3
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2</TD> 2,2 2,3
<TD>2,3</TD> 2,1 y 3,1
3,2 3,3
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>

Si te fijas cuando una celda con un colspan = 2 equivale a dos celdas a la hora de calcular el número de celdas de la fila.
Algo similar ocurre con el rowspan pero referido a celdas unidas en vertical.

arriba

Titulares
Ya hemos dicho que hay un tipo de celdas utilizable como encabezamiento o titular, pero la tabla al completo puede llevar
un título, que irá en una zona fuera de cualquier celda o fila. Esta es la etiqueta CAPTION. Su uso es muy simple como
puedes ver en este ejemplo:

<TABLE BORDER=1> Números

<CAPTION> 1,1 y 1,2 1,3
Números</CAPTION>
... 2,2 2,3
2,1 y 3,1
</TABLE> 3,2 3,3

C on el parámetro ALIGN, podemos controlar que el título aparezca arriba (por defecto TOP) o abajo de la tabla , con el valor
BOTTOM.

arriba

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 C omunidad V irtual. A lojamiento gratis

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com