Вы находитесь на странице: 1из 6

Manejo de Tablas

Las tablas se han convertido en un elemento indispensable para situar y alinear elementos en
una página html. Son como una rejilla, donde situamos elementos.
Algunos ejemplos en internet:
1. www.lanacion.com.ar
2. www.clarin.com
2. www.matematicas.net
3. www.frba.utn.edu.ar
Observe, en el ejemplo siguiente, cómo, dentro de cada casilla de una tabla es posible alinear
elementos a la derecha, centro o izquierda. Además, se puede indicar la alineación vertical:
arriba, mitad o abajo. También es posible aplicar diferentes colores a cada una de las celdas e
insertar imágenes.
Por último, se pueden eliminar los bordes de una tabla de modo que los textos e imágenes
situados dentro de una tabla estén perfectamente alineados y permitan una distribución de
elementos similar a las páginas de un periódico o revista sin necesidad de ver el contorno de la
tabla.
Ejercicio
1. Crear una tabla
En una página en blanco reproduzca la tabla que acaba de ver. Creación Material
Educativo Multimedia TELECOM - Profesores para el Futuro
Para insertar una tabla mediante KompoZer, hay tres posibilidades:
1. Usar el botón “Tabla” de la barra de botones.
2. Usar el menú “Insertar” y opción “Tabla”.
3. Usar el menú “Tabla” con la opción “Insertar”:
Definir la tabla
Al insertar la tabla, aparece un cuadro de diálogo en el que se deben definir sus características.
En él encontrará tres pestañas:
Rápido: es la opción por defecto (que esta seleccionada) y permite dimensionar la tabla de
manera gráfica. Para ello se desplaza el cursor con el mouse por la cuadrícula. Una vez
que tenga seleccionada la distribución que le interesa, haga clic en “Aceptar” y tendrá la
tabla insertada en la página.
1 Creación Material Educativo Multimedia TELECOM - Profesores para el
Futuro
Preciso: en esta pestaña puede escribir directamente el número de filas y columnas de que
constará la tabla.
Filas: Deberá escribir el número de filas que tendrá la tabla.
Columnas: Deberá escribir el número de columnas que tendrá la tabla.
Anchura: Es el ancho de la tabla. Puede colocarlo en píxeles, o en el porcentaje del espacio
que ocupará la tabla dentro del elemento donde se encuentre insertada.
Borde: Grosor en píxeles que tendrá la línea que forma el borde de la tabla. Si desea que
sea "invisible", debe asignar al borde el valor cero.

Celda: en ella es posible añadir más detalles a los elementos que vayan en el interior de las
celdas de la tabla:
Alineación horizontal: En este ítem, deberá indicar si irán sin alineación, alineados a la
izquierda, al centro, o a la derecha, según la selección que realice del menú desplegable.
Alineación vertical: puede ser: sin alinear, arriba, al centro, o abajo, según el valor que
seleccione del menú desplegable.
2 Creación Material Educativo Multimedia TELECOM - Profesores para el
Futuro
Ajuste del texto: permite que el texto introducido en la celda ocupe varias líneas. Si desea
que todo el texto se muestre en una sola línea, deberá marcar “No ajustar” .
Espacio entre las celdas: Deberá introducir el valor en píxeles que desea que haya entre
las celdas.
Relleno de las celdas: Es el valor en píxeles que habrá entre los bordes de la celda y su
contenido.

Cree una tabla. Proceda como se explica arriba y cree una tabla de 3 filas y 3 columnas.
Alineación predeterminada. Borde = 1. Margen de celdas" = 4. Espaciado entre celdas" = 0.
Ancho = 300 y seleccione en "píxeles".
Atención: los píxeles son una forma de medir la pantalla de un monitor. Si selecciona esta
opción la tabla mantendrá ese ancho siempre, independientemente del tamaño de la ventana
del navegador. Si elige porcentajes, el ancho de la tabla se ajustará al ancho de la ventana del
navegador haciendo, en muchos casos, perder la alineación y la estructura originales.
Acepte y vea la tabla creada.
2. Insertar contenido en cada casilla
Para escribir texto dentro de cada celda, debe situar el cursor, haciendo clic en cada una. 3
Como en el ejemplo inicial, es posible escribir párrafos o insertar imágenes. Incluso se pueden
insertar tablas dentro de tablas.
Texto: El texto se ajusta automáticamente al ancho de cada casilla y, a medida que se escribe,
va modificando el alto de la celda.
Para cambiar la alineación, debe seleccionar la casilla que desea modificar, pulsar el botón
derecho y elegir "Propiedades de celda". Seleccione la alineación horizontal y vertical que más
le guste.
Para cambiar el color de fondo de una celda debe ir a > "Propiedades de Celda de tabla" y en
la sección "Celdas > Color de Fondo", la casilla "color" elegir uno de los colores del menú.
El procedimiento para insertar una imagen dentro de una celda de la tabla, es el mismo que se
explicó para insertar una imagen en la página, posicionando el cursor dentro de la celda
elegida. Cuando inserte una imagen en una celda de una tabla debe tener cuidado con su
tamaño, porque si el ancho de la imagen es mayor al de la celda, se distorsionará el ancho.
Siempre es conveniente insertar una imagen con el ancho apropiado.
3. Cómo seleccionar más de una casilla a la vez
Si desea seleccionar más de una celda a la vez, debe seleccionar la primera celda y arrastrar
con el mouse hacia la derecha. Así es posible ir seleccionando las siguientes. 4 Creación
4. Otras modificaciones de las celdas y las tablas
Las celdas y tablas se modifican desde el menú "Tabla".
Desde ese menú es posible unificar celdas y tablas. Esto se hace seleccionando varias celdas
y eligiendo "Tabla" > "Unir Celdas", vemos algunos ejemplos:
1) Combinar varias celdas en una
Una fila abarca varias columnas Lista de precios
jarra de cristal 180 Pesos 60 Dólares
fuente de barro 98 Pesos 23 Euros