Modificando tablas

Insertaremos una tabla nueva, con 4 Filas y 6 columnas, por ejemplo:

La centramos en el documento, 5 px relleno de celda y 2 espacio entre ellas. Poner un color de fondo a la tabla, 0 en borde. 80% de ancho.

1

Seleccionamos la primera Columna:

2

En el Inspector de Propiedades, ponemos un color de fondo a la columna:

3

Si quitarle la selección, ir a Modificar/Tabla/Combinar Celdas:

4

Las celdas se unirán y nos queda una columna con una sola celda:

5

Situar el cursor del ratón en la última celda, pulsar el primer botón y, sin soltarlo, arrastrarlo por todas las celdas hasta seleccionarlas:

6

Modificar/Tabla/Combinar Celdas y cambiar el color de fondo a blanco:

7

Igualmente, ponemos el cursor en la ultima celda de la segunda fila pulsamos el primer botón y manteniendolo pulsado, lo arrastramos primero hacia abajo y luego a la izquierda, se irán seleccionando todas.

*Nota: igualmente a la inversa eh?? me refiero a seleccionar las celdas ;)

8

Cambiamos el color del fondo por uno que haga contraste con los dos que ya tenemos:

9

aun si queremos podríamos unir todas las celdas restantes ;) le asignamos un ancho fijo a la columna de la izquierda seleccionamos todas las demás y combinamos celdas:

10

Situamos el cursor en la columna rosa y damos varias veces a Enter:

11

el resultado es completamente distinto al que teníamos al principio… ;) También desde estos iconos, podemos dividir o unir las celdas una vez que las tenemos seleccionadas

12

En el Menú Modificar/Tabla, encontraremos también las opciones Eliminar,

cambiar tamaño, tanto de filas, o columnas ;)

Podéis ver el ejemplo Aquí

Poner un fondo a una tabla

Lo primero sera buscar el fondo que queremos poner y guardarlo en la carpeta Imágenes Insertamos una Tabla de 1 Fila y 1 columna. En Inspector de Propiedades. Seguro que ya os habréis fijado en este icono, parecido a un punto de mira:

14

Al pulsar sobre el, en el campo sale una explicación de como hemos de usarlo, es muy fácil, ponemos el cursor del ratón allá donde queremos insertar el archivo y vamos al ‘punto de mira’ nos situamos en él, pulsamos el primer botón del ratón y estiramos hacia el archivo que deseamos insertar:

13

Ampliar

Nos sera de mucha utilidad, para cambiar imagenes, vínculos .. ya iremos viendolo mas detenidamente, ahora nos servirá para insertar un fondo desde la carpeta imágenes a la tabla:

15

*Nota: Fijaos que el valor Espacio de celda, lo h cambiado a 6 px. Bueno esto es porque el fondo que uso es el de aquel blinkie famoso… los cuadritos son de seis px. y quiero que se vea solo el alto de un cuadrito, además… así nos estaremos dando cuenta que el espacio entre las celdas, es transparente… lo que bien usado se transforma en una herramienta mas a la hora de diseñar una página. ;)

Vamos también a poner un fondo a la Celda, para ello nos situaremos sobre la etiqueta <td> y en el Inspector de Propiedades:

16

Ampliar

Pulsar varios Enter y nos quedara así:

17

Ejemplo Aquí

Una cosa… fijaos que en la primera tabla, la que hicimos en el tuto anterior, habíamos puesto borde y le habíamos además, dado color al borde. En esta no lo hemos hecho ;) si no que hemos dado color al fondo de la tabla y luego a las filas y columnas también, un color de fondo y diferente al de la tabla.

Esto tiene una explicación, como ya os dije, vamos a trabajar para que se vea bien nuestra pagina en todos los navegadores, pero resulta que el color de los bordes de una tabla, solo se ve en el IE, en el Mozilla no se ve si no es aplicado con Estilos. Pero podemos ‘engañarlo’ de este modo.

Comprobarlo vosotros mismos si?? abriendo esta pagina con los dos ;)

Responder