Tablas>>Más opciones de las tablas

En los ejercicios previos has ido tomando contacto con los parámetros básicos para la creación de tablas. Posiblemente ya hayas experimentado con algunas de las opciones que se han ido presentando. Si aún no lo has hecho ten en cuenta que el botón secundario del ratón te va a permitir acceder, como siempre, a menús contextuales en los que aparecerán operaciones relacionadas con el punto de la tabla en el que te encuentras en ese momento.

Recordarás que habíamos dejado pendiente la revisión de las opciones disponibles en la pestaña celda del panel de propiedades de las tablas. Puedes verlas en la animación que hay bajo este párrafo. 

Ver animación.

Recuerda que para acceder al panel de propiedades de las tablas podemos hacerlo mediante la opción de menú tablapropiedades de la tabla o, más rápidamente, haciendo doble clic sobre la celda a la que deseamos aplicar alguna modificación.

Propiedades de la celda, fila o columna

Como has visto en la animación, la opción por defecto del programa es aplicar las modificaciones a la celda desde la que hemos invocado el panel de propiedades, pero contamos con la posibilidad de afectar también a las de su misma fila o columna. 

Al editar una celda y seleccionar una fila (o columna) como destino de las propiedades se podrán ir aplicando cambios en otras filas o columnas mediante los botones anterior y siguiente, de forma que los cambios se aplicarán a cada una de ellas según nos desplazamos de una a otra.

IMPORTANTE: La mayoría de las modificaciones, tales como el cambio de altura o anchura o la alineación del texto no se aplicarán correctamente cuando se esté trabajando con CSS activado.

Podemos especificar una anchura o altura para la celda, tanto de forma absoluta (en píxeles) como relativa (respecto a la tabla en la que se encuentra).

Si elegimos no ajustar líneas en la sección de ajuste del texto podemos encontrarnos con efectos indeseables, ya que se extenderá la anchura de la celda para contener el texto en el mismo renglón. 

El comportamiento por defecto de las tablas es que se intenta repartir el espacio correspondiente a cada columna de acuerdo al contenido de las mismas, por lo que es muy conveniente que marquemos la casilla de verificacion de la sección ajuste del texto

En cuanto a los colores de fondo se especificarían igual que lo hacíamos al definir los colores de fondo de la tabla en general o de la propia página.

Como ves existen bastantes atributos de las etiquetas que se utilizan para crear las tablas, pero una vez que sabemos crear la estructura básica habrá que ir comprobando cómo se modifica el resultado final dependiendo de las variaciones que se hagan.

Unir y dividir celdas

Si acudes al menú tabla es posible que te llame la atención el comportamiento de las opciones para unir o dividir celdas:

• En principio, cuando situamos el cursor en una celda de la tabla que no sea la última de una fila aparece activa la opción unir a la celda de la derecha.
• Si hemos marcado varias celdas contiguas arrastrando con el ratón, o pulsando la teclaal hacer clic sobre cada una de ellas, aparecerá la opción unir celdas seleccionadas
• La opción para dividir celda no estará activa hasta que no situemos el ratón sobre una celda que sea el resultado de la unión previa de otras dos o más celdas.

Como ves el trabajo con las celdas de una tabla presenta algunas diferencias si lo comparamos con la forma de hacer una tarea similar en un procesador de texto,

Creación de una tabla a partir de un texto

En ocasiones puedes encontrarte con un documento que contenga ya una serie de datos ordenados que nos conviene organizar en forma de tabla. 

La única condición es que exista un separador claro que nos permita establecer las columnas de la tabla. Cumpliéndose estas condiciones bastará con seleccionar el texto que deseamos convertir en tabla y elegir la opción de menú tablacrear tabla a partir de la selección indicando en el panel cuál es el caracter separador y si deseamos o no que se elimine ese caracter al crear la tabla. 

Cada salto de renglón se interpretará como un salto de fila. La aplicación más evidente es la de convertir la lista de clase o el listado del claustro en una tabla.

Tablas anidadas

En ocasiones, especialmente cuando utilizamos las tablas como recurso de formato para distribuir la información dentro de la página, nos interesa introducir una tabla dentro de una celda perteneciente a una tabla creada anteriormente. Esto nos permitirá, por ejemplo, hacer que convivan tablas con borde junto a tablas sin borde.

Supongamos, por ejemplo, que estamos diseñando una página para introducir en ella los contenidos de una revista escolar. En la siguiente imagen podemos contemplar una posible estructura en la que vamos anidando sucesivas tablas. 

Cada color corresponde a una tabla que incluye en su interior las que son de otro color diferente.

Posible estructura de una página de revista electrónica

Como ya conocemos los códigos básicos que constituyen una tabla entenderemos rápidamente la estructura general. Para facilitar la interpretación se han recogido las etiquetas correspondientes a cada tabla con el mismo color con el que se presentan en el gráfico y se han ido sangrando las etiquetas correspondientes a cada tabla, de forma que se pueda ver con facilidad en qué celda se encuentra insertada cada una de ellas.

Introduciendo el texto correspondiente a cada zona de la hipotética pantalla obtendríamos una presentación coincidente con el ejemplo gráfico. 

<table border=0>
<tr>
<td>Enlaces a secciones</td>
<td>
<table border=0>
<tr>
<td>Logotipo </td>
</tr>
</table>
<table border=0>
<tr>
<td>Foto </td>
<td>Texto foto </td>
</tr>
</table>
<table border=0>
<tr>
<td>Noticia 1 </td>
<td>
<table border=0>
<tr> 
<td>Noticia en columnas </td>
<td>Columna 2 </td>
<td>Columna 3 </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table> 

A continuación se propone un ejercicio de investigación sobre la aplicación de las tablas. Es posible que no seas capaz de encontrar una solución efectiva todavía, pero es interesante que te plantees su búsqueda.

 

Estructuración de las tablas

Código de tabla con estilos activados	Código de tabla con estilos CSS desactivados

Como puedes ver en las capturas de pantalla, tanto si tenemos activada en las preferencias la utilización de estilos como si la tenemos desactivada, cuando creamos una tabla aparece una etiqueta que no habíamos mencionado hasta ahora: <tbody> con su correspondiente cierre. Esta etiqueta forma parte de un grupo de tres con las que definimos la cabecera, el cuerpo y el pie de una tabla, que permiten estructurar el texto contenido en la misma y cubre varias finalidades:

• Posibilita que los agentes sonoros puedan estructurar la información para leerla correctamente organizada
• Nos permite establecer grupos con las filas de datos
• En caso de tablas largas las celdas de cabecera y pie se repetirán en todas las páginas cuando imprimamos la tabla

Teniendo en cuenta lo anteriormente dicho, el código básico necesario para estructurar correctamente una tabla sería algo más amplio que lo que habíamos visto en un principio

Atributos en las opciones de edición avanzada

Cuando hacemos un doble clic sobre una tabla o cuando elegimos la opción de menú tabla propiedades de la tabla obtenemos una ventana en la que se nos muestran los códigos correspondientes a los atributos que se han establecido por defecto. No es más que un modo gráfico de mostrarnos los códigos que veríamos en la pestaña pero tiene la ventaja de que nos permite tener una visión bastante ordenada sin tener que localizarlos entre todos los componentes de la página.

En la zona inferior disponemos de un desplegable que nos va a permitir seleccionar algunos atributos complementarios, ofreciéndonos en algunos caso los valores posibles cuando estos se hayan establecidos en las recomendaciones del W3C. Vamos a ver el significado de algunos de ellos porque pueden resultar muy interesantes de cara al diseño.