Portal/creacion de contenidos/editor html/botones tabla

Botones en la categoría Tabla

Los botones de edición de tablas nos permitirán crear tablas, añadirle o quitarle filas y celdas, combinarlas, darles formato etc... Para acceder a este menú, se puede activar mediante los iconos de la barra de herramientas y también desde el propio ratón. Pulsando con el botón derecho del ratón sobre cualquier espacio en blanco en el editor HTML se abrirá una lista de opciones, entre las cuales está Insertar/Modificar tabla. Una vez creada la tabla, los mismos botones que se explican a continuación están accesibles pulsando sobre la misma tabla con el botón derecho del ratón.

Insertar / modificar tabla

Este botón nos permitirá crear una tabla y modificar las propiedades de la misma. Pulsando sobre él se nos abrirá la siguiente ventana donde podremos indicar las propiedades de la tabla que vamos a crear:

La ventana está compuesta de dos pestañas: General y Avanzado.

PESTAÑA GENERAL:

En esta pestaña especificaremos las propiedades básicas de la tabla que son:

• Columnas: El nº de columnas que tendrá la tabla. Por defecto aparecen definidas 2 columnas pero podremos sustituir este número por el deseado.

• Filas: El nº de filas que tendrá la tabla. Por defecto aparecen definidas 2 columnas pero podremos sustituir este número por el deseado.

• Borde interior de las celdas: Nos permite especificar el margen que tendrá la celda. Sus valores deberían estar comprendidos entre 0 y 6. El valor 0 especifica que la celda no tendrá margen, es decir el texto que contendrá la celda irá pegado al borde de la celda y el 6 indica que el texto tendrá un margen amplio. Se puede especificar un valor mayor que 6, aunque dicho valor debería ser suficiente para un buen aspecto visual de la tabla.

• Espacio entre celdas: Permite especificar el margen que habrá entre celdas; para un valor 0 las celdas estarán pegadas unas con otras. Cuanto mayor sea el valor, más separadas estarán las celdas.

• Alineación horizontal: Permite establecer la alineación de la tabla en el cuadro de texto. Se puede elegir alineada a la izquierda, a la derecha o centrada.

• Borde: Especifica si la tabla tendrá borde o no, es decir si se verán las líneas que la componen; un valor 0 hará que la tabla no tenga borde y no haya líneas que marquen las celdas. A mayor valor, la tabla tendrá un borde más grueso.

• Ancho: Indica el ancho que tendrá la tabla. Se puede especificar en píxeles y en porcentaje. Si lo indicamos en porcentajes hay que poner al final del número un “%”, por ejemplo: 100%, si lo especificamos en píxeles no hay que poner nada detrás del número.

El porcentaje de ancho indica cuanta pantalla abarcará la tabla en términos porcentuales, por ejemplo el 100% indica que el ancho de la tabla será toda la página, el 50% que el ancho de la tabla será la mitad de la página, etc…

Los píxeles son la unidad en la que se mide la resolución de la pantalla, suele tener 1024 de ancho y 768 de alto. Muchos ordenadores antiguos tienen una resolución de 800x600.

• Alto: Indica el alto que tendrá la tabla. Se puede especificar en píxeles y en porcentaje. Si lo indicamos en porcentajes hay que poner al final del número un “%”, por ejemplo: 100%, si lo especificamos en píxeles no hay que poner nada detrás del número.

El porcentaje de alto indica cuanta pantalla abarcará la tabla en términos porcentuales, por ejemplo el 100% indica que el alto de la tabla será todo lo que ocupe la página, el 50% que el alto de la tabla será la mitad de la página, etc…

Los píxeles son la unidad en la que se mide la resolución de la pantalla, suele tener 1024 de ancho y 768 de alto. Muchos ordenadores antiguos tienen una resolución de 800x600.

La PESTAÑA AVANZADO nos permitirá realizar acciones más complejas que explicamos en un apartado especialmente dedicado a : funciones avanzadas

Propiedades de la fila

• Paso 1: Pulsar sobre el botón de propiedades de la fila. Este botón sólo estará activo cuando haya una tabla creada aunque no es necesario que en sus celdas exista contenido. Además el cursor del ratón deberá estar situado dentro de la celda de una fila para que se muestre activo.

• Paso 2: Se abrirá un Popup con las opciones:

PESTAÑA GENERAL

• Fila en parte de tabla: Permite indicar en qué posición de la tabla se encuentra la fila, si en la cabecera, el cuerpo o el pie. Por defecto, se encontrará en el cuerpo.
• Alineación horizontal: La alineación horizontal del texto dentro de la fila.
• Alineación vertical: La alineación vertical del texto dentro de la fila.
• Alto: Para definir el alto de la fila.

Propiedades de la celda

• Paso 1: Seleccionar las propiedades de la celda, pulsando sobre el botón: Este botón sólo estará activo cuando haya una tabla creada, aunque no es necesario que en sus celdas exista contenido. Debemos además situar en cursor del ratón en una de las celdas para que se active.

• Paso 2: Se abrirá un Popup con las opciones:

PESTAÑA GENERAL

• Alineación horizontal: La alineación horizontal del texto dentro de la celda.
• Tipo de Celda: Sirve para definir si será una celda normal o una celda cabecera (las celdas título de una tabla). La celda cabecera lleva un formato diferente.
• Alineación vertical: La alineación vertical del texto dentro de la celda.
• Ancho: Sirve para definir el ancho de la fila.
• Alto: Sirve para definir el alto de la fila.

Insertar fila antes

Este botón nos permitirá insertar una nueva fila en la tabla. Se creará por encima de la fila donde tengamos situado el cursor.

Por ejemplo, supongamos que tenemos la siguiente tabla y queremos insertar una nueva fila antes de la fila donde aparece el nombre Antonio y la edad 25.

Para ello situamos el cursor en cualquiera de las celdas de la fila donde poneAntonio y activamos el icono Insertar una fila antes. La tabla tendrá el siguiente aspecto:

A continuación podremos introducir el texto que queramos en cualquiera de las celdas de la nueva fila.

Insertar fila despues

Este botón nos permitirá insertar una nueva fila en la tabla. La fila se creará por debbajo de la fila donde tengamos situado el cursor.

Por ejemplo, supongamos que tenemos la siguiente tabla y queremos insertar una nueva fila a continuación de la fila donde aparece el nombre Alberto y la edad 32.

Para ello situamos el cursor en el nombre Alberto pulsando con el ratón sobre el nombre y a continuación pulsamos el botón “Insertar una fila después”. Se nos creará una nueva fila y la tabla tendrá el siguiente aspecto:

A continuación podremos introducir el texto que queramos en cualquiera de las celdas de la nueva fila, situando en ella el cursor.

Eliminar fila

Este botón nos permite eliminar filas. La fila que se eliminará al pulsarlo será aquella en la que tengamos situado el cursor.

Supongamos que queremos eliminar la fila que contiene el nombre Álvaro, para ello basta con situar el cursor en cualquiera de las celdas de la fila y pulsar el botón “Eliminar fila”; ésta desaparecerá automáticamente.

Insertar columna antes

Este botón nos permitirá insertar una nueva columna en la tabla. La columna se insertará justo antes (a la izquierda) de la columna donde está situado el cursor.

Por ejemplo, supongamos que tenemos la siguiente tabla y queremos insertar una nueva columna a la izquierda de la columna de título Nombre.

Para ello situamos el cursor sobre cualquier celda de la columna “Nombre” y pulsamos el botón “Insertar una columna antes”. Se nos creará una nueva columna a la izquierda y la tabla tendrá el siguiente aspecto:

A continuación podremos introducir el texto que queramos pulsando con el ratón en cualquiera de las nuevas celdas.

Insertar columna despues

Este botón nos permitirá insertar una nueva columna en la tabla. La columna se insertará justo después (a la derecha) de la columna donde está situado el cursor.

Por ejemplo, supongamos que tenemos la siguiente tabla y queremos insertar una nueva columna a la derecha de la columna de título “Nombre”.

Para ello situamos el cursor sobre cualquier celda de la columna “Nombre” y pulsamos el botón “Insertar una columna después”. Se nos creará una nueva columna a la derecha de la columna “Nombre” y la tabla tendrá el siguiente aspecto:

A continuación podremos introducir el texto que queramos en cualquiera de las celdas de la nueva columna.

Eliminar una columna

Este botón nos permite eliminar columnas. La columna que se eliminará al pulsarlo será aquella en la que tengamos situado el cursor.

Supongamos que queremos eliminar la columna “Apellidos”, para ello basta con situar el cursor en cualquier celda de dicha columna.

A continuación pulsamos el botón “Eliminar columna” y ésta desaparecerá automáticamente.

Funcionalidades avanzadas

Combinar celdas

Este botón nos permitirá agrupar dos o más celdas en una sola. Por ejemplo, supongamos que queremos agrupar las celdas Nombre y Apellidos de la siguiente tabla:

Para ello, tenemos que seleccionar ambas celdas simultáneamente, con el ratón podemos seleccionar de izquierda a derecha el texto “Nombre” y el texto “Apellidos” y de esta forma ambas celdas se marcarán como seleccionadas:

A continuación pulsamos el botón “Combinar celdas” apareciendo el siguiente popup, donde se indicará el número de celdas que se quieren combinar, tanto verticales como horizontales.

En el caso concreto que estamos viendo queremos dejar 2 columnas en 1 fila. Pondremos estos valores en las correspondientes cajas de escritura y pulsaremos el botón Actualizar.

Dividir celdas

Este botón es útil cuando queremos dividir celdas que hemos agrupado mediante el botón “Combinar celdas”.

Para ello nos situamos sobre la celda que hemos combinado y pulsamos sobre el botón “Dividir celdas”. El resultado de hacer esto para el ejemplo anterior sería

Como podemos observar la celda, efectivamente, se ha dividido en dos de nuevo pero el texto se ha quedado agrupado en la celda de la izquierda. Esto es normal ya que el editor no sabe como recolocarlo.

Mostrar / ocultar líneas guía

Este botón puede ser utilizado para ocultar las líneas discontinuas que delimitan las filas y columnas de una tabla y así poder ver el aspecto final que tendrá la tabla.

Para ello basta con pulsar con el ratón sobre la tabla y pulsar el botón. El aspecto de una tabla con las líneas guías es el siguiente:

Y sin las líneas guías este otro: