Guía del usuario Cancelar

Presentación de contenido en tablas

  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver
  19. Solución de problemas
    1. Problemas resueltos
    2. Problemas conocidos

 

 

Aprenda a utilizar las tablas para mostrar contenido en su sitio web. Además, aprenda a dividir y combinar las celdas de las tablas, así como a importar y exportar los datos de las mismas.

Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el diseño de texto y gráficos en una página HTML. Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o más celdas. Aunque las columnas no suelen especificarse explícitamente en el código HTML, Dreamweaver permite manipular tanto columnas como filas y celdas.

Dreamweaver muestra el ancho de la tabla y de cada columna cuando se selecciona una tabla o cuando el punto de inserción está en ella. Junto a los anchos se encuentran flechas para el menú de encabezado de la tabla y los menús de encabezado de las columnas. Utilice los menús para acceder rápidamente a comandos relacionados con tablas. Puede activar o desactivar los anchos y los menús.

Si no ve el ancho de una columna o de una tabla, esta tabla o columna no tiene un ancho especificado en el código HTML. Si aparecen dos números, el ancho visual que aparece en la vista de diseño no coincide con el ancho especificado en el código HTML. Esto puede ocurrir al cambiar el tamaño de una tabla arrastrando la esquina inferior derecha o al añadir contenido a la celda cuyo ancho es superior al establecido.

Por ejemplo, si establece un ancho de columna en 200 píxeles y añade contenido que se ajusta al ancho de 250 píxeles, se mostrarán dos números para dicha columna: 200 (ancho especificado en el código) y (250) entre paréntesis (ancho visual de la columna tal como aparece en la pantalla).

Nota:

También puede diseñar las páginas con el posicionamiento de CSS.

Prioridad de formato de tabla en HTML

A la hora de dar formato a tablas en la vista de Diseño, puede definir propiedades que se apliquen a toda la tabla o a filas, columnas o celdas seleccionadas de la misma. Al definir el valor de una propiedad como, por ejemplo, el color de fondo o la alineación, para toda la tabla y otro valor para celdas individuales, el formato de celda tiene prioridad sobre el formato de fila, que a su vez tiene prioridad sobre el formato de tabla.

El orden de prioridad en el formato de tabla es el siguiente:

  1. Celdas
  2. Filas
  3. Tabla

Por ejemplo, si establece un color de fondo azul para una sola celda y, a continuación, establece el color de fondo de toda la tabla como amarillo, la celda azul no cambiará a amarillo, ya que el formato de celda tiene prioridad sobre el formato de tabla.

Nota:

Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td correspondientes a cada celda de la columna.

División y combinación de celdas de tabla

Podrá combinar cualquier número de celdas contiguas, siempre que toda la selección sea una línea o un rectángulo de celdas, para obtener una sola celda que se extienda a lo largo de varias columnas o filas. Una celda puede dividirse en las filas o columnas que sea necesario, aunque haya sido combinada anteriormente. Dreamweaver reestructura automáticamente la tabla (añadiendo los atributos colspan o rowspan que sean necesarios) para crear el diseño especificado.

En el siguiente ejemplo, las celdas centrales de las dos primeras filas se han combinado en una única celda que ocupa dos filas.

Celdas combinadas

Inserción de una tabla y adición de contenido

Utilice el panel Insertar o el menú Insertar para crear una tabla. A continuación, añada texto e imágenes a las celdas de una tabla tal como lo haría fuera de una tabla.

  1. Sitúe el punto de inserción en el lugar de la página en el que desea que aparezca la tabla dinámica.

    Nota:

    Si el documento está en blanco, solo podrá colocar el punto de inserción al principio del mismo.

    • Seleccione Insertar > Tabla.

    • En la categoría HTML panel Insertar, haga clic en Tabla.

  2. Establezca los atributos del cuadro de diálogo Tabla y haga clic en OK para crear la tabla.
    Crear una tabla
    Crear una tabla

    Filas

    Determina el número de filas de la tabla.

    Columnas

    Determina el número de columnas de la tabla.

    Ancho de tabla

    Especifica el ancho de la tabla en píxeles o como porcentaje del ancho de la ventana del navegador.

    Grosor del borde

    Especifica el ancho en píxeles de los bordes de la tabla.

    Espacio entre celdas

    Determina el número de píxeles entre celdas de tabla contiguas.

    Nota:

    Si no se especifican los valores de grosor del 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. Para garantizar que los navegadores muestren la tabla sin borde, relleno ni espaciado, establezca Relleno celda y Espacio celdas con el valor 0.

    Relleno de celda

    Especifica el número de píxeles entre el borde y el contenido de una celda.

    Ninguno

    No permite encabezados de columna o de fila para la tabla.

    Izquierda

    Convierte la primera columna de la tabla en una columna para encabezados. Esto le permite introducir un encabezado para cada fila de la tabla.

    Superior

    Convierte la primera fila de la tabla en una fila para encabezados, lo que le permite introducir un encabezado para cada columna de la tabla.

    Ambos

    Le permite introducir encabezados de columna y de fila en la tabla.

    Nota:

    Es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.

    Texto

    Proporciona un título de tabla que aparece fuera de la misma.

    Resumen

    Ofrece una descripción de la tabla. Los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Importar y exportar tablas

