PDF de programación - 1.6 Tablas

Imágen de pdf 1.6 Tablas

1.6 Tablasgráfica de visualizaciones

Publicado el 6 de Mayo del 2018
378 visualizaciones desde el 6 de Mayo del 2018
177,4 KB
7 paginas
Creado hace 15a (31/05/2008)
Páginas web ::: Tablas
Diseño de materiales multimedia. Web 2.0

42



1.6 Tablas



Páginas web ::: Tablas
Diseño de materiales multimedia. Web 2.0

43



1.6 Tablas


1.6.1 Introducción

Las tablas están formadas por filas (horizontales) y columnas (verticales), y el espacio en que
intersectan se denominan celdas. Aunque es una práctica muy extendida, no se recomendable
utilizar tablas para maquetar texto e imagen en una página web. Si se utilizan tablas en lugar
de contenedores DIV para situar elementos en una página, su accesibilidad puede verse
seriamente afectada. Por ello las tablas deben reservarse para presentar datos de forma
tabular.

1.6.2 Ejemplo: tabla de datos

Crear el documento


1. Extrae a la carpeta miweb el contenido del archivo ZIP que se adjunta a
continuación. Como resultado de esa extracción encontrarás en esta carpeta un
archivo de texto (poblacion.txt) y una imagen (poblacion.gif). Arrastra la imagen
dentro de la carpeta images.

2. Abre Kompozer haciendo doble clic sobre el acceso directo a este programa situado

en el escritorio.

3. Minimiza esta ventana y sitúate en la carpeta miweb para hacer doble clic sobre el
archivo poblacion.txt. Se abrirá el Bloc de Notas mostrando el contenido de este
archivo.

4. Desde el Bloc de Notas elige Edición > Seleccionar todo y luego Edición > Copiar.
5. Cierra la ventana del Bloc de Notas.
6. Sitúate en el nuevo documento HTML que estás editando con Kompozer y a

continuación elige Editar > Pegar

7. Pulsa y arrastra sobre la primera línea de texto para seleccionarla: “Demografía

española”. A continuación despliega el cuadro de estilos de párrafo y elige Título 1.

8. Antes de añadir imágenes conviene indicarle a Kompozer donde se guardará esta
página. Para ello clic en el botón Guardar, introduce como título: “Demografía de
España” y guárdala como poblacion.html dentro de la carpeta miweb.


Insertar imagen


botón Imagen.

9. Sitúa el cursor después del texto y antes de los datos. A continuación pulsa en el



10. En el cuadro de diálogo Propiedades de la imagen haz clic en el botón Elegir archivo
… y navega para
la carpeta
miweb\images. Selecciona este archivo y pulsa en Aceptar. Observa que la casilla
Ubicación de la imagen se muestra la ruta relativa respecto a la página actual:
images/poblacion.gif . Esto es así porque está activada la casilla La URL es relativa a
la dirección de la página.

imagen poblacion.jpg dentro de

localizar

la



Páginas web ::: Tablas
Diseño de materiales multimedia. Web 2.0



44



11. En el cuadro de texto Texto Alternativo escribe: “Demografía española”.
12. Clic en la pestaña Apariencia y en el cuadro Borde sólido introduce el valor 1 como

grosor en píxeles del borde que mostrará la imagen.



13. Pulsa en el botón Aceptar.


Crear una tabla de datos

Existen dos procedimientos alternativos para crear la tabla:

Insertar una tabla en blanco.


• Convertir el texto existente en una tabla.


Vamos a estudiar primero un método y luego el otro.



Páginas web ::: Tablas
Diseño de materiales multimedia. Web 2.0

45


Método 1. Insertar una tabla en blanco


14. Clic inmediatamente debajo de la imagen para situar el cursor en este espacio.
15. Pulsa en el botón Tabla disponible en la barra de herramientas Redacción.

16. En el cuadro de diálogo Insertar tabla puedes arrastrar el puntero sobre la cuadrícula
para definir el número de filas y columnas que tendrá la nueva tabla. Para terminar
haz clic en la última celda de la parrilla creada.

