Insertar tablas
Muy importantes en el diseño de una página. Nos sirven para colocar cualquier elemento en un lugar concreto del documento. Se les puede poner bordes u ocultarlos si no nos gusta que se vean. Mas tarde con estilos, podremos incluso hacer que los bordes se vean como un elemento mas de decoración de una tabla. Podemos ponerles color sólido, o un fondo. Pero en definitiva con ellas, haremos el diseño que deseemos ya que como veremos, nos permitirán colocar en un punto determinado cualquier elemento.
Abrimos un documento nuevo y lo guardamos con el nombre tablas. Recordar que el Dream le añade la extension que hayamos decidido ( htm, o html )Nos ha de quedar así:
tablas.htm
Otra cosa… acostumbraos a ir guardando cada vez que insertéis algo. Por si las moscas ok?
En Inspector de propiedades aplicamos un color de fondo a la página. Y vamos a insertar una Tabla vamos a Insertar/Tabla:
Nos aparecerá un cuadro de dialogo como éste:
En él, podemos definir el número de Filas, ( Verticales) Columnas, (Horizontales) el ancho en %, (También en píxeles) El borde y grosor, el relleno de celdas, que sera el espacio que va a quedar entre lo que insertemos en la tabla y su borde, el espacio entre las celdas y los encabezados, que ya tendrán un predeterminado estilo que aplicarán al contenido.
Pondremos 4 filas, 6 columnas, 80% de ancho, grosor de borde 0, si no ponemos nada en relleno y espacio, por defecto el Dreamweaver, pondrá dos píxeles. Para que no ponga nada, deberiamos poner 0. Sin encabezados.
Tendrá éste aspecto:
En el Inspector de Propiedades podremos modificarla totalmente. Pero ahora vamos a ver que nos diría de esta tabla que acabamos de insertar. Ponemos el cursor en una de las celdas.
Y aparecerán una serie de líneas y números que definen la tabla. En el centro, vemos una flechita, con el botón primario del ratón, pulsamos en ella y nos aparecerá un submenú donde podremos seleccionarla.
Ahora, seguros que tenemos la tabla seleccionada, veamos el Inspector de Propiedades:
O donde estamos situados en el espacio de la tabla, son las etiquetas html, que vemos justo encima de Propiedades:
| Etiquetas html a tener en cuenta. |
| <body> (de body, cuerpo) Hace referencia a todo el documento, que vemos en el navegador. |
| <table> (de table, tabla) a la tabla entera. |
| <tr> (de table row, fila de la tabla) a la fila donde esta el cursor |
| <td> (de table data, o datos de la tabla) a la celda. |
Además, observamos que la etiqueta <td> esta marcada, esto nos dice que es ahí, donde esta el cursor y que si ahora insertamos algún elemento, sera ahí donde quedara colocado.
Vamos a centrar la tabla en el documento, pulsamos sobre la etiqueta <table>:
en el Inspector de Propiedades vamos a Alinear y elegimos Centro
La tabla se situará en el centro del documento:
Vamos añadiendo valores como indica la captura ( a la tabla 
Ponemos color blanco (#FFFFFF) al fondo de la tabla. 3 píxeles de borde con el color #000066 para éste borde. 5 pixeles de separación entre los bordes de las celdas y el texto, o imagen que insertemos luego en ellas. Y 2 pixeles, de separación entre las celdas.
Estos valores, se los hemos puesto a la Tabla Ahora lo haremos a las filas y columnas:
Lo primero sera insertar un Texto:
No os preocupéis si vemos que esta columna ahora es más ancha, cuando insertemos texto en las demás. volverá a tener el aspecto de antes
* Nota: En realidad, irán ensanchando en función de lo que insertemos dentro de las celdas, observar como la columna del Lunes, es mas estrecha que la del miércoles Podríamos así mismo… poner un valor fijo a cada columna, como vemos en una captura más abajo.
Más adelante, veremos más sobre el ancho de las tablas y columnas
Para desplazarnos entre las columnas, emplearemos las flechas direccionales del teclado, sin tener que tocar la tabla o celdas con el cursor. Más rápido y más seguro de que no modificamos nada en absoluto de los valores que tiene dicha tabla. Seleccionamos ahora la primera columna:
En Inspector de Propiedades :
| tamaño de la Fuente: | 14 puntos, color Blanco. |
| Alineación: | Centro. |
| Ancho fijo Columna: | 50 pixeles |
| Color de fondo Columna: | #CC3300 |
( observar que en la parte de arriba de la columna, apareció el número de píxeles que ahora le hemos asignado 50)
El resultado:
Ahora seleccionaremos la primera Fila, ponemos el cursor en la primera celda:
hacemos clic en la etiqueta html, <tr>
Se seleccionará toda la fila superior:
En Inspector de Propiedades:
y nos queda así:
En el próximo tuto, continuaremos con las tablas y posiblemente, si no se hace demasiado largo, veremos algo de vínculos.
Como no hemos insertado imágenes nuevas, ni objetos que no sean lenguaje htm, tan solo habremos de subir de nuevo la pagina index.htm, sobrescribiendo la que ya tenemos arriba.
Veréisque tenemos ahora un documento con otro nombre que no es index.htm la ruta de este nuevo documento.. seria la siguiente, o no lo podríamos ver de ningún modo….. a no ser con un vinculo, pero ahí no hemos llegado aun así que hemos de poner toda la ruta completa 