Puede importar datos de tabla creados con otra aplicación (por ejemplo, Microsoft Excel) y guardados en un formato de texto delimitado (con elementos separados por tabuladores, comas, dos puntos o puntos y comas) a Dreamweaver y aplicarles formato de tabla.

También puede exportar los datos de tabla desde Dreamweaver a un archivo de texto, con el contenido de las celdas contiguas separado por un delimitador. Se pueden utilizar comas, dos puntos, puntos y comas o espacios como delimitadores. No se pueden exportar partes de una tabla, por lo que es necesario exportar la tabla entera en todos los casos.

Nota:

Si solo le interesan algunos de los datos de una tabla (por ejemplo, las seis primeras filas o columnas), copie las celdas que contienen dichos datos y péguelas fuera de la tabla para crear una nueva tabla y, a continuación, exporte la nueva tabla.

Importación de datos de tabla

  1. Seleccione Archivo > Importar > Importar datos de tabla.

  2. Especifique las opciones de los datos de tabla y haga clic en OK.

    Archivo de datos

    Nombre del archivo que desea importar. Haga clic en el botón Examinar para seleccionar un archivo.

    Delimitador

    Delimitador utilizado en el archivo que está importando.

    Si selecciona Otro, aparecerá un cuadro de texto a la derecha del menú emergente. Introduzca el delimitador utilizado en su archivo.

    Nota:

    Especifique el delimitador utilizado cuando se guardó el archivo de datos. De lo contrario, el archivo no se importará adecuadamente y sus datos no tendrán el formato de tabla correcto.

    Ancho de tabla

    Ancho de la tabla.

    • Seleccione Ajustar a los datos para que todas las columnas tengan el ancho suficiente para contener la cadena de texto más larga en la columna.

    • Seleccione Establecer para especificar un ancho fijo de la tabla en píxeles o como porcentaje del ancho de la ventana del navegador.

    Borde

    Especifica el ancho en píxeles de los bordes de la tabla.

    Relleno de celda

    Determina el número de píxeles entre el contenido de una celda y los límites de la misma.

    Espacio entre celdas

    Número de píxeles entre celdas de tabla contiguas.

    Nota:

    Si no se especifican los valores de borde o espaciado y relleno de celda, la mayoría de los navegadores mostrará la tabla con los bordes y el relleno de celda configurado en 1 y el espaciado de celda configurado en 2. Para garantizar que los navegadores muestren la tabla sin relleno ni espaciado, establezca Relleno de celda y Espacio entre celdas con el valor 0. Para ver los límites de las celdas y la tabla cuando el borde es 0, seleccione Ver > Ayudas visuales > Bordes de tabla.

    Formatear primera fila

    Determina el formato aplicado a la primera fila de la tabla, en caso de que exista alguno. Seleccione una de las cuatro opciones de formato posibles: Sin formato, Negrita, Cursiva o Negrita cursiva.

Exportación de una tabla

  1. Sitúe el punto de inserción en cualquier celda de la tabla.
  2. Seleccione Archivo > Exportar > Tabla.
  3. Especifique las opciones siguientes:

    Delimitador

    Especifica el carácter delimitador que debe utilizarse para separar los elementos en el archivo exportado.

    Saltos de línea

    Especifica el sistema operativo en el que se abrirá el archivo exportado: Windows, Macintosh o UNIX. (Cada sistema operativo indica el final de una línea de texto de forma diferente).

  4. Haga clic en Exportar.
  5. Introduzca un nombre para el archivo y haga clic en Guardar.

Selección de elementos de una tabla

Puede seleccionar toda una tabla, fila o columna al mismo tiempo. También puede seleccionar una o varias celdas individuales.

Cuando se desplaza el puntero sobre una tabla, fila, columna o celda, Dreamweaver resalta todas las celdas de esa selección para que sepa qué celdas se seleccionarán. Esto puede resultar útil si utiliza tablas sin bordes, celdas que ocupan varias columnas o filas, o bien tablas anidadas. Puede cambiar el color de resaltado en las preferencias.

Nota:

Si coloca el puntero encima del borde de una tabla, mantenga presionada la tecla Control (Windows) o la tecla Comando (Macintosh) y toda la estructura de la tabla, es decir las celdas de la misma, quedarán resaltadas. Esto puede resultar útil si utiliza tablas anidadas y desea ver la estructura de una de las tablas.

Selección de una tabla entera

Siga uno de estos procedimientos para seleccionar una tabla:

  • Haga clic en la esquina superior izquierda de la tabla para seleccionar la tabla.
  • Haga clic en una celda de la tabla y, a continuación, seleccione la etiqueta en el selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento.
  • Haga clic en una celda de la tabla, después en el menú del encabezado de tabla y, a continuación, seleccione Seleccionar tabla. Aparecerán manejadores de selección en los bordes inferior y derecho de la tabla.
  • Haga clic en una celda de la tabla y, a continuación, seleccione Editar > Tabla > Seleccionar tabla.

Selección de una o varias filas y columnas

  1. Sitúe el puntero en el borde izquierdo de una fila o en el borde superior de una columna.
  2. Cuando el puntero se convierta en una flecha de selección, haga clic para seleccionar una fila o columna, o arrastre para seleccionar varias filas o columnas.
    Seleccione una fila

Selección de una sola columna

  1. Haga clic en la columna.
  2. Haga clic en el menú de encabezado de columna y seleccione Seleccionar columna.

Selección de una sola celda

  1. Siga uno de estos procedimientos:

    • Haga clic en la celda y, a continuación, seleccione la etiqueta <td> en el selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento.
    • Presione la tecla Control (Windows) o Comando (Macintosh) y haga clic en la celda.

Selección de una línea o un bloque rectangular de celdas

Siga uno de estos procedimientos:
  • Arrastre de una celda a otra.

  • Haga clic en una celda, presione Control y haga clic (Windows) o presione Comando y haga clic (Macintosh) en la misma celda para seleccionarla y, a continuación, presione Mayús y haga clic en otra celda.

Seleccionar un bloque de celdas

Selección de celdas no adyacentes

Presione Control (Windows) o Comando (Macintosh) mientras hace clic en las celdas, filas o columnas que desea seleccionar.

Las celdas, filas o columnas que no estén todavía seleccionadas se añadirán a la selección. Las que ya lo estén, se eliminarán de la selección.

Cambio del color de resaltado para elementos de la tabla

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
  2. Seleccione Resaltando en la lista Categoría de la izquierda, realice uno de los siguientes cambios y haga clic en OK.
    • Para cambiar el color de resaltado de los elementos de tabla, haga clic en el cuadro Color al pasar el ratón por encima y seleccione un color de resaltado con el selector de color (o bien escriba el valor hexadecimal del color de resaltado en el cuadro de texto).

    • Para activar o desactivar el resaltado de los elementos de la tabla, active o desactive la selección de la opción Mostrar correspondiente a Ratón por encima.

    Nota:

    Estas opciones afectan a todos los objetos, como las tablas, que Dreamweaver resalta cuando pasa el puntero del ratón sobre ellos.

Establecimiento de las propiedades de una tabla

Puede utilizar el inspector de propiedades para editar tablas.

  1. Seleccione una tabla.
  2. En el inspector de propiedades (Ventana > Propiedades), cambie las propiedades que sean necesarias.
    Propiedades de tabla
    Propiedades de tabla

    ID de tabla

    Especifica un ID para la tabla.

    Filas y Cols

    Número de filas y columnas que tendrá la tabla.

    An

    El ancho de la tabla en píxeles o como porcentaje del ancho de la ventana del navegador.

    Nota:

    Normalmente no es preciso especificar el alto de una tabla.

    Rell. celda

    Determina el número de píxeles entre el contenido de una celda y los límites de la misma.

    Esp. celda

    Número de píxeles entre celdas de tabla contiguas.

    Alinear

    Determina dónde aparecerá la tabla en relación con otros elementos del mismo párrafo, como por ejemplo texto o imágenes.

    Izquierda 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); Derecha alinea la tabla a la derecha de los demás elementos (con el texto ajustado alrededor a la izquierda); y Centro centra la tabla (con el texto encima y/o debajo de la tabla). Predeterminado indica que el navegador debe utilizar su alineación predeterminada.

    Nota:

    Si la alineación está establecida como Predeterminado, no se muestra otro contenido junto a la tabla. Para mostrar una tabla junto a otro contenido, utilice la alineación Izquierda o Derecha.

    Borde

    Especifica el ancho en píxeles de los bordes de la tabla.

    Nota:

    Si no se especifican los valores de borde o espaciado y relleno de celda, la mayoría de los navegadores mostrará la tabla con los bordes y el relleno de celda configurado en 1 y el espaciado de celda configurado en 2. 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. Para ver los límites de las celdas y la tabla cuando el borde es 0, seleccione Ver > Ayudas visuales > Bordes de tabla.

    Clase

    Establece una clase CSS en la tabla.

    Nota:

    Es posible que tenga que expandir el inspector de propiedades de tabla para ver las siguientes opciones. Para expandir el inspector de propiedades de tabla, haga clic en la flecha de expansión situada en la esquina inferior derecha.

    Borrar ancho de columna y Borrar alto de fila

    y Borrar alto de fila eliminan todos los valores especificados para el ancho de columna y alto de fila de la tabla.

    Convertir ancho de tabla a píxeles

    y Convertir altos de tabla a píxeles establecen el ancho o el alto de todas las columnas de la tabla en su ancho actual en píxeles (también establecen el ancho de toda la tabla en su ancho actual en píxeles).

    Convertir ancho de tabla a porcentaje

    y Convertir altos de tabla a porcentaje establecen el ancho o el alto de todas las columnas de la tabla en su ancho actual expresado como porcentaje del ancho de la ventana de documento (también establecen el ancho de toda la tabla en su ancho actual como porcentaje del ancho de la ventana de documento).

    Si ha introducido un valor en un cuadro de texto, pulse el tabulador o la tecla Intro (Windows) o Retorno (Macintosh) para aplicar el valor.

Configuración de las propiedades de celdas, filas o columnas

Puede utilizar el inspector de etiquetas para editar celdas y filas de una tabla.

  1. Seleccione la columna o fila.
  2. En el inspector de propiedades (Ventana > Propiedades), establezca las siguientes opciones:

    Horiz

    Especifica la alineación horizontal del contenido de una celda, fila o columna. Puede alinear el contenido a la izquierda, a la derecha o al centro de la celda, o bien especificar que se utilice la alineación predeterminada del navegador (generalmente a la izquierda para celdas normales y al centro para celdas de encabezado).

    Vert

    Especifica la alineación vertical del contenido de una celda, fila o columna. Puede alinear el contenido con la parte superior, media, inferior o con la línea de base de la celda, o especificar que se utilice la alineación predeterminada del navegador (generalmente al medio).

    An (Anchura) y Al (Altura)

    Ancho y alto de las celdas seleccionadas en píxeles o como porcentaje del ancho o alto total de la tabla. Para especificar un porcentaje, introduzca el símbolo de porcentaje (%) tras el valor. Para que el navegador determine el ancho o alto apropiado en función del contenido de la celda, y el ancho y alto del resto de las columnas y filas, deje el campo en blanco (el valor predeterminado).

    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. Por esta razón, algunas veces el ancho de una columna resulta mucho más grande que el de otras columnas de la tabla cuando se le añade contenido.

    Nota:

    Puede especificar el alto como porcentaje del alto total de la tabla, aunque quizás la fila no se muestre en los navegadores con el porcentaje de alto especificado.

    Fnd

    El color de fondo de una celda, columna o fila elegido mediante el selector de color.

    Combinar celdas

    Combina las celdas, filas o columnas seleccionadas para crear una sola celda. Sólo pueden combinarse celdas que constituyan una bloque rectangular o lineal.

    Dividir celda

    Divide una celda para crear dos o más celdas. Sólo puede dividirse una celda cada vez, por lo que este botón estará desactivado al seleccionar más de una celda.

    No aj.

    Impide el ajuste de línea, manteniéndose todo el texto de una celda en una sola línea. Cuando la opción No aj. está activada, las celdas se adaptarán para incluir todos los datos a medida que se introducen o pegan en una celda. (Habitualmente, las celdas se expanden horizontalmente para incluir la palabra más larga o la imagen más grande en la celda y, a continuación, se expanden verticalmente cuando es necesario adaptarse a otros contenidos).

    Encabezado

    Aplica a la celda seleccionada el formato de celdas de encabezado de tabla. De forma predeterminada, el contenido de las celdas de encabezado de la tabla aparecerá en negrita y centrado.

    Nota:

    El alto y el ancho pueden especificarse en píxeles o porcentajes y pueden convertirse de una unidad a otra.

    Nota:

    Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td correspondientes a cada celda de la columna. Al establecer algunas de las propiedades de una fila, sin embargo, Dreamweaver modifica los atributos de la etiqueta tr en lugar de los atributos de cada etiqueta td de la fila. Al aplicar el mismo formato a todas las celdas de una fila mediante la etiqueta tr, genera un código HTML más claro y conciso.

  3. Presione el tabulador o la tecla Intro (Windows) o Retorno (Macintosh) para aplicar el valor.

Aplicación de formato a tablas y celdas

Puede cambiar el aspecto de una tabla configurando las propiedades de la misma y de sus celdas o aplicándole un diseño predefinido. Antes de definir las propiedades de la tabla y de las celdas, tenga en cuenta el orden de prioridad para la aplicación de formato es éste: celdas, filas y tablas.

Nota:

Para aplicar formato al texto de una celda de tabla, utilice los mismos procedimientos que utilizaría para aplicar formato al texto fuera de una tabla.

Cambio del formato de una tabla, fila, celda o columna

  1. Seleccione una tabla, celda, fila o columna.
  2. En el inspector de propiedades (Ventana > Propiedades), haga clic en la flecha de ampliación situada en la esquina inferior derecha y cambie las propiedades como estime oportuno.
  3. Cambie las propiedades según convenga.

    Para más información sobre las opciones, haga clic en el icono Ayuda del inspector de propiedades.

    Nota:

    Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td correspondientes a cada celda de la columna. Sin embargo, al establecer algunas de las propiedades de una fila, Dreamweaver modifica los atributos de la etiqueta tr en lugar de los atributos de cada etiqueta td de la fila. Al aplicar el mismo formato a todas las celdas de una fila mediante la etiqueta tr, se obtiene un código HTML más claro y conciso.

Adición o edición de valores de accesibilidad para una tabla en la vista de Código

Edite los atributos adecuados en el código.
Nota:

Para localizar rápidamente las etiquetas en el código, haga clic en la etiqueta <table> en el selector de etiquetas que se encuentra en la parte inferior de la ventana de documento.

Adición o edición de valores de accesibilidad para una tabla en la vista de Diseño

  • Para editar el texto de la tabla, resáltelo y escriba uno nuevo.
    • Para editar la alineación del texto, coloque el punto de inserción en el texto de la tabla, haga clic con el botón derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Editar código de etiqueta.

    • Para editar el resumen de la tabla, selecciónela, haga clic con el botón derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Editar código de etiqueta.

Cambio de tamaño de tablas, columnas y filas

Cambio del tamaño de tablas

Puede cambiar el tamaño de una tabla completa o de filas y columnas individuales. Al cambiar el tamaño de toda la tabla, el tamaño de todas sus celdas cambiará proporcionalmente. Si el alto y el ancho de las celdas de una tabla están explícitamente especificados, al cambiar el tamaño de la tabla también lo hará el tamaño visual de las celdas en la ventana de documento, aunque no el alto y el ancho especificado para las celdas.

Puede cambiar el tamaño de una tabla arrastrando uno de sus manejadores de selección. Dreamweaver muestra el ancho de la tabla junto con un menú de encabezado de tabla en la parte superior o inferior de la tabla cuando esta se selecciona o el punto de inserción está en ella.

En ocasiones, los anchos de columna de tabla establecidos en código HTML no coinciden con los anchos que aparecen en la pantalla. Cuando esto sucede, puede hacer que los anchos coincidan. Los anchos y los menús de encabezado de las tablas y columnas se muestran en Dreamweaver para ayudarle a diseñar las tablas, y puede activarlos y desactivarlos según sea necesario.

Cambio del tamaño de columnas y filas

Puede cambiar el ancho de una columna o el alto de una fila en el inspector de propiedades o arrastrando los bordes de la columna o fila. Si encuentra problemas para cambiar el tamaño, borre el ancho de la columna y el alto de la fila y empiece de nuevo.

Nota:

También puede cambiar directamente el ancho y el alto de la celda en el código HTML utilizando la Vista de código.

Dreamweaver muestra el ancho de las columnas junto con menús de encabezado en su parte superior o inferior cuando se selecciona la tabla o el punto de inserción está en ella; puede activar o desactivar los menús de encabezado de columna según sea necesario.

Cambio del tamaño de una tabla

Seleccione la tabla. Si está trabajando en la Vista en vivo, la Visualización de elementos se muestra al seleccionar la tabla. Haga clic en el icono de página intermedia para cambiar al modo Dar formato a la tabla.

  • Para cambiar el tamaño horizontal de la tabla, arrastre el manejador de selección de la derecha.

  • Para cambiar el tamaño vertical de la tabla, arrastre el manejador de selección de la parte inferior.

  • Para cambiar ambos, arrastre el manejador de selección de la esquina inferior derecha.

Para salir de dicho modo en la Vista en vivo, pulse Esc o haga clic fuera de la tabla. Si quiere seguir modificando la tabla, seleccione las opciones del menú Editar > Tabla.

Nota: las opciones del menú Editar > Tabla cambian dependiendo de si ha seleccionado la tabla entera o una sola celda. 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. Para cambiar del modo Dar formato a la celda a Dar formato a la tabla, haga clic en el borde de la tabla.

Cambio del ancho de una columna y mantenimiento del ancho general de la tabla

  1. En la vista de Diseño, arrastre el borde derecho de la columna que desee cambiar.

    El ancho de la columna contigua también varía; en consecuencia, cambia el tamaño de las dos columnas. Se mostrará cómo se ajustan las columnas, pero el ancho general de la tabla no variará.

    Cambio de la anchura de la columna mientras se mantiene el ancho de la tabla

    Nota:

    en las tablas con ancho basado en porcentajes (no píxeles), si arrastra el borde derecho de la columna que se encuentra más a la derecha, variará todo el ancho de la tabla y las columnas se harán más anchas o estrechas proporcionalmente.

Cambio del ancho de una columna y mantenimiento del tamaño de las demás

  1. En la vista de Diseño, mantenga pulsada la tecla Mayús mientras arrastra el borde de la columna.

    Cambiará el ancho de una columna. Las ayudas visuales le mostrarán cómo se ajustan las columnas. El ancho total de la tabla cambia para dar cabida a la columna que ha cambiado de tamaño.

    Cambio de columna de anchura mientras las demás columnas mantienen la anchura

Cambio del alto de una fila visualmente

Arrastre el borde inferior de la fila.

Igualación de los anchos de columna del código con los anchos de columna visuales

  1. Haga clic en una celda.
  2. Haga clic en el menú del encabezado de tabla y, a continuación, seleccione Igualar todos los anchos.

    Dreamweaver restablece el ancho especificado en el código para que coincida con el ancho visual.

Eliminación de los anchos y altos especificados de una tabla

  1. Seleccione la tabla.
  2. Siga uno de estos procedimientos:
    • Seleccione Editar > Tabla > Borrar ancho de celda o Editar > Tabla > Borrar alto de celda.

    • En el inspector de propiedades (Ventana > Propiedades), haga clic en el botón Borrar alto de fila o en el botón Borrar ancho de columna .

    • Haga clic en el menú del encabezado de tabla y, a continuación, seleccione Borrar todos los altos o Borrar todos los anchos.

Eliminación del ancho establecido de una columna

Haga clic en la columna, haga clic en el menú del encabezado de columna y seleccione Borrar ancho de columna.

Activación o desactivación de los anchos y los menús de tablas y columnas en la Vista Diseño

Seleccionar Ver > Opciones de vista de diseño > Ayudas visuales > Anchos de tabla.

Adición y eliminación de filas y columnas

Para añadir o eliminar filas y columnas, utilice Modificar > Tabla o el menú de encabezado de columna.

Nota:

Si pulsa el tabulador en la última celda de una tabla se añadirá automáticamente otra fila a la tabla.

Adición de una sola fila o columna

Haga clic en una celda y siga uno de estos procedimientos:
  • Seleccione Editar > Tabla > Insertar fila o bien Editar > Tabla > Insertar columna.

    Aparecerá una fila encima del punto de inserción o una columna a la izquierda del punto de inserción.

  • Haga clic en el menú del encabezado de columna y, a continuación, seleccione Insertar columna izquierda o Insertar columna derecha.

     

Adición de varias filas o columnas

  1. Haga clic en una celda.
  2. Seleccione Editar > Tabla > Insertar filas o columnas, complete el cuadro de diálogo y haga clic en OK.

    Insertar

    Indica si deben insertarse filas o columnas.

    Número de filas o número de columnas

    El número de filas o columnas que deben insertarse.

    Dónde

    Especifica si las nuevas filas o columnas deben aparecer antes o después de la fila o columna de la celda seleccionada.

Eliminación de una fila o columna