17. Esta opción sólo permite crear tablas de 6x6 celdas como máximo. Para un ajuste más
fino, como es el caso que nos ocupa, pulsa en la pestaña Preciso. Introduce el
número de filas: 20 y el número de columnas: 3. En Anchura indica los píxeles
exactos de ancho que tendrá la tabla o bien el % que ocupará del ancho total de la
ventana. Conviene utilizar una anchura 100 % de la ventana ya que se esta forma la
tabla se ajusta automáticamente al espacio disponible en la ventana del navegador.

18. Para que la tabla no muestre el borde introduce el valor 0 en la casilla Borde.
19. Clic el botón Aceptar.



Páginas web ::: Tablas
Diseño de materiales multimedia. Web 2.0

46



20. De esta forma se crea una tabla en blanco. Normalmente se crea la tabla y luego se
va rellenando introduciendo los datos por teclado. Sin embargo en este caso se podría
completar celda a celda mediante Editar > Cortar (Ctrl+X) y Editar > Pegar (Ctrl+V)
utilizando el contenido que ya tenemos en el documento. Teniendo en cuenta que los
datos ya tienen un preformato podemos aprovechar para utilizar el procedimiento de
convertir el texto en una tabla tal y como se explica en el siguiente apartado.

21. Si deseas modificar algún parámetro de la tabla inicial haz clic derecho sobre ella,
elige Seleccionar Tabla > Tabla y luego pulsa en el botón Tabla de la barra de
Redacción. Con esta rutina se muestra el cuadro de diálogo Propiedades de la tabla
donde es posible editar alguno de sus parámetros.



Método 2. Crear tabla a partir de una selección



los datos.



22. Pulsa y arrastra sobre el documento para seleccionar todas las líneas que contienen

23. En la barra de menús de Kompozer debes seleccionar Tabla > Crear tabla a partir de

la selección o simplemente pulsa en el botón Tabla de la barra de Redacción.

24. En el cuadro de diálogo Convertir en tabla marca la opción Otro carácter e introduce
un asterisco “*”. Si te fijas el asterisco es el carácter que separa un dato de otro
dentro de la misma línea. A continuación activa la casilla Borrar carácter separador.



Páginas web ::: Tablas
Diseño de materiales multimedia. Web 2.0



47

25. Pulsa en Aceptar y verás como los datos se organizan en filas y columnas formando la

tabla de resultados.



Dar formato a la tabla



26. Pulsa y arrastra para seleccionar las celdas de la primera fila. Una vez seleccionadas

haz clic derecho sobre ellas y elige la opción Color de fondo de la tabla o celda …

27. En el cuadro de diálogo Color de la tabla o de la celda selecciona un color
predefinido y pulsa en el botón Aceptar. Observa que esto hará que la fila de
encabezado de tabla se muestre con este color de fondo.



Páginas web ::: Tablas
Diseño de materiales multimedia. Web 2.0

48



28. Mantén la tecla Ctrl pulsada para ir haciendo clic sobre todas las celdas de las filas
pares. Una vez seleccionadas repite los pasos 27-28 para definir un color gris de
fondo. La diferencia de color entre una fila y la siguiente facilitará la lectura de los
datos.

29. Para realizar cambios en la tabla completa haz clic derecho sobre cualquier punto de
la tabla y elige Seleccionar tabla > Tabla. Con esta acción se selecciona la tabla
completa.

30. A continuación pulsa en el botón Tabla de la barra de herramientas.
31. En el cuadro de diálogo Propiedades de la Tabla se pueden configurar sus múltiples
parámetros. En este caso sitúa un 0 en el cuadro Borde para evitar que se visualice el
borde la tabla.

32. Para terminar pulsa en el botón Aceptar.
33. No olvides hacer clic en el botón Guardar para conservar el trabajo.
  • Links de descarga
http://lwp-l.com/pdf10856

Comentarios de: 1.6 Tablas (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad