 Atrás
|
Modificación |
Próxima
|
La versatilidad de las tablas es realmente asombrosa...
En primer lugar, vamos a centrarla. Simplemente selecciona todo el código de la tabla y pulsa el botón de centrado. El resultado será:
Ahora introduciremos algo de contenido. Podemos incluir todo lo que conocemos: Texto, listas, enlaces, imágenes y muchas otras cosas. En este ejemplo eliminaremos los "Placeholder Data" y agregaremos varias cosas con su respectivo formato:
Si quieres que todo lo que esté en la primera fila quede centrado, debes agregar el parámetro align="center" dentro del TR de apertura de dicha fila, de esta manera:
<TD align=
"center"
>
Y el resultado será:
Si por otra parte te interesa centrar únicamente el contenido de una única celda, debes insertar la instrucción dentro de la etiqueta TD correspondiente. Centraré el contenido de la celda de la segunda fila, primera columna.
Adicionalmente, haré que la lista de la parte inferior derecha vaya a la sección superior de la celda. Esto se logra con valign="top" dentro de su etiqueta TD:
Si quieres cambiar el ancho de la tabla, cambia el valor del atributo width; lo aumentaremos a 80%. Si además deseas fijar el ancho de la primera columna al 20% del total disponible, debes insertar width="20%" dentro de la etiqueta TD de la primera fila, primera columna:
¿Algo de color de fondo?. Incluye BGCOLOR (el mismo de BODY) dentro de la etiqueta TABLE. Lo pondré azul claro.
Me gustaría colocar la celda de abajo a la derecha de color verde claro. Para ello debemos incluir el atributo BGCOLOR dentro de la etiqueta TD correspondiente.
¿Te gusta la magia?. ¡Hagamos desaparecer la tabla!. Simplemente tenemos que hacer border="0" y cellspacing="0" en la etiqueta principal de la tabla.
De modo que ahora sabes cómo se construyen las páginas web. La que estás leyendo en este preciso momento se hizo de esa manera. Consiste en una tabla de una sola fila y dos columnas.
La tabla se definió con 100% para que ocupara toda el área disponible del browser, mientras que la celda de la izquierda tiene un ancho de 15% y le puse un fondo azul claro. Además, buena parte del control de los botones de navegación se hizo gracias a tablas imbuidas dentro de la celda de la derecha de la tabla principal.
Con esto sabes casi todo lo que necesitas conocer sobre tablas. Ahora incrementemos la interactividad de nuestro sitio web agregando formularios...
R1C1
R1C2
R1C3
R2C1
R2C2
R2C3
Inicio - Tablas: Creación - Modificación
| Página Inicial | Inicio de esta página |