|
|
 |
|
|
|
TEMA 4: Formato avanzado del documento |
|
| |
4.5 Las celdas
La celda es la unidad mínima y principal
de una tabla. En ellas podemos colocar cualquier otro elemento que
hayamos visto, títulos, textos, ligas, imágenes e incluso
otras tablas.
Podemos decir que las celdas son elementos con vida propia, ya que
son configurables totalmente: su borde, altura y anchura, color de
fondo e incluso alineación de los elementos que en ella se
contienen.
Algunas de las etiquetas que se usan para la configuración
de las celdas son:
width="*" |
Determina el ancho de celda,
y se especifica en píxeles o porcentaje. |
|
rowspan="*" |
Permite unir dos o más celdas
en sentido horizontal (filas), su medida es la cantidad
de filas a unir. |
|
colspan="*" |
Permite unir dos o más celdas
en sentido vertical (columnas), su valor es la cantidad
de columnas a unir. |
|
bgcolor="#*" |
Determina el color del fondo
de la celda. |
|
align="***" |
Especifica la alineación horizontal
del contenido de la celda en posiciones: izquierda, centrada
o derecha. (left, center, right) |
|
valign="***" |
Especifica la alineación vertical
del contenido de la celda en posiciones: arriba, centrada,
abajo. (top, middle, bottom). |
|
Para crear tus tablas, sigue las instrucciones descritas en el tópico
anterior y practiquemos los atributos de celdas con los siguientes
ejemplos:
| CELDAS
A) |
celdaA.html |
|
Crea una tabla que contenga 2 filas y 2 columnas, con 90%
de ancho y borde de 0 píxel.
| celda 1 |
celda 2 |
| celda 3 |
celda 4 |
|
| |
|
| CELDAS
B) |
celdaB.html |
|
Ahora haremos que la primera fila se expanda al ancho de
las tres columnas, utilizaremos el atributo rowspan.
|
| |
|
| CELDAS
C) |
celdaC.html |
|
Utilizaremos la primera fila con su celda expandida, como
contenedora de un título, el que tú quieras.
En la celda 3 colocaremos una imagen y en la celda 4 un texto.
Puedes probar configurando las celdas de diferente forma hasta
que logres el resultado que mejor te parezca.
Aprendamos a programar tablas
|
 |
Programar
tablas y configurar celdas con este pequeño tutorial
es muy fácil, todo es cuestión de practicar.
Una tabla es un elemento de organización y diseño.
Es divertido y práctico. |
|
| |
|
¡Listo!
Ya tienes un diseño de página. Sigue intentado otras
combinaciones de atributos, tanto de tabla como de celda y consigue
el resultado que desees.
TIPS |
|
Puedes utilizar tablas para crear menús, ya sea con ligas
de texto o de imágenes. Si quisieras hacer un menú
vertical puedes intentarlo colocando una sola columna y la cantidad
de filas como secciones tenga. En el caso de ser un menú
horizontal puedes colocar una fila y tantas columnas como secciones.
¡Deja volar tu creatividad! |
|
|
| |
|
|
|
 |
|
|
|
