CAPITULO 3. LAS TABLAS

En esta clase, vamos a tratar un tema que no hemos abordado que es TABLAS y CAPAS.

Comencemos por Tablas, vamos a la barra común de herramientas y seleccionamos el siguiente ícono.

Nos aparece la siguiente ventana:

Si alguna vez han utilizado el Microsoft Word, nos encontramos con la misma lógica, nos pide:

• Cuántas Rows o Filas.
• Cuántas columnas o Columns.
• En pixel o porcentaje que ancho tiene que tener la tabla.
• Si deseamos que se vea el borde con relieve, que tamaño.
• Cell Padding: tamaño mínimo de pixels de la celda.
• Cell Spacing: tamaño en pixels de separación entre las celdas.

Cuando le damos ok o aceptar nos aparece la tabla en el html:

• Podemos observar en la barra de propiedades, que también podemos modificar la cantidad de columnas, de filas, el tamaño de altura y anchura, el espacio entre celdas y el tamaño de las celdas.
• Algo que se agrega en estas propiedades es el tema de alineación de la tabla con respecto al html, podemos elegir, derecha, centro o izquierda como esta desplegado en la imagen de arriba.
• Se le puede agregar nombre a la tabla (Table ID).
• Color de fondo de tabla.
• Color de borde de la tabla.
• Fondo con una imagen en vez de color para la tabla.
• Ajustar automaticamente borrando sobrantes en blanco de espacio a lo ancho o a lo alto de toda la tabla. (íconos por debajo del Table ID), ver en la imagen de arriba.

Comencemos a personalizar nuestra tabla:

• Copien en un html las propiedades de color que les muestro para comenzar a darse cuenta los cambios que pueden realizar en la tabla misma.
• Ahora fíjense en la muestra abajo, hacemos click en una de las celdas, y la barra de propiedades va a cambiar, nos muestra las propiedades de la CELDA no de la tabla.

• A su vez, podemos sumarle las propiedades de la celda a las propiedades de la tabla.
• Seleccioné todas las celdas con un "barrido" y le di los colores, como pueden ver en la imagen.
• También le dí un color al borde de las celdas.
• Fíjense que pueden colocar en vez de color de celda, un Bg, una imagen de fondo a la CELDA y no a la tabla.

• Dentro de las celdas podemos trabajar como áreas de trabajo independientes, en las tres primeras celdas superiores, escribí texto en forma normal, seteándolas por la barra de herramientas y en la celda del medio como pueden observar inserté una imagen como lo hacemos habitualmente en un html.

Las tablas son muy utilizadas para ORGANIZAR nuestro contenido dentro de un html.