Algunas ideas sobre tablas

Cuando diseñamos una clase o una página Web en el editor del nodo y necesitemos distribuir
imágenes y texto, recurrimos a las tablas. En esta clase les vamos a pasar algunos "trucos"
para diseñar mejor con tablas.

Veamos algunos ejemplos:

Tabla 1: Texto con una imagen a la derecha.

En el caso que necesitemos exponer alguna imagen que no ocupe el ancho total del área de
edición, nos conviene situarla a un costado del texto para que no quede tanto espacio en
blanco.

Para hacerlo sólo creamos una tabla de una fila por dos columnas, a la derecha colocamos la
imagen y a la izquierda el texto. Noten que en la vista de usuario no se ven los bordes (Borde:
0) y que entre el borde y el texto, hay un espacio (Relleno de celda: 3). Para que la tabla
ocupe el máximo ancho de nuestra área de edición fijamos el ancho de la tabla al 100%
(Ancho: 100%). Al alto no le asignamos ningún valor y entonces se ajustará al contenido de las
celdas.

Vista de usuario

Empecemos por los destacados: aquellos cuadritos con una

imagen que recomiendan a nuestros visitantes otros sitios web
que les pueden servir o que tienen relación con el IFD.

El primer destacado que cada uno de uds. debería crear en su

sitio web es el que lleve hacia la página oficial del Ministerio
de su provincia, o, aquellas jurisdicciones que lo tengan, al sitio
web de la Dirección de Superior.

Pero, para que vean un ejemplo, aquí vamos a crear el link al sitio
web de la Biblioteca Nacional del Maestro.

Vista de edición
Tabla 2: Tabla que contiene sólo texto, con espacios entre las celdas.

Para armarla creamos una tabla de dos filas por dos columnas y copiamos el texto en cada
celda.

Para que en la vista de usuario no se vean los bordes los seteamos en cero (Borde: 0) y para
darle entre celda y celda un espacio en blanco, seteamos un espaciado entre celda de 5
pixeles (Espaciado de celda: 5). Luego para que quede entre el borde y el texto un espacio
fijamos el relleno de celda (Relleno de celda: 5).

En este caso el ancho de la tabla lo fijamos en 447 pixeles (Ancho: 447) y el alto de la tabla se
ajusta al contenido.

Para darle el color seteamos en las propiedades de la tabla, color de fondo blanco (Color de
fondo: #ffffff) y en las propiedades de la celda, color de fondo beige (Color de fondo:
#f9f4d1)

Vista de usuario

En la vista de Usuario En la Administración

La HomePage (página de inicio) Si aun no tenemos ninguna foto,

es lo primero que ve un visitante
cuando entra a nuestro sitio. Allí,
tipicamente, ponemos una foto o
secuencia de fotos del IFD y una
breve información.
habrá que “subirla” primero al sitio,
para luego poder insertarla. Este
primer paso se realiza en la
sección Imágenes dentro de la
pestaña "Sitio Web".

Vista de edición

Tabla 3: Texto con una imagen (icono) a la izquierda.

En este ejemplo, tenemos un icono y queremos añadirle texto a la derecha. En el caso que lo
necesitemos, podemos agregar un vínculo a otra página sobre esa imagen.

Para hacerlo sólo creamos una tabla de una fila por dos columnas, a la izquierda colocamos la
imagen y a la derecha el texto. Noten que en la vista de usuario no se ven los bordes (Borde:
0) y que entre el borde y el texto, hay un espacio (Relleno de celda: 3). Al alto y al ancho de la
tabla no le asignamos ningún valor y entonces se ajustara al contenido de las celdas.
Vista de usuario

Haciendo clic en el botón Insertar/modificar tabla, nos aparece un cuadro de diálogo en

donde podemos especificar las propiedades de la tabla.

Vista de edición

Tabla 4: Cuadro de texto con una imagen (icono) a la derecha.

Para hacerlo solo creamos una tabla de una fila por dos columnas, a la derecha colocamos la
imagen y a la izquierda el texto. En esta tabla solo vamos a asignar un borde para una de las
celdas, entonces a la tabla la definimos sin bordes (Borde: 0). Luego vamos a las
propiedades avanzadas de la celda a la que queremos asignar un borde y lo definimos solo con
asignar un color de borde (azul en este caso) (Color del borde: #00357d). A esta celda
también le asignamos un color de fondo (Color de fondo: #f0f8ff)

Vista de usuario

Esta semana tenemos entonces:

 La lectura de la segunda parte de la Unidad I

 La lectura del texto de Bixio.
 La participación en el foro sobre Estrategias de
enseñanza.

Vista de edición

Recordemos cómo modificar las propiedades de una tabla.

Haciendo clic en el botón Insertar/modificar tabla, nos aparece un cuadro de diálogo en

donde podemos especificar las propiedades de la tabla.
Cols y Filas: especifica el número de columnas y filas de nuestra tabla.

Relleno de celda: especifica el número de píxeles que habrá entre el contenido de la celda y el
borde de ésta. El número predeterminado es 0 píxel. En algunos casos conviene darle un valor
no mayor a 3 píxeles, para que no nos quede tan pegado el texto a la línea de la celda.

Espaciado de celda: especifica el número de píxeles que habrá entre las celdas. Si no lo
especificamos, su valor por defecto es de 2 píxeles. Si queremos que las celdas estén pegadas
hay que darle el valor 0.

Alineación: Especifica la alineación de la tabla en la página. Generalmente le asignamos el

valor "centrado".

Borde: especifica el ancho en píxeles de los bordes de nuestra tabla. Si no lo especificamos, el

valor por defecto es de 0 píxeles (sin borde).

Ancho y Alto: especifica el ancho y alto de la tabla, en porcentaje o en píxeles. Si no lo

especificamos, la tabla se ajustará al contenido que insertemos en las celdas. Conviene
asignar el ancho en porcentaje al 100% y el alto dejarlo y que se ajuste al contenido de las
celdas.

Clase: son estilos predefinidos de distintos tipos de tablas. Si quieren pueden experimentar.

Subtítulo de la tabla: nos habilita una nueva fila en la parte superior de la tabla.

En la pestaña "Avanzado", podemos definir el color del borde y el color del fondo de la
tabla.

Haciendo clic en el botón Propiedades de la celda, nos aparece un cuadro de diálogo en

donde podemos especificar las propiedades del contenido de las celdas.
Alineación y Alineación vertical: especifica la alineación horizontal y vertical del contenido de
la celda.

Ancho y Alto: especifica el ancho y alto de la celda en porcentaje o en píxeles, todo referido al
tamaño de la tabla. Por ejemplo si tenemos una tabla con dos columnas y asignamos 40% en
el ancho de una celda, nos quedara la columna correspondiente de 40% y la otra del 60% del
ancho de la tabla.

En la pestaña "Avanzado", podemos definir el color del borde y el color del fondo de la
celda.

Los dejo para que investiguen.

Un abrazo,

Mariano