Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o más celdas.
Tengo una tabla que contiene una sola celda en la cual puse una imagen de fondo para poder agregarle texto encima de mi imagen, para ello inserte otra tabla dentro de la tabla que contiene la imagen, el problema que tengo es que no se que parametros usar para poder moverla la tabla que tiene el texto, solo la puedo alinear con el parametro align, pero yo quiero poder especificar una posición.
Esta segunda tabla de 150 X 200 es la que quiero poder mover por la otra tabla de 750 x 395, no se que parametros tenga que agregar?
La diferencia entre alinear y posicionar una tabla
En la lista desplegable Align podemos ajustar la alineación que deseamos para nuestra tabla dentro del documento.
Left alinea la tabla a la izquierda de los demás elementos (por lo que el texto del mismo párrafo se ajusta alrededor de la tabla a la derecha); Right alinea la tabla a la derecha de los demás elementos (con el texto ajustado alrededor a la izquierda); y Center centra la tabla (con el texto encima y/o debajo de la tabla).
Cuando la alineación está establecida como Predeterminado, no se muestra otro contenido junto a la tabla.
Por tanto, el parámetro align únicamente permite colocar la tabla a la izquierda, a la derecha o en el centro respecto a los demás elementos. No permite indicar una coordenada concreta dentro de otra tabla.
La tabla anidada y sus limitaciones
Una tabla anidada es una tabla dentro de una celda de otra tabla.
La composición de las páginas Web se organiza insertando los elementos como texto e imágenes en tablas.
En HTML tenemos la posibilidad de presentar información estructurada gracias a la posibilidad de crear tablas. Básicamente, una tabla es una estructura compuesta por Filas y Columnas en las que en cada celda resultante podemos incluir cualquier tipo de información.
Las tablas sirven para organizar datos e imágenes en un archivo HTML.
Es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla.
Se recomienda evitar el uso de tablas para maquetar tu página web.
Cuando se utiliza una tabla grande como fondo y otra tabla dentro de su única celda, la tabla interior está sometida al comportamiento normal del contenido de esa celda. En consecuencia, sus controles habituales son el ancho, el alto, la alineación horizontal y la alineación vertical, pero no una posición libre equivalente a las coordenadas de una capa.
Configuración de la tabla exterior
La tabla exterior puede tener un ancho de 750 píxeles y un alto de 395 píxeles. El ancho puede venir dado por pixeles o por porcentajes de la ventana.
En el inspector de propiedades de tabla, el campo W muestra el ancho de la tabla seleccionada. La medida puede venir dada en pixels o en términos porcentuales.
En el campo H se muestra el alto de la tabla seleccionada. La medida puede venir dada en pixels o en términos porcentuales.
Una tabla puede tener definida una imagen de fondo, distinta de la imagen de fondo del documento. En este campo podemos añadir la URL de la imagen que servirá de fondo para la tabla.
Para garantizar que los navegadores muestren la tabla sin relleno ni espaciado, establezca Borde con el valor 0 y Relleno celda y Espacio celdas con el valor 0.
Si no se especifican los valores de borde o espaciado y relleno de celda, la mayoría de los navegadores mostrará el grosor del borde y el relleno de celda configurado en 1 y el del espaciado de celda configurado en 2.
| Propiedad | Valor indicado | Función |
|---|---|---|
| Ancho de la tabla exterior | 750 píxeles | Define el ancho de la tabla que contiene la imagen. |
| Alto de la tabla exterior | 395 píxeles | Define el alto de la tabla que contiene la imagen. |
| Ancho de la tabla interior | 150 píxeles | Define el ancho de la tabla que contiene el texto. |
| Alto de la tabla interior | 200 píxeles | Define el alto de la tabla que contiene el texto. |
| Borde | 0 | Hace invisible el borde de la tabla. |
| Relleno de celda | 0 | Elimina el espacio interior de las celdas. |
| Espacio entre celdas | 0 | Elimina la separación entre celdas. |
Cómo modificar la posición dentro de la celda
En la imagen superior se observa el aspecto de la paleta Propiedades cuando el cursor esta posicionado en una de las celdas de una tabla.
La parte superior de la paleta Propiedades permite ajustar parámetros relacionados con el contenido de la celda. En la parte inferior aparecen los controles relacionados con la celda de la tabla.
En la lista desplegable Horz podemos elegir cual será la alineación horizontal para los elementos contenidos en la celda seleccionada.
En la lista desplegable Vert podemos ajustar la alineación vertical para los elementos contenidos dentro de la celda seleccionada.
El campo W permite ajustar o reajustar el ancho de la celda seleccionada. El ancho se puede ajustar en pixels, o en términos porcentuales.
El campo H permite ajustar o reajustar el alto de la celda seleccionada. El alto se puede ajustar en pixels, no siendo recomendable utilizar términos porcentuales.
Con estos controles puedes colocar la tabla interior de forma aproximada dentro de la celda exterior:
- Utiliza Horz para elegir la posición horizontal.
- Utiliza Vert para elegir la posición vertical.
- Utiliza el ancho y el alto de la celda exterior para controlar el espacio disponible.
- Utiliza el ancho y el alto de la tabla interior para controlar el tamaño del bloque de texto.
- Establece el borde, el relleno de celda y el espacio entre celdas en 0 cuando necesites eliminar separaciones no deseadas.
Esta solución permite controlar la alineación dentro de la celda, pero no permite especificar una posición exacta mediante valores de desplazamiento.
El uso de relleno para crear desplazamientos
También podemos ajustar los márgenes internos de una celda, usando el parámetro CELLPADDING.
En cualquiera de las tres opciones anteriores podemos ajustar el valor “0”.
Si deseas que la tabla interior se separe de los bordes de la tabla exterior, puedes utilizar el relleno de celda de la tabla exterior. Este método crea un margen interior uniforme alrededor del contenido.
El relleno de celda no permite definir independientemente una coordenada horizontal y otra vertical para la tabla interior. Para obtener un desplazamiento diferente en cada dirección, puede ser necesario utilizar filas o columnas adicionales.
Uso de filas y columnas para aproximar una posición
Para dar mayor flexibilidad a la composición de tablas, existe la posibilidad de “unir” dos o más celdas colindantes entre si, pasando a formar una sola.
Observe como al unir entre si dos columnas o dos filas, la celda resultante adopta el tamaño necesario para mantener la estructura de tabla con respecto a las demás celdas.
Con filas y columnas adicionales puedes dividir el área de 750 x 395 en zonas y colocar la tabla interior en una de ellas. Por ejemplo, una fila superior vacía puede crear un desplazamiento vertical y una columna izquierda vacía puede crear un desplazamiento horizontal.
Con este parámetro podemos insertar una nueva fila en la tabla.
Con este parámetro podemos insertar una nueva columna en la tabla.
Con esta opción podemos insertar varias Filas o Columnas a la tabla de una sola vez.
En esta ventana, primeramente decidimos si queremos insertar Filas (Rows) o Columnas (Columns). Después escogemos el número de Filas o Columnas que queremos insertar.
Cuando se define una fila, esta puede tener las columnas que queramos, teniendo en cuenta que el resto de las filas automáticamente tendrá el mismo número de columnas.
Por otro lado, a la hora de definir una tabla hay que tener en cuenta que el ancho máximo de una celda en la misma columna, marca el ancho de las demás celdas en la misma columna.
De igual forma, la altura máxima de una celda, marca la altura de las demás celdas de la misma fila.
Si se unen dos celdas de distintas columnas entre si, el ancho de esta celda será el equivalente al ancho de las dos columnas.
De igual forma, si unimos dos celdas de distintas filas entre sí, el alto de esta celda resultantes será el equivalente al alto de las dos filas.
Para unir dos celdas de distintas filas entre sí se utiliza la marca HTML <ROWSPAN>.
Para unir dos celdas de distintas columnas entre sí se utiliza la marca <COLSPAN>.
Combinar y dividir celdas en Dreamweaver
Si seleccionamos varias celdas colindantes entre si, podemos utilizar la opción Merge Cells para unir estas celdas entre sí para crear una única celda con la suma de todas ellas.
Cuando hemos unidos varias celdas entre sí, o si deseamos dividir una celda en otras más pequeñas, podemos utilizar la opción Split Cell para hacerlo.
Primeramente seleccionamos la celda que queremos dividir.
En esta ventana, escogemos si queremos dividir la celda seleccionada en Filas (Rows) o en Columnas (Columns).
Una vez decidida esta cuestión, decidimos en cuantas Filas o Columnas queremos dividir la celda.
Dreamweaver reestructura automáticamente la tabla, añadiendo los atributos colspan o rowspan necesarios, para crear la disposición especificada.
Control del ancho y del alto
De forma predeterminada, un navegador selecciona el alto de fila y el ancho de columna de manera que pueda contener la imagen más ancha o la línea más larga en una columna.
El ancho de una tabla será automáticamente modificado si fuera necesario para mostrar todos los contenidos de la tabla.
Al igual que con el ancho de una tabla, la altura nunca podrá ser inferior a la altura de los elementos contenidos en la tabla.
Esto significa que una tabla interior de 150 X 200 puede provocar que la celda exterior necesite más espacio si su contenido, su relleno o su espaciado exige unas dimensiones mayores.
Cuando ajustamos una tabla para que tenga un ancho determinado y uno de sus contenidos tiene un ancho mayor que el ancho ajustado para la tabla, el ancho del elemento marcará el ancho de la tabla.
Si las celdas de una tabla tienen ancho o alto explícitos especificados, cambiar el tamaño de la tabla modifica el tamaño visual de las celdas en la ventana Documento, pero no cambia el ancho y alto especificados de las celdas.
Cuando ocurren estas diferencias podemos hacer que en el código se cambie el ancho por el real, para ello sólo tenemos que seleccionar la opción Igualar todos los anchos del menú desplegable de encabezado de tabla.
Cómo revisar las medidas en Dreamweaver
Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar su visualización seleccionando la opción Anchos de tablas del menú Tabla o también desplegando de la barra de menús, el menú Ver, Ayudas visuales, Anchos de tabla.
Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado.
Si aparecen dos números, el primer número corresponde al ancho especificado en las propiedades de la tabla o columna y el segundo número es el ancho visual que aparece en la vista de diseño.
Por ejemplo, en la tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 píxeles pero al contener una imagen que necesita más espacio, la columna ocupará realmente 142 píxeles.
Cuando ocurren estas diferencias podemos hacer que las anchuras sean coherentes.
Para ello sólo tenemos que seleccionar la opción Igualar todos los anchos del menú desplegable de encabezado de tabla.
Selección de tablas, filas, columnas y celdas
Puedes seleccionar una tabla, fila o columna completa a la vez.
También puedes seleccionar una o más celdas individuales.
Haga clic en una celda de la tabla, después en el menú del encabezado de tabla y, a continuación, seleccione Seleccionar tabla.
Otra forma de seleccionar la tabla es colocar el cursor sobre la tabla y en la barra que aparece en la parte inferior de la pantalla, mostrando las instrucciones del lenguaje HTML pulsar sobre <table>.
Para seleccionar una o varias celdas de una tabla, basta con pulsar el botón izquierdo del ratón y sin soltarlo, arrastrar por las celdas que queremos seleccionar.
Otra manera de seleccionar distintas celdas es posicionar el cursor en una de las celdas, en este momento esta sería la celda seleccionada.
Finalmente, podemos escoger una celda haciendo click sobre el “tag” HTML <TD> que aparece en la parte inferior izquierda de la ventana.
En la Vista en vivo, la Visualización de elementos muestra “table” cuando se ha seleccionado la tabla entera y “td” cuando solo se ha seleccionado una celda específica.
Redimensionar la tabla exterior o la interior
Puedes cambiar el tamaño de una tabla completa o de filas y columnas individuales.
Las filas y columnas se pueden redimensionar proporcionalmente.
Esto puede hacerse arrastrando uno de sus controles de selección.
Nos colocamos en una esquina de la tabla y justo cuando pasamos por el vértice aparece una cruz, pulsando el botón izquierdo del ratón seleccionamos la tabla.
También es posible cambiar el tamaño arrastrando los bordes de la columna o fila.
Seleccione la tabla.
Si está trabajando en la Vista en vivo, la Visualización de elementos se muestra al seleccionar la tabla.
Para salir de dicho modo en la Vista en vivo, pulse Esc o haga clic fuera de la tabla.
Si las celdas de una tabla tienen ancho o alto explícitos especificados, cambiar el tamaño de la tabla modifica el tamaño visual de las celdas en la ventana Documento, pero no cambia el ancho y alto especificados de las celdas.
Propiedades específicas de la tabla interior
Cuando seleccionamos una tabla en el documento, la paleta Propiedades muestra una serie de herramientas que permiten modificar distintos aspectos de la tabla seleccionada.
En el campo Table name podemos poner un nombre a la tabla seleccionada.
En el campo W se muestra el ancho de la tabla seleccionada. La medida puede venir dada en pixels o en términos porcentuales de la ventana del navegador, según sea el tipo de medida escogido en la lista desplegable junto a este campo.
En el campo H se muestra el alto de la tabla seleccionada. La medida puede venir dada en pixels o en términos porcentuales de la ventana del navegador, según sea el tipo de medida escogido en la lista desplegable junto a este campo.
En la lista desplegable Align podemos ajustar la alineación que deseamos para nuestra tabla dentro del documento.
Una tabla puede tener definida una imagen de fondo, distinta de la imagen de fondo del documento.
En este campo podemos ajustar el color de fondo para la tabla.
El comportamiento de los ajustes de color del borde de una tabla, los colores de fondo o la utilización de imágenes de fondo, no es el mismo en todos los navegadores.
Propiedades de la celda que contiene la tabla interior
Cada celda de una tabla puede tener su propia imagen de fondo, independiente del resto de las celdas de la tabla.
En este campo podemos definir el color que deseamos para la celda seleccionada.
Por defecto, cuando introducimos texto, o cualquier otro elemento, en una celda de una tabla, al llegar a los límites de anchura definidos para la celda, el texto es forzado a saltar de línea.
De esta manera, el contenido de la celda es forzado a ajustarse al tamaño definido para esta, siempre que esto es posible.
Cuando el contenido de una celda es indivisible, como en el caso de una imagen, lógicamente no hay manera de forzar el ajuste al tamaño especificado para la celda.
Por qué la tabla puede no conservar exactamente la posición
En ocasiones, cuando ajustamos distintos valores en una tabla o en la celda de las tablas, los cambios introducidos no se visualizan inmediatamente.
Si después de haber utilizado este comando, la tabla no se reajusta, es porque alguno de los elementos de la tabla o de sus contenidos no permite el reajuste seleccionado.
Esto es bastante común cuando, por ejemplo, ajustamos una tabla para que tenga un ancho determinado y uno de sus contenidos tiene un ancho mayor que el ancho ajustado para la tabla.
En otras ocasiones, cuando trabajamos con tablas complejas, en la que se han definido distintas uniones y divisiones entre celdas, la inserción o supresión de una línea o columna puede tener resultados inesperados.
Hay que tener en cuenta en esos casos que una celda mezclada ha de ser equivalente al ancho o alto de las celdas de las otras filas o columnas para mantener la estructura regular de una tabla.
El ancho máximo de una celda en la misma columna marca el ancho de las demás celdas en la misma columna.
La altura máxima de una celda marca la altura de las demás celdas de la misma fila.
Procedimiento recomendado en Dreamweaver
- Selecciona la tabla exterior que contiene la imagen de fondo.
- Define su ancho en 750 píxeles y su alto en 395 píxeles.
- Establece Borde con el valor 0.
- Establece Relleno celda y Espacio celdas con el valor 0 cuando no quieras separaciones automáticas.
- Selecciona la celda que contiene la imagen de fondo.
- Configura la alineación horizontal mediante Horz.
- Configura la alineación vertical mediante Vert.
- Selecciona la tabla interior.
- Define su ancho en 150 píxeles y su alto en 200 píxeles.
- Comprueba que ningún texto ni imagen de la tabla interior obligue a ampliar sus dimensiones.
- Si necesitas un desplazamiento aproximado, añade filas o columnas y utiliza celdas vacías para crear el espacio.
- Si las anchuras visibles no coinciden con las especificadas, selecciona Igualar todos los anchos.
- Comprueba el resultado en la Vista en vivo y en el navegador.
Alternativa más adecuada para colocar texto sobre una imagen
Se recomienda evitar el uso de tablas para maquetar tu página web.
Las tablas son una herramienta potente para presentar datos tabulares en una página HTML.
Para colocar texto sobre una imagen en una coordenada concreta, una tabla no es el recurso más flexible. La tabla exterior puede conservar la imagen como fondo, pero la ubicación exacta del texto se controla mejor con un elemento de contenido y reglas de posicionamiento mediante estilos.
En Dreamweaver, la opción de utilizar tablas para presentar datos sigue siendo adecuada cuando el contenido es realmente tabular. Para una composición visual formada por una imagen de fondo y texto superpuesto, conviene utilizar un diseño que permita especificar desplazamientos y posiciones con mayor precisión.
Prueba las plantillas de inicio (Archivo > Nuevo > Plantillas de inicio) para empezar con diseños prediseñados.
Cómo poner texto sobre imagen en CSS (y HTML)
Otras funciones de tablas disponibles en Dreamweaver
Usa el panel Insertar o el menú Insertar para crear una nueva tabla.
Todo el tedioso proceso de planificación y definición de una tabla en HTML se ve extremadamente simplificado en Dreamweaver.
Lo único que en principio necesitamos saber es el número de columnas y de filas que queremos para nuestra tabla, así como el ancho que tendrá esta.
En este campo podemos definir el ancho que deseamos para la tabla que estamos definiendo.
El ancho, como dijimos anteriormente, se puede definir en pixels o en términos porcentuales.
Podemos elegir el tipo de medida que vamos a introducir haciendo uso de la lista desplegable que hay junto a este campo.
En este campo introducimos el valor para el borde de la tabla.
En este menú tenemos gran parte de las distintas opciones que tenemos para modificar una tabla en Dreamweaver.
Algunas de estas opciones permiten modificar parámetros generales de una tabla, otras están orientadas a modificar opciones de una o varias celdas seleccionadas, sin afectar al resto.
Con la opción Clear Cell Heights se pueden eliminar las alturas definidas para las celdas.
Con la opción Convert Widths to Pixels se puede hacer que los anchos de las celdas de una tabla se ajusten individualmente a pixels.
Con la opción Convert Widths to Percent se puede hacer que los anchos de las celdas de una tabla se ajusten individualmente a porcentajes sobre el ancho de la tabla.
Puedes importar datos tabulares que se hayan creado en otra aplicación, como Microsoft Excel, y guardado en formato de texto delimitado, en Dreamweaver y darles formato como tabla.
Especifica el delimitador utilizado cuando se guardó el archivo de datos.
Dreamweaver permite ordenar automáticamente los contenidos de una tabla basándose en el contenido de una columna, siempre y cuando los contenidos de esa columna contengan elementos que puedan ser ordenados por un criterio común.
El criterio puede ser Alfabético y Numérico.
Cuando el contenido de una columna sean números, selecciona Numéricamente.
Puedes copiar, pegar o eliminar una sola celda de tabla o varias celdas a la vez, conservando su formato.
Una tabla anidada es una tabla dentro de una celda de otra tabla.