Ir arriba

La forma mas fácil de organizar el contenido de nuestra página web es usando tablas. Con ellas podemos separar contenidos y editarlos facilmente sin que todo el resto se mueva.

Lo primero que deberíamos hacer, es dibujar un boceto de cómo queremos que esté organizado todo en nuestro sitio web. Un ejemplo sería este:



Después de realizar el boceto es cosa de pasarlo al editor.
Pero ¿Cómo insertar tablas en el editor web?

Para que quede claro vamos a trabajar con el ejemplo.
  • Primero, apretar el botón Tabla y en la ventana emergente elegir 3 filas (celdas horizontales) y 3 columna (las verticales), 100 % de la página y de borde 1 (Si no quieres que el borde de la tabla se vea, pon 0). Asi unicamente se verá el contenido.

  • Tendrás 3 Filas y 3 columnas, pero debemos unir algunas para que quede como queremos. Como vemos en la imagen anterior, en la primera fila donde va el logo hay 3 columnas que molestan. Para eliminarlas las unimos, ¿Cómo? asi:


Seleccionamos las 3 Filas arrastrando el mouse desde la fila 1, columna 1. Hasta la fila 1, columna 3. Le damos al boton derecho del mouse y seleccionamos: Unir celdas Seleccionadas.
y Seguimos hasta llegar a esto:



Notarás que falta la parte donde según el ejemplo pondríamos la informacion de contacto, para esto lo más simple es crear una linea horizontal.

Primero hacemos clic sobre la celda del medio (Donde pondrémos la linea) y luego: insertar -> Linea Horizontal. La linea te ayuda a separar contenido entre celdas sin tener que agregar más y más celdas.


Ya tenemos todas las partes del boceto.

Ahora pondrémos Color a las celdas y tablas.


Empezamos clickeando dentro de la tabla que queremos ponerle color, y luego apretas sobre el boton Tabla para ver sus propiedades; sino, clic secundario dentro de la tabla y luego: propiedades de tabla.

Nos vamos a la pestaña Tabla (Valga la rebundacia xD) que está al lado de celdas y en color de fondo, elejimos uno.
Tambien puedes cambiar el borde, el relleno del borde, tamaño de la ancho y el alto (Recomendable en % si no sabes de pixeles), y la alineación de la tabla dentro de la página.
Si lo que quieres es pintar celda por celda, fila por fila o columna por columna, lee mas abajo :P



Para pintar cada celda, columna o fila individualmente.
Clic en propiedades de tabla, luego seleccionas la pestaña "celdas" y te mueves con las felchas "anterior y siguiente" para seleccionar la celda que quieres pintar. Para pintar una fila o columna completa, clickea donde dice selección y elije celda, fila o columna. (Utiliza las flechas <- ->)



Es importante elejir la anchura de cada celda o columna porque sino, al poner contenido en alguna... Se mueve todo lo que hay en las siguientes!!! En el ejemplo, a la celda central le puse 50% de ancho y a las de los lados 25% cada una. Así evitamos dolores de cabeza cuando escribimos en una columna y se mueven todas!

Al final de todo debería quedar mas o menos asi:



>> Creo que con esto ya deberían haber entendido el concepto de tablas y cómo usarlas, ya que son muy útiles al momento de ordenar las cosas. Pero lo más importante es que vayas probando distintas formas hasta llegar al resultado que esperabas. Y no te desesperes, que siempre hay una solución y aquí estamos para responder a tus dudas, solo pregunta ^^