Siga uno de estos procedimientos:
  • Haga clic en una celda dentro de la fila o de la columna que desea eliminar y, a continuación, seleccione Editar > Tabla > Eliminar fila, o bien Editar > Tabla > Eliminar columna.

  • Seleccione una fila o columna completa y, a continuación, pulse Eliminar.

  • En el inspector de propiedades (Ventana > Propiedades), siga uno de estos procedimientos:
    • Para añadir o eliminar filas, aumente o reduzca el valor de Filas.
    • Para añadir o eliminar columnas, aumente o reduzca el valor de Cols.
Nota:

Dreamweaver no advertirá de que las filas o las columnas que desea eliminar contienen datos.

División y combinación de celdas

Utilice el inspector de propiedades o las opciones en el submenú Editar > Tabla para dividir o combinar celdas.

Combinación de dos o más celdas en una tabla

  1. Seleccione las celdas en una línea contigua y en forma de un rectángulo.

    En la siguiente ilustración, la selección es un rectángulo de celdas, por lo que éstas se pueden combinar.

    Las celdas se pueden combinar en un rectángulo de celdas

    En la siguiente ilustración, la selección no es un rectángulo, por lo que las celdas no se pueden combinar.

    Las celdas no se pueden combinar si la selección no es un rectángulo

  2. Siga uno de estos procedimientos:
    • Seleccione Editar > Tabla > Combinar celdas.

    • En el inspector de propiedades HMTL expandido (Ventana > Propiedades), haga clic en Combinar celdas.

    Nota:

    Si no se muestra el botón, haga clic en la flecha de expansión situada en la esquina inferior derecha del inspector de propiedades para ver todas las opciones.

    El contenido de las celdas individuales se sitúa en la celda combinada resultante. Las propiedades de la primera celda seleccionada se aplicarán a la celda combinada.

División de una celda

  1. Haga clic en la celda y siga uno de estos procedimientos:
    • Seleccione Editar > Tabla > Dividir celda.

    • En el inspector de propiedades HTML expandido (Ventana > Propiedades), haga clic en Dividir celda.

    Nota:

    Si no se muestra el botón, haga clic en la flecha de expansión situada en la esquina inferior derecha del inspector de propiedades para ver todas las opciones.

  2. En el cuadro de diálogo Dividir celda, especifique cómo desea dividir la celda:

    Dividir celda en

    Especifica si la celda debe dividirse en filas o en columnas.

    Número de filas/Número de columnas

    Especifica el número de filas o de columnas en que debe dividirse la celda.

Aumento o disminución del número de filas o columnas que ocupa una celda

Siga uno de estos procedimientos:
  • Seleccione Editar > Tabla > Aumentar tamaño de fila, o bien Editar > Tabla > Aumentar tamaño de columna.

  • Seleccione Editar > Tabla > Reducir tamaño de fila, o bien Editar > Tabla > Reducir tamaño de columna.

Copia, pegado y eliminación de celdas

Puede copiar, pegar o eliminar una o varias celdas de una tabla al mismo tiempo, conservando el formato de las celdas.

Las celdas se pueden pegar en el punto de inserción o en el lugar de una selección en una tabla existente. Para pegar varias celdas de una tabla, el contenido del Portapapeles debe ser compatible con la estructura de la tabla o la selección de la tabla en la que se van a pegar las celdas.

Corte o copia de celdas de una tabla

  1. Seleccione una o varias celdas en una línea contigua y en forma de un rectángulo.

    En la siguiente ilustración, la selección es un rectángulo de celdas, por lo que éstas se pueden cortar o copiar.

    Las celdas se pueden copiar o pegar en un rectángulo de celdas

    En la siguiente ilustración, la selección no es un rectángulo de celdas, por lo que estas no se pueden cortar ni copiar.

    Las celdas no se pueden cortar o copiar si la selección no es un rectángulo

  2. Seleccione Edición > Cortar, o bien Edición > Copiar.
    Nota:

    Si selecciona una fila o columna completa y selecciona Edición > Cortar, se eliminará toda la columna o fila de la tabla (no sólo el contenido de las celdas).

Pegado de celdas de tabla

  1. Elija dónde desea pegar las celdas:
    • Para reemplazar las celdas actuales por las celdas que desea pegar, seleccione un grupo de celdas que tengan el mismo diseño que las del portapapeles. (Por ejemplo, si ha copiado o cortado un bloque de celdas de 3 x 2, podrá reemplazarlo por otro bloque de celdas de 3 x 2).

    • Para pegar toda una fila de celdas encima de una celda concreta, haga clic en dicha celda.

    • Para pegar toda una columna de celdas a la izquierda de una celda concreta, haga clic en dicha celda.

    Nota:

    Si no dispone de toda una fila o columna de celdas en el portapapeles y hace clic en una celda y, a continuación, pega las celdas del portapapeles, puede reemplazar la celda en la que ha hecho clic y las que la rodean (dependiendo de su ubicación en la tabla) por las celdas que está pegando.

    • Para crear una nueva tabla con las celdas pegadas, sitúe el punto de inserción fuera de la tabla.
  2. Seleccione Edición > Pegar.

    Si pega filas o columnas completas en una tabla existente, éstas se añadirán a la tabla. Si pega una sola celda, se reemplazará el contenido de la celda seleccionada. Si pega fuera de una tabla, las filas, columnas o celdas se utilizarán para definir una tabla nueva.

Eliminación del contenido y mantenimiento de las celdas intactas

  1. Seleccione una o más celdas.
    Nota:

    Asegúrese de que la selección no consta sólo de filas o columnas completas.

  2. Presione Supr.

    Nota:

    Si únicamente están seleccionadas filas o columnas completas, cuando seleccione Edición > Borrar o presione Supr, se eliminarán de la tabla todas las filas o columnas, y no solo su contenido.

Eliminación de filas o columnas que contienen celdas combinadas

  1. Seleccione la fila o columna.
  2. Seleccione Editar > Tabla > Eliminar fila, o bien Editar > Tabla > Eliminar columna.

Anidación de tablas

Una tabla anidada es una tabla dentro de una celda o de otra tabla. Puede aplicar formato a una tabla anidada como lo haría con cualquier otra tabla; no obstante, su ancho estará limitado por el ancho de la celda en la que aparece.

  1. Haga clic en una celda de la tabla.
  2. Seleccione Insertar > Tabla, establezca las opciones de Insertar tabla y haga clic en OK.

Ordenación de tablas

Puede ordenar las filas de una tabla en función del contenido de una sola columna. También puede realizar una operación más compleja ordenándola en función del contenido de dos columnas.

No se pueden ordenar las tablas que contengan atributos colspan o rowspan, es decir, tablas con celdas combinadas.

  1. Seleccione la tabla o haga clic en cualquiera de las celdas.
  2. Seleccione Editar > Tabla > Ordenar tabla, establezca las opciones en el cuadro de diálogo y haga clic en OK.

    Ordenar por

    Determina los valores de la columna que se utilizarán para ordenar las filas de la tabla.

    Orden

    Determina si la columna debe ordenarse alfabética o numéricamente, y si el orden será ascendente (de la A a la Z, de los números más bajos a los más altos) o descendente.

    Si la columna contiene números, seleccione Numéricamente. Una clasificación alfabética aplicada a una lista de números de uno y dos dígitos ordenará los números como si fueran palabras (como 1, 10, 2, 20, 3, 30) en lugar de ordenarlos como si fueran números (como 1, 2, 3, 10, 20, 30).

    Después por/Orden

    Determina el orden de una clasificación secundaria en otra columna. Especifique la columna de clasificación secundaria en el menú emergente Después por y el orden de clasificación secundaria en los menús emergentes de Orden.

    El orden incluye la primera fila

    Especifica que la primera fila de la tabla debe incluirse en la clasificación. Si la primera fila contiene un encabezado que no se debe mover, no seleccione esta opción.

    Ordenar filas de encabezado

    Especifica que se ordenen todas las filas de la sección thead de la tabla (si las hay) siguiendo los mismos criterios que para las filas del cuerpo. (Observe que las filas thead permanecerán en la sección thead y seguirán apareciendo en la parte superior de la tabla, incluso después de ordenarlas). Para información sobre la etiqueta thead, consulte el panel Referencia (seleccione Ayuda > Referencia).

    Ordenar filas de pie

    Especifica que se ordenen todas las filas de la sección tfoot de la tabla (si las hay) siguiendo los mismos criterios que para las filas del cuerpo. (Observe que las filas tfoot permanecerán en la sección tfoot y seguirán apareciendo en la parte superior de la tabla, incluso después de ordenarlas). Para información sobre la etiqueta tfoot, consulte el panel Referencia (seleccione Ayuda > Referencia).

    No modificar los colores de fila hasta que haya finalizado la operación de orden

    Especifica que los atributos de fila de la tabla (por ejemplo, el color) deben permanecer asociados al mismo contenido después de la ordenación. Si el formato de las filas de la tabla alterna dos colores, no seleccione esta opción para garantizar que la tabla ordenada incluya filas con colores alternos. Si los atributos de fila son específicos del contenido de cada fila, seleccione esta opción para garantizar que los atributos permanezcan asociados a las filas apropiadas de la tabla ordenada.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea