8/9/2019 Extra Sobre Tablas

1/5

Algunas ideassobre tablasCuando diseamos una clase o una pgina Web en el editor del nodo y necesitemos distribuirimgenes y texto, recurrimos a las tablas. En esta clase les vamos a pasar algunos "trucos"para disear 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 deedicin, nos conviene situarla a un costado del texto para que no quede tanto espacio enblanco.Para hacerlo slo creamos una tabla de una fila por dos columnas, a la derecha colocamos laimagen 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 tablaocupe el mximo ancho de nuestra rea de edicin fijamos el ancho de la tabla al 100%(Ancho: 100%). Al alto no le asignamos ningn valor y entonces se ajustar al contenido de lasceldas.

Vista de usuario

Empecemos por los destacados: aquellos cuadritos con unaimagen que recomiendan a nuestros visitantes otros sitios webque les pueden servir o que tienen relacin con el IFD.El primer destacado que cada uno de uds. debera crear en susitio web es el que lleve hacia la pgina oficial del Ministeriode su provincia, o, aquellas jurisdicciones que lo tengan, al sitioweb de la Direccin de Superior.Pero, para que vean un ejemplo, aqu vamos a crear el link al sitioweb de la Biblioteca Nacional del Maestro.

Vista de edicin

8/9/2019 Extra Sobre Tablas

2/5

Tabla 2: Tabla que contiene slo texto, con espacios entre las celdas. Para armarla creamos una tabla de dos filas por dos columnas y copiamos el texto en cadacelda.Para que en la vista de usuario no se vean los bordes los seteamos en cero (Borde: 0) y paradarle entre celda y celda un espacio en blanco, seteamos un espaciado entre celda de 5pixeles (Espaciado de celda: 5). Luego para que quede entre el borde y el texto un espaciofijamos 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 seajusta al contenido.Para darle el color seteamos en las propiedades de la tabla, color de fondo blanco (Color defondo: #ffffff) y en las propiedades de la celda, color de fondo beige (Color de fondo:#f9f4d1)Vista de usuarioEn la vista de Usuario En la AdministracinLa HomePage (pgina de inicio)es lo primero que ve un visitantecuando entra a nuestro sitio. All,tipicamente, ponemos una foto osecuencia de fotos del IFD y unabreve informacin.

Si aun no tenemos ninguna foto,habr que subirla primero al sitio,para luego poder insertarla. Esteprimer paso se realiza en laseccin Imgenes dentro de lapestaa "Sitio Web".

Vista de edicin

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

En este ejemplo, tenemos un icono y queremos aadirle texto a la derecha. En el caso que lonecesitemos, podemos agregar un vnculo a otra pgina sobre esa imagen.Para hacerlo slo creamos una tabla de una fila por dos columnas, a la izquierda colocamos laimagen 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 latabla no le asignamos ningn valor y entonces se ajustara al contenido de las celdas.

8/9/2019 Extra Sobre Tablas

3/5

8/9/2019 Extra Sobre Tablas

4/5

Cols y Filas: especifica el nmero de columnas y filas de nuestra tabla.

Relleno de celda: especifica el nmero de pxeles que habr entre el contenido de la celda y elborde de sta. El nmero predeterminado es 0 pxel. En algunos casos conviene darle un valorno mayor a 3 pxeles, para que no nos quede tan pegado el texto a la lnea de la celda.

Espaciado de celda: especifica el nmero de pxeles que habr entre las celdas. Si no loespecificamos, su valor por defecto es de 2 pxeles. Si queremos que las celdas estn pegadashay que darle el valor 0.

Alineacin: Especifica la alineacin de la tabla en la pgina. Generalmente le asignamos elvalor "centrado".

Borde: especifica el ancho en pxeles de los bordes de nuestra tabla. Si no lo especificamos, elvalor por defecto es de 0 pxeles (sin borde).

Ancho y Alto: especifica el ancho y alto de la tabla, en porcentaje o en pxeles. Si no loespecificamos, la tabla se ajustar al contenido que insertemos en las celdas. Convieneasignar el ancho en porcentaje al 100% y el alto dejarlo y que se ajuste al contenido de lasceldas.Clase: son estilos predefinidos de distintos tipos de tablas. Si quieren pueden experimentar.

Subttulo de la tabla: nos habilita una nueva fila en la parte superior de la tabla.En la pestaa "Avanzado", podemos definir el color del borde y el color del fondo de latabla.

Haciendo clic en el botn Propiedades de la celda, nos aparece un cuadro de dilogo endonde podemos especificar las propiedades del contenido de las celdas.

8/9/2019 Extra Sobre Tablas

5/5

Alineacin y Alineacin vertical: especifica la alineacin horizontal y vertical del contenido dela celda.

Ancho y Alto: especifica el ancho y alto de la celda en porcentaje o en pxeles, todo referido altamao de la tabla. Por ejemplo si tenemos una tabla con dos columnas y asignamos 40% enel ancho de una celda, nos quedara la columna correspondiente de 40% y la otra del 60% delancho de la tabla.

En la pestaa "Avanzado", podemos definir el color del borde y el color del fondo de lacelda.Los dejo para que investiguen.Un abrazo,Mariano