Guia do Usuário Cancelar

Apresentar conteúdo em tabelas

  1. Guia do usuário do Dreamweaver
  2. Introdução
    1. Noções básicas de web design responsivo
    2. Novidades do Dreamweaver
    3. Desenvolvimento Web com o Dreamweaver – Visão geral
    4. Dreamweaver/Perguntas frequentes
    5. Atalhos de teclado
    6. Requisitos de sistema do Dreamweaver
    7. Resumo dos recursos
  3. Dreamweaver e Creative Cloud
    1. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    2. Bibliotecas da Creative Cloud no Dreamweaver
    3. Uso de arquivos do Photoshop no Dreamweaver
    4. Trabalhe com o Adobe Animate e o Dreamweaver
    5. Extraia das Bibliotecas arquivos SVG otimizados para a Web
  4. Áreas de trabalho e exibições do Dreamweaver
    1. Espaço de trabalho do Dreamweaver
    2. Otimizar espaço de trabalho no Dreamweaver para desenvolvimento visual
    3. Pesquisa de arquivos baseada no nome de arquivo ou no conteúdo | Mac OS
  5. Configurar sites
    1. Sobre sites do Dreamweaver
    2. Configurar uma versão local do site
    3. Conectar-se a um servidor de publicação
    4. Configurar um servidor de teste
    5. Importar e exportar configurações de site do Dreamweaver
    6. Trazer sites existentes de um servidor remoto para a raiz do site local
    7. Recursos de acessibilidade do Dreamweaver
    8. Configurações avançadas
    9. Definir preferências de site para transferência de arquivos
    10. Especificar configurações do servidor proxy no Dreamweaver
    11. Sincronizar as configurações do Dreamweaver com a Creative Cloud
    12. Como usar o Git no Dreamweaver
  6. Gerenciar arquivos
    1. Criar e abrir arquivos
    2. Gerenciamento de arquivos e pastas
    3. Obter e colocar arquivos no servidor
    4. Devolver e retirar arquivos
    5. Sincronizar arquivos
    6. Comparar arquivos em busca de diferenças
    7. Encobrir arquivos e pastas em seu site do Dreamweaver
    8. Ativar as Design Notes para sites do Dreamweaver
    9. Impedir possível ataque ao Gatekeeper
  7. Layout e design
    1. Usar auxílios visuais para layout
    2. Sobre usar o CSS para criar o layout da página
    3. Criar sites responsivos usando o Bootstrap
    4. Criar e usar consultas de mídia no Dreamweaver
    5. Apresentar conteúdo em tabelas
    6. Cores
    7. Design responsivo usando layouts de grade fluida
    8. Extract no Dreamweaver
  8. CSS
    1. Noções sobre as folhas de estilos em cascata
    2. Aplicar layout às páginas usando o CSS Designer
    3. Usar pré-processadores de CSS no Dreamweaver
    4. Como definir preferências de estilo CSS no Dreamweaver
    5. Mover regras de CSS no Dreamweaver
    6. Converter CSS inline em uma regra de CSS no Dreamweaver
    7. Trabalhar com tags div
    8. Aplicação de degradês ao fundo
    9. Criar e editar efeitos de transição do CSS3 no Dreamweaver
    10. Formatar código
  9. Conteúdo e ativos de página
    1. Definir propriedades da página
    2. Configurar propriedades de cabeçalho e propriedades de link de CSS
    3. Trabalhar com texto
    4. Localizar e substituir texto, tags e atributos
    5. Painel DOM
    6. Editar na Visualização dinâmica
    7. Codificar documentos do Dreamweaver
    8. Selecionar e exibir os elementos na janela Documento
    9. Definir propriedades de texto no Inspetor de propriedades
    10. Verificar ortografia de uma página Web
    11. Usar regras horizontais no Dreamweaver
    12. Adicionar e modificar combinações de fontes no Dreamweaver
    13. Trabalhar com ativos
    14. Inserir e atualizar datas no Dreamweaver
    15. Criar e gerenciar ativos favoritos no Dreamweaver
    16. Inserir e editar imagens no Dreamweaver
    17. Adicionar objetos de mídia
    18. Adição de vídeos no Dreamweaver
    19. Inserir vídeo HTML5
    20. Inserir arquivos SWF
    21. Adicionar efeitos de áudio
    22. Inserir áudio HTML5 no Dreamweaver
    23. Trabalhar com itens da biblioteca
    24. Usar texto em árabe e hebraico no Dreamweaver
  10. Vinculação e navegação
    1. Sobre vinculação e navegação
    2. Vinculação
    3. Mapas de imagem
    4. Solucionar problemas com links
  11. Efeitos e widgets do jQuery
    1. Usar widgets de interface e para dispositivos móveis do jQuery no Dreamweaver
    2. Usar efeitos do jQuery no Dreamweaver
  12. Programar sites
    1. Sobre codificação no Dreamweaver
    2. Ambiente de codificação no Dreamweaver
    3. Definir preferências de codificação
    4. Personalizar codificação por cores
    5. Escrever e editar código
    6. Dicas de código e preenchimento de código
    7. Recolher e expandir código
    8. Reutilizar código com snippets
    9. Linting de código
    10. Otimizar código
    11. Editar código na Visualização de design
    12. Trabalhar com conteúdo do cabeçalho das páginas
    13. Inserir inclusões de servidor no Dreamweaver
    14. Usar bibliotecas de tags no Dreamweaver
    15. Importar tags personalizadas para o Dreamweaver
    16. Usar comportamentos JavaScript (instruções gerais)
    17. Aplicar comportamentos internos do JavaScript
    18. Sobre XML e XSLT
    19. Executar transformações XSL do servidor no Dreamweaver
    20. Executar transformações XSL do cliente no Dreamweaver
    21. Adicionar entidades de caracteres para XSLT no Dreamweaver
    22. Formatar código
  13. Fluxos de trabalho entre produtos
    1. Instalar e usar extensões no Dreamweaver
    2. Atualizações dentro do aplicativo no Dreamweaver
    3. Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
    4. Trabalho com o Fireworks e o Dreamweaver
    5. Editar conteúdo em sites do Dreamweaver usando o Contribute
    6. Integração do Business Catalyst ao Dreamweaver
    7. Criar campanhas de email personalizadas
  14. Modelos
    1. Sobre os modelos do Dreamweaver
    2. Reconhecimento de modelos e documentos baseados em modelo
    3. Criar um modelo do Dreamweaver
    4. Criar regiões editáveis nos modelos
    5. Criar regiões e tabelas repetitivas no Dreamweaver
    6. Usar regiões opcionais em modelos
    7. Definir atributos de tag editáveis no Dreamweaver
    8. Como criar modelos aninhados no Dreamweaver
    9. Editar, atualizar e excluir modelos
    10. Exportar e importar conteúdo xml no Dreamweaver
    11. Aplicar ou remover um modelo em um documento
    12. Editar conteúdo em modelos do Dreamweaver
    13. Regras de sintaxe para tags de modelo no Dreamweaver
    14. Definir preferências de realce para regiões de modelo
    15. Vantagens de usar modelos no Dreamweaver
  15. Dispositivo móvel e multitela
    1. Criar consultas de mídia
    2. Alterar a orientação de página para dispositivos móveis
    3. Criar aplicativos Web para dispositivos móveis usando o Dreamweaver
  16. Sites dinâmicos, páginas e formulários Web
    1. Noções sobre aplicativos Web
    2. Configurar o computador para desenvolvimento de aplicativos
    3. Solucionar problemas de conexões de banco de dados
    4. Remover scripts de conexão no Dreamweaver
    5. Criar páginas dinâmicas
    6. Visão geral das fontes de conteúdo dinâmico
    7. Definir origens de conteúdo dinâmico
    8. Adicionar conteúdo dinâmico a páginas
    9. Alterar conteúdo dinâmico no Dreamweaver
    10. Exibir registros de banco de dados
    11. Fornecer e solucionar problemas de live data no Dreamweaver
    12. Adicionar comportamentos personalizados de servidor no Dreamweaver
    13. Criar formulários usando o Dreamweaver
    14. Usar formulários para reunir informações de usuários
    15. Criar e ativar formulários do ColdFusion no Dreamweaver
    16. Criar formulários Web
    17. Suporte aprimorado a HTML5 para elementos de formulário
    18. Desenvolver um formulário usando o Dreamweaver
  17. Criação visual de aplicativos
    1. Criar páginas mestre e detalhadas no Dreamweaver
    2. Criar páginas de pesquisa e de resultados
    3. Criar uma página de inserção de registro
    4. Criar uma página de registro de atualização no Dreamweaver
    5. Criar páginas de exclusão de registro no Dreamweaver
    6. Usar comandos ASP para modificar um banco de dados no Dreamweaver
    7. Criar uma página de registro
    8. Criar uma página de logon
    9. Criar uma página que apenas usuários autorizados podem acessar
    10. Proteger pastas no ColdFusion usando o Dreamweaver
    11. Usar componentes do ColdFusion no Dreamweaver
  18. Testar, visualizar e publicar sites
    1. Visualizar páginas
    2. Visualizar páginas Web do Dreamweaver em vários dispositivos
    3. Testar seu site do Dreamweaver
  19. Solução de problemas
    1. Problemas corrigidos
    2. Problemas conhecidos

 

 

Saiba como usar tabelas para apresentar o conteúdo de seu site. Além disso, aprenda a dividir e mesclar células da tabela e importar e exportar dados tabulares.

As tabelas são uma ferramenta eficaz para apresentar dados tabulares e dispor o texto e os gráficos em uma página HTML. Uma tabela consiste em uma ou mais linhas; cada linha é formada por uma ou mais células. Embora as colunas não sejam, em geral, especificadas explicitamente no código HTML, o Dreamweaver permite que você manipule colunas, bem como linhas e células.

O Dreamweaver exibe a largura da tabela e a largura da coluna para cada coluna de tabela quando a tabela é selecionada ou quando o ponto de inserção está na tabela. Ao lado das larguras, estão as setas do menu de cabeçalho de tabela e dos menus de cabeçalho de coluna. Use os menus para obter acesso rápido aos comandos comuns relacionados a tabela. Você pode ativar ou desativar as larguras e os menus.

Se a largura da tabela ou de uma coluna não for exibida, é sinal de que a tabela ou coluna não tem uma largura especificada no código HTML. Se aparecerem dois números, a largura visual conforme é exibida na Visualização de design não corresponde à largura especificada no código HTML. Isso pode acontecer quando você redimensiona uma tabela arrastando seu canto inferior direito ou quando você adiciona o conteúdo a uma célula maior do que sua largura definida.

Por exemplo, se você definir a largura de uma coluna como 200 pixels e adicionar um conteúdo que aumente a largura para 250 pixels, dois números aparecerão para essa coluna: 200 (a largura especificada no código) e (250) entre parênteses (a largura visual da coluna conforme é processada na tela).

Observação:

você também pode dispor o layout das páginas usando o posicionamento CSS.

Precedência da formatação da tabela em HTML

Ao formatar tabelas na Visualização de design, você pode definir propriedades para a tabela inteira ou para linhas, colunas ou células selecionadas da tabela. Quando uma propriedade, como alinhamento ou cor de fundo, é definida como um valor para a tabela inteira e outro valor para células individuais, a formatação da célula tem precedência sobre a formatação da linha, que, por sua vez, tem precedência sobre a formatação da tabela.

A ordem de precedência da formatação da tabela é a seguinte:

  1. Células
  2. Linhas
  3. Tabela

Por exemplo, se você definir a cor de fundo de uma única célula para azul e definir a cor de fundo de toda a tabela para amarelo, a célula azul não será alterada para amarelo, já que a formatação da célula tem precedência sobre a formatação da tabela.

Observação:

quando você define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada célula da coluna.

Sobre a divisão e mesclagem das células da tabela

Você pode mesclar qualquer número de células adjacentes, contanto que a seleção inteira seja uma linha ou um retângulo de células, a fim de produzir uma única célula que abranja várias colunas ou linhas. É possível dividir uma célula em qualquer número de linhas ou colunas, independentemente de ela ter sido anteriormente mesclada ou não. O Dreamweaver reestrutura automaticamente a tabela (adicionando quaisquer atributos colspan ou rowspan necessários) para criar a disposição especificada.

No exemplo a seguir, as células do meio das primeiras duas linhas foram mescladas em uma única célula que abrange duas linhas.

Células mescladas

Inserir uma tabela e adicionar conteúdo

Usar o painel Inserir ou o menu Inserir para criar uma nova tabela. Em seguida, adicione texto e imagens às células da tabela da mesma maneira que adiciona texto e imagens fora de uma tabela.

  1. Coloque o ponto de inserção onde você deseja que a tabela seja exibida.

    Observação:

    se o documento estiver em branco, você só poderá colocar o ponto de inserção no início do documento.

    • Selecione Inserir > Tabela.

    • Na categoria HTML do painel Inserir, clique em Tabela.

  2. Defina os atributos da caixa de diálogo Tabela e clique em OK para criar a tabela.
    Criar uma tabela
    Criar uma tabela

    Linhas

    Determina o número de linhas de tabela.

    Colunas

    Determina o número de colunas de tabela.

    Largura da tabela

    Especifica a largura da tabela em pixels ou como porcentagem da largura da janela do navegador.

    Espessura da borda

    Especifica a largura, em pixels, das bordas da tabela.

    Espaçamento da célula

    Determina o número de pixels entre as células de tabela adjacentes.

    Observação:

    Quando você não atribui explicitamente valores para espessura de tabela ou espaçamento e preenchimento de célula, a maioria dos navegadores exibe a espessura da borda da tabela e o preenchimento da célula definidos como 1 e o espaçamento da célula definido como 2. Para garantir que os navegadores exibirão a tabela sem borda, preenchimento ou espaçamento, defina Preenchimento da célula e Espaçamento da célula como 0.

    Preenchimento da célula

    Determina o número de pixels entre a borda de uma célula e seu conteúdo.

    Nenhum

    Não ativa cabeçalhos de coluna ou linha para a tabela.

    À esquerda

    Torna a primeira coluna da tabela uma coluna de cabeçalhos, a fim de que você possa digitar um cabeçalho para cada linha da tabela.

    Superior

    Torna a primeira linha da tabela uma linha de cabeçalhos, a fim de que você possa digitar um cabeçalho para cada coluna da tabela.

    Ambos

    Permite que você digite cabeçalhos de coluna e linha na tabela.

    Observação:

    É recomendável usar cabeçalhos caso algum visitante do seu site use leitor de tela. Os leitores de tela leem os cabeçalhos da tabela e ajudam os usuários de leitores de tela a controlar as informações da tabela.

    Legenda

    Fornece um título de tabela que é exibido fora da tabela.

    Resumo

    Fornece uma descrição de tabela. Os leitores de tela leem o texto do resumo, mas o texto não aparece no navegador do usuário.

Importar e exportar tabelas

Você pode importar dados tabulares criados em outro aplicativo (como o Microsoft Excel) e salvos em um formato de texto delimitado (com itens separados por tabulações, vírgulas, dois-pontos ou ponto-e-vírgulas) no Dreamweaver e formatá-los como uma tabela.

Também é possível exportar os dados da tabela do Dreamweaver para um arquivo de texto, com o conteúdo das células adjacentes separado por um delimitador. Você pode usar vírgulas, dois-pontos, ponto-e-vírgulas ou espaços como delimitadores. Quando você exporta uma tabela, a tabela inteira é exportada. Não é possível selecionar partes de uma tabela a ser exportada.

Observação:

Se você precisa apenas de alguns dados de uma tabela, por exemplo, as primeiras seis linhas ou as primeiras seis colunas, copie as células que contêm esses dados, cole as células fora da tabela (para criar uma nova tabela) e exporte a nova tabela.

Importação de dados de tabela

  1. Selecione Arquivo > Importar > Importar dados tabulares.

  2. Especifique as opções dos dados tabulares e clique em OK.

    Arquivo de dados

    O nome do arquivo a ser importado. Clique no botão Procurar para selecionar um arquivo.

    Delimitador

    O delimitador usado no arquivo que você está importando.

    Se você selecionar Outro, uma caixa de texto aparecerá à direita do menu pop-up. Digite o delimitador usado no arquivo.

    Observação:

    especifique o delimitador usado quando o arquivo de dados foi salvo. Se você não fizer isso, o arquivo não será importado corretamente e os dados não serão corretamente formatados em uma tabela.

    Largura da tabela

    A largura da tabela.

    • Selecione Ajustar aos dados para aumentar suficientemente cada coluna para que caiba a sequência de texto mais longa.

    • Selecione Definir para especificar uma largura de tabela fixa em pixels ou como uma porcentagem da largura da janela do navegador.

    Borda

    Especifica a largura, em pixels, das bordas da tabela.

    Preenchimento da célula

    O número de pixels entre o conteúdo de uma célula e os limites da célula.

    Espaçamento da célula

    O número de pixels entre as células de tabela adjacentes.

    Observação:

    Se você não atribuir explicitamente valores para bordas, espaçamento de célula e preenchimento de célula, a maioria dos navegadores exibirá a tabela com as bordas e o preenchimento da célula definidos como 1, e o espaçamento da célula definido como 2. Para garantir que os navegadores exibirão a tabela sem preenchimento ou espaçamento, defina Preenchimento da célula e Espaçamento da célula como 0. Para exibir os limites da célula e da tabela quando a borda estiver definida como 0, selecione Exibir > Auxílios visuais > Bordas da tabela.

    Formatar linha superior

    Determina qual formatação, se houver alguma, está aplicada à linha superior da tabela. Selecione entre as quatro opções de formatação: sem formatação, negrito, itálico ou negrito itálico.

Exportação de uma tabela

  1. Coloque o ponto de inserção em qualquer célula da tabela.
  2. Selecione Arquivo > Exportar > Tabela.
  3. Especifique as seguintes opções:

    Delimitador

    Especifica qual caractere delimitador deve ser usado para separar itens no arquivo exportado.

    Quebras de linha

    Especifica em qual sistema operacional você estará abrindo o arquivo exportado: Windows, Macintosh ou UNIX. (Diferentes sistemas operacionais têm diferentes formas de indicar o fim de uma linha de texto.)

  4. Clique em Exportar.
  5. Digite um nome para o arquivo e clique em Salvar.

Seleção de elementos de tabela

Você pode selecionar uma tabela, linha ou coluna inteira de uma só vez. Também é possível selecionar uma ou mais células individuais.

Quando você mover o ponteiro sobre uma tabela, linha, coluna ou célula, o Dreamweaver realçará todas as células dessa seleção a fim de que você saiba quais células serão selecionadas. Isso será útil quando você tiver tabelas sem bordas, células que abranjam várias colunas ou linhas, ou tabelas aninhadas. Você pode alterar a cor do realce nas preferências.

Observação:

Se você posicionar o ponteiro sobre a borda de uma tabela, mantenha pressionada a tecla Control (Windows) ou Command (Macintosh), a estrutura inteira da tabela, ou seja, todas as células da tabela, será realçada. Isso será útil quando você tiver tabelas aninhadas e precisar ver a estrutura de uma das tabelas.

Seleção de uma tabela inteira

Siga um destes procedimentos para selecionar uma tabela:

  • Clique no canto superior esquerdo da tabela para selecioná-la.
  • Clique em uma célula de tabela e selecione a tag no seletor de tags no canto inferior esquerdo da janela Documento.
  • Clique em uma célula de tabela, clique no menu de cabeçalho de tabela e selecione Selecionar tabela. As alças de seleção aparecem nas bordas inferior e direita da tabela selecionada.
  • Clique em uma célula e selecione Editar > Tabela > Selecionar tabela.

Seleção de várias linhas ou colunas ou de linhas ou colunas individuais

  1. Posicione o ponteiro para a borda esquerda de uma linha ou a borda superior de uma coluna.
  2. Quando o ponteiro se transformar em uma seta de seleção, clique para selecionar uma linha ou coluna, ou arraste para selecionar várias linhas ou colunas.
    Selecionar uma linha

Seleção de uma única coluna

  1. Clique na coluna.
  2. Clique no menu de cabeçalho de coluna e escolha Selecionar coluna.

Seleção de uma única célula

  1. Siga um destes procedimentos:

    • Clique na célula e selecione a tag <td> no seletor de tags no canto inferior esquerdo da janela Documento.
    • Pressione Control (Windows) ou Command (Macintosh) e clique na célula.

Seleção de uma linha ou de um bloco retangular de células

Siga um destes procedimentos:
  • Arraste de uma célula para outra célula.

  • Clique em uma célula, pressione Control (Windows) ou Command (Macintosh) enquanto clica na mesma célula para selecioná-la e pressione Shift enquanto clica em outra célula.

Selecionar um bloco de células

Seleção de células não adjacentes

Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas células, linhas ou colunas que você deseja selecionar.

Se cada célula, linha ou coluna em que você mantém pressionada a tecla Control enquanto clica ou mantém pressionada a tecla Command enquanto clica ainda não estiver selecionada, ela será adicionada à seleção. Se ela já estiver selecionada, será removida da seleção.

Alteração da cor de realce dos elementos de tabela

  1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).
  2. Selecione Realce na lista de categorias à esquerda, faça uma das seguintes alterações e clique em OK.
    • Para alterar a cor de realce dos elementos de tabela, clique na caixa de cor de Passar o mouse, selecione a cor de realce usando o seletor de cores (ou digite o valor hexadecimal para a cor de realce na caixa de texto).

    • Para ativar ou desativar o realce dos elementos de tabela, marque ou desmarque a opção Mostrar em Passar o mouse.

    Observação:

    Essas opções afetam todos os objetos que o Dreamweaver realça quando você move o ponteiro sobre eles.  

Definição das propriedades da tabela

Você pode usar o Inspetor de propriedades para editar tabelas.

  1. Selecione uma tabela.
  2. Altere propriedades no Inspetor de propriedades (Janela > Propriedades), conforme desejar.
    Propriedades da tabela
    Propriedades da tabela

    ID da tabela

    Uma identificação da tabela.

    Linhas e colunas

    O número de linhas e colunas da tabela.

    L

    A largura da tabela em pixels ou como uma porcentagem da largura da janela do navegador.

    Observação:

    você normalmente não precisa definir a altura de uma tabela.

    PreenchCélula

    O número de pixels entre o conteúdo de uma célula e os limites da célula.

    EspaçoCélula

    O número de pixels entre as células de tabela adjacentes.

    Alinhar

    Determina onde a tabela aparecerá em relação a outros elementos no mesmo parágrafo, como texto ou imagens.

    À esquerda alinha a tabela à esquerda dos outros elementos (a fim de que o texto no mesmo parágrafo seja disposto ao redor da tabela à direita); À direita alinha a tabela à direita dos outros elementos (com o texto disposto ao redor dela à esquerda) e Centralizado centraliza a tabela (com o texto exibido acima e/ou abaixo da tabela). Padrão indica que o navegador deve usar o alinhamento padrão.

    Observação:

    Quando o alinhamento for definido como Padrão, o outro conteúdo não será exibido ao lado da tabela. Para exibir uma tabela ao lado do outro conteúdo, use o alinhamento À esquerda ou À direita.

    Borda

    Especifica a largura, em pixels, das bordas da tabela.

    Observação:

    Se você não atribuir explicitamente valores para a borda, o espaçamento de célula e o preenchimento de célula, a maioria dos navegadores exibirá a tabela com a borda e o preenchimento da célula definidos como 1, e o espaçamento da célula definido como 2. Para garantir que os navegadores exibirão a tabela sem preenchimento ou espaçamento, defina Borda, Preenchimento da célula e Espaçamento da célula como 0. Para exibir os limites da célula e da tabela quando a borda estiver definida como 0, selecione Exibir > Auxílios visuais > Bordas da tabela.

    Classe

    define a classe CSS na tabela.

    Observação:

    talvez seja necessário expandir o inspetor Propriedades da tabela para ver as opções a seguir. Para expandir o inspetor Tabela de propriedades, clique na seta de expansão, no canto inferior direito.

    Limpar larguras das colunas e Limpar alturas das linhas

    e Limpar alturas das linhas excluem todos os valores de largura de coluna ou altura de linha explicitamente especificados na tabela.

    Converter larguras da tabela em pixels

    e Converter alturas da tabela em pixels definem a largura ou altura de cada coluna da tabela para a largura atual em pixels (também define a largura da tabela inteira para a largura atual em pixels).

    Converter larguras da tabela em porcentagem

    e Converter alturas da tabela em porcentagem definem a largura ou altura de cada coluna da tabela para a largura atual expressa como uma porcentagem da largura da janela Documento (também define a largura da tabela inteira para a largura atual como uma porcentagem da largura da janela Documento).

    Se você tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.

Definição das propriedades da célula, linha ou coluna

Você pode usar o Inspetor de propriedades para editar as células e linhas de uma tabela.

  1. Selecione a coluna ou linha.
  2. No Inspetor de propriedades (Janela > Propriedades), defina as seguintes opções:

    Horz

    Especifica o alinhamento horizontal do conteúdo de uma célula, linha ou coluna. Você pode alinhar o conteúdo à esquerda, à direita ou ao centro das células, ou pode indicar se o navegador deve usar o alinhamento padrão (geralmente À esquerda para células regulares e Centralizado para células de cabeçalho).

    Vert

    Especifica o alinhamento vertical do conteúdo de uma célula, linha ou coluna. Você pode alinhar o conteúdo na parte superior, ao meio, na parte inferior ou na linha de base das células, ou indicar se o navegador deve usar o alinhamento padrão (geralmente Meio).

    L e A

    A largura e a altura das células selecionadas em pixels ou como uma porcentagem da largura ou altura da tabela inteira. Para especificar uma porcentagem, insira o símbolo de porcentagem (%) após o valor. Para permitir que o navegador determine a largura ou altura apropriada com base no conteúdo da célula, e as larguras e alturas das outras colunas e linhas, deixe o campo em branco (o padrão).

    Por padrão, um navegador escolhe uma altura de linha ou largura de coluna para acomodar, e a imagem mais larga ou a linha mais longa em uma coluna. É por isso que, às vezes, uma coluna se torna muito mais larga que as outras colunas da tabela quando você adiciona conteúdo a ela.

    Observação:

    é possível especificar uma altura como porcentagem da altura total da tabela, mas a linha pode não ser exibida na altura percentual especificada nos navegadores.

    Fundo

    A cor do fundo para uma célula, coluna ou linha, escolhida com o seletor de cores.

    Mesclar células

    Combina as células, linhas ou colunas selecionadas em uma única célula. Você pode mesclar as células somente se elas formarem um bloco retangular ou linear.

    Dividir célula

    Divide uma célula, criando duas ou mais células. É possível dividir somente uma célula por vez. Este botão ficará desativado se mais de uma célula for selecionada.

    Sem quebra de linha

    Impede a quebra automática de linha, mantendo todo o texto de uma célula em uma única linha. Se a opção Sem quebra de linha estiver ativada, as células aumentarão para acomodar todos os dados enquanto você os digita ou os cola em uma célula. (Normalmente, as células se expandem horizontalmente para acomodar a palavra mais longa ou a imagem mais larga na célula; em seguida, elas se expandem verticalmente quando necessário para acomodar outro conteúdo.)

    Cabeçalho

    Formata as células selecionadas como células de cabeçalho de tabela. O conteúdo das células de cabeçalho de tabela estarão em negrito e centralizados, por padrão.

    Observação:

    Você pode especificar as larguras e alturas como pixels ou porcentagens, e pode converter pixels em porcentagens e vice-versa.

    Observação:

    quando você define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada célula da coluna. No entanto, ao definir determinadas propriedades para uma linha, o Dreamweaver altera os atributos da tag tr em vez de alterar os atributos de cada tag td na linha. Quando estiver aplicando o mesmo formato a todas as células em uma linha, a aplicação do formato à tag tr produzirá um código HTML mais limpo e conciso.

  3. Pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor.

Formatação de tabelas e células

Você pode alterar a aparência das tabelas definindo as propriedades da tabela e suas células ou aplicando um design predefinido à tabela. Antes de definir as propriedades da tabela e da célula, saiba que a ordem de precedência para formatação é células, linhas e tabelas.

Observação:

Para formatar o texto dentro de uma célula de tabela, use os mesmos procedimentos que você usaria para formatar o texto fora de uma tabela.

Alteração do formato de uma tabela, linha, célula ou coluna

  1. Selecione uma tabela, célula, linha ou coluna.
  2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expansão no canto inferior direito e altere as propriedades quando necessário.
  3. Altere as propriedades quando necessário.

    Para obter mais informações sobre as opções, clique no ícone Ajuda do Inspetor de propriedades.

    Observação:

    quando você define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada célula da coluna. No entanto, quando você define determinadas propriedades de uma linha, o Dreamweaver altera os atributos da tag tr em vez de alterar os atributos de cada tag td da linha. Quando você estiver aplicando o mesmo formato a todas as células de uma linha, a aplicação do formato à tag tr produzirá um código HTML mais limpo e conciso.

Adição ou edição dos valores de acessibilidade de uma tabela na Visualização de código

Edite os atributos apropriados no código.
Observação:

Para localizar rapidamente as tags no código, clique na tabela, selecione a tag <table> no seletor de tags, na parte inferior da janela Documento.

Adição ou edição dos valores de acessibilidade de uma tabela na Visualização de design

  • Para editar a legenda da tabela, realce a legenda e digite uma nova.
    • Para editar o alinhamento da legenda, coloque o ponto de inserção na legenda da tabela, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) e selecione Editar código de tag.

    • Para editar o resumo da tabela, selecione a tabela, clique com o botão direito do mouse (Windows) ou pressione Control enquanto clica (Macintosh) e selecione Editar código de tag.

Redimensionamento de tabelas, colunas e linhas

Redimensionamento de tabelas

Você pode redimensionar uma tabela inteira ou linhas e colunas individuais. Quando uma tabela inteira é redimensionada, todas as células da tabela mudam proporcionalmente de tamanho. Se as células de uma tabela tiverem larguras ou alturas explícitas especificadas, o redimensionamento da tabela alterará o tamanho visual das células na janela Documento, mas não alterará as larguras e alturas especificadas das células.

É possível redimensionar uma tabela arrastando uma de suas alças de seleção. O Dreamweaver exibe a largura da tabela, juntamente com um menu de cabeçalho de tabela, na parte superior ou inferior da tabela quando esta é selecionada ou quando o ponto de inserção está na tabela.

Às vezes, as larguras de coluna definidas no código HTML não correspondem às suas larguras aparentes na tela. Quando isso acontecer, você poderá torná-las consistentes. As larguras de tabela e coluna e os menus de cabeçalho aparecem no Dreamweaver para ajudar você a dispor o layout das tabelas. Você pode ativar ou desativar as larguras e os menus quando necessário.

Redimensionamento de colunas e linhas

Você pode alterar a largura de uma coluna ou a altura de uma linha no Inspetor de propriedades ou arrastando as bordas da coluna ou linha. Se você tiver problemas com o redimensionamento, limpe as larguras de coluna ou as alturas de linha e comece novamente.

Observação:

também é possível alterar as larguras e alturas de célula diretamente no código HTML usando a Visualização de código.

O Dreamweaver exibe as larguras de coluna, juntamente com os menus de cabeçalho de coluna, nas partes superiores ou inferiores das colunas quando a tabela é selecionada ou quando o ponto de inserção está na tabela. É possível ativar ou desativar os menus de cabeçalho de coluna conforme necessário.

Redimensionamento de uma tabela

Selecione a tabela. Se você estiver na Visualização dinâmica, a Exibição do elemento é mostrada quando você seleciona a tabela. Clique no ícone de Encaixado para entrar no modo de formatação da tabela.

  • Para redimensionar a tabela horizontalmente, arraste a alça de seleção à direita.

  • Para redimensionar a tabela verticalmente, arraste a alça de seleção na parte inferior.

  • Para redimensionar a tabela em ambas as dimensões, arraste a alça de seleção no canto inferior direito.

Para sair do modo de formatação de tabela na Visualização dinâmica, pressione Esc ou clique fora da tabela. Você pode usar as opções de menu Editar > Tabela para modificar a tabela ainda mais.

Observação: as opções no menu Editar > Tabela variam conforme o tipo de seleção, que pode ser de uma tabela inteira ou apenas uma célula. Na Visualização dinâmica, a Exibição do elemento mostra “table” quando uma tabela inteira é selecionada e “td” quando uma célula específica é selecionada. Para alternar de o modo de formatação de células para formatação de tabelas, clique na borda da tabela.

Alteração da largura de uma coluna e manutenção da largura geral da tabela

  1. Na Visualização de design, arraste a borda direita da coluna que você deseja alterar.

    A largura da coluna adjacente também é alterada. Na verdade, você redimensiona duas colunas. O feedback visual mostra como as colunas serão ajustadas. A largura geral da tabela não é alterada.

    Alterar a largura da coluna mantendo a largura da tabela

    Observação:

    nas tabelas com larguras baseadas em porcentagem (e não em pixels), se você arrastar a borda direita da coluna da extrema direita, a largura da tabela inteira será alterada e todas as colunas serão aumentadas ou diminuídas proporcionalmente.

Alteração da largura de uma coluna e manutenção do tamanho das outras colunas

  1. Na Visualização de design, mantenha a tecla Shift pressionada e arraste a borda da coluna.

    A largura de uma coluna é alterada. O feedback visual mostra como as colunas serão ajustadas. A largura geral da tabela é alterada para acomodar a coluna que você está redimensionando.

    Alterar a largura de uma coluna e manter a largura de outras colunas

Alteração visual da altura de uma linha

Arraste a borda inferior da linha.

Torne as larguras de coluna no código consistentes com as larguras visuais

  1. Clique em uma célula.
  2. Clique no menu de cabeçalho de tabela e selecione Manter consistência de todas as larguras.

    O Dreamweaver redefine a largura especificada no código para que corresponda à largura visual.

Limpeza de todas as larguras ou alturas definidas em uma tabela

  1. Selecione a tabela.
  2. Siga um destes procedimentos:
    • Selecione Editar > Tabela > Limpar larguras das células ou Editar > Tabela > Limpar alturas das células.

    • No Inspetor de propriedades (Janela > Propriedades), clique no botão Limpar alturas das linhas ou no botão Limpar larguras das colunas .

    • Clique no menu de cabeçalho de tabela e selecione Limpar todas Alturas ou Limpar todas Larguras.

Limpeza da largura definida de uma coluna

Clique na coluna, clique no menu de cabeçalho de coluna e selecione Limpar larguras das colunas.

Ativação ou desativação das larguras de tabela e coluna e dos menus na Visualização de design

Selecione Exibir > Opções de visualização de design > Auxílios visuais > Larguras de tabela.

Adição e remoção de linhas e colunas

Para adicionar e remover linhas e colunas, use Modificar > Tabela ou menu de cabeçalho de coluna.

Observação:

Se você pressionar Tab na última célula de uma tabela, outra linha será adicionada automaticamente à tabela.

Adição de uma única linha ou coluna

Clique em uma célula e siga um destes procedimentos:
  • Selecione Editar > Tabela > Inserir linha ou Editar > Tabela > Inserir coluna.

    Uma linha aparecerá acima do ponto de inserção ou uma coluna aparecerá à esquerda do ponto de inserção.

  • Clique no menu de cabeçalho de coluna e selecione Inserir coluna à esquerda ou Inserir coluna à direita.

     

Adição de várias linhas ou colunas

  1. Clique em uma célula.
  2. Selecione Editar > Tabela > Inserir linhas ou colunas, preencha a caixa de diálogo e clique em OK.

    Inserir

    Indica se as linhas ou colunas serão inseridas ou não.

    Número de linhas ou número de colunas

    O número de linhas ou colunas a ser inserido.

    Onde

    Especifica se as novas linhas ou colunas devem aparecer antes ou após a linha ou coluna da célula selecionada.

Exclusão de uma linha ou coluna

Siga um destes procedimentos:
  • Clique em uma célula na linha ou na coluna a ser excluída e selecione Editar > Tabela > Excluir linha ou Editar > Tabela > Excluir coluna.

  • Selecione uma linha ou coluna completa e pressione a tecla Delete.

  • No Inspetor de propriedades (Janela > Propriedades), siga destes procedimentos:
    • Para adicionar ou excluir linhas, aumente ou diminuir o valor Linhas.
    • Para adicionar ou excluir colunas, aumente ou diminua o valor Colunas.
Observação:

O Dreamweaver não avisará se você estiver excluindo linhas e colunas que contenham dados.

Divisão e mesclagem de células

Use o Inspetor de propriedades ou as opções no submenu Editar > Tabela para dividir ou mesclar células.

Mesclagem de duas ou mais células em uma tabela

  1. Selecione as células em uma linha contígua e sob a forma de um retângulo.

    Na ilustração a seguir, a seleção é um retângulo de células. Portanto, as células podem ser mescladas.

    As células podem ser mescladas em um retângulo de células

    Na ilustração a seguir, a seleção não é um retângulo de células. Portanto, as células não podem ser mescladas.

    As células não podem ser mescladas se a seleção não for um retângulo

  2. Siga um destes procedimentos:
    • Selecione Editar > Tabela > Mesclar células.

    • No Inspetor de propriedades HTML expandido (Janela > Propriedades), clique em Mesclar células.

    Observação:

    se o botão não for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para ver todas as opções.

    O conteúdo das células individuais é colocado na célula mesclada resultante. As propriedades da primeira célula selecionada são aplicadas à célula mesclada.

Divisão de uma célula

  1. Clique na célula e siga um destes procedimentos:
    • Selecione Editar > Tabela > Dividir célula.

    • No Inspetor de propriedades HTML expandido (Janela > Propriedades), clique em Dividir célula.

    Observação:

    se o botão não for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para ver todas as opções.

  2. Na caixa de diálogo Dividir célula, especifique como a célula deve ser dividida:

    Dividir célula em

    Especifica se a célula será dividida em linhas ou colunas.

    Número de linhas/Número de colunas

    Especifica em quantas linhas ou colunas a célula será dividida.

Aumento ou diminuição do número de linhas ou colunas ocupadas por uma célula

Siga um destes procedimentos:
  • Selecione Editar > Tabela > Aumentar extensão da linha ou Editar > Tabela > Aumentar extensão da coluna.

  • Selecione Editar > Tabela > Diminuir extensão da linha ou Editar > Tabela > Diminuir extensão da coluna.

Cópia, colagem e exclusão de células

Você pode copiar, colar ou excluir uma única célula de tabela ou várias células de uma só vez, preservando a formatação das células.

É possível colar células no ponto de inserção ou no lugar de uma seleção em uma tabela existente. Para colar várias células de tabela, o conteúdo da área de transferência deve ser compatível com a estrutura da tabela ou a seleção na tabela em que as células serão coladas.

Recorte ou cópia das células de tabela

  1. Selecione uma ou mais células em uma linha contígua e sob a forma de um retângulo.

    Na ilustração a seguir, a seleção é um retângulo de células. Portanto, as células podem ser recortadas ou copiadas.

    As células podem ser recortadas e copiadas em um retângulo de células

    Na ilustração a seguir, a seleção não é um retângulo. Portanto, as células não podem ser recortadas ou copiadas.

    As células não podem ser recortadas e copiadas se a seleção não for um retângulo

  2. Selecione Editar > Recortar ou Editar > Copiar.
    Observação:

    se você selecionou uma linha ou coluna inteira e clicar em Editar > Recortar, toda a linha ou coluna será removida da tabela (e não apenas o conteúdo das células).

Colagem das células de tabela

  1. Selecione o local onde você deseja colar as células:
    • Para substituir as células existentes pelas células que você está colando, selecione um conjunto de células existentes com o mesmo layout das células na área de transferência. (Por exemplo, se você copiou ou recortou um bloco de células de 3 x 2, poderá selecionar outro bloco de células de 3 x 2 a ser substituído pela colagem.)

    • Para colar uma linha completa de células acima de uma célula específica, clique nessa célula.

    • Para colar uma coluna completa de células à esquerda de uma célula específica, clique nessa célula.

    Observação:

    se você tiver menos de uma linha ou coluna completa de células na área de transferência, e clicar em uma célula e colar as células da área de transferência, a célula em que você clicou e suas vizinhas possivelmente serão substituídas (dependendo do local dela na tabela) pelas células que estão sendo coladas.

    • Para criar uma nova tabela com as células coladas, coloque o ponto de inserção fora da tabela.
  2. Selecione Editar > Colar.

    Se você estiver colando linhas ou colunas inteiras em uma tabela existente, as linhas ou colunas serão adicionadas à tabela. Se você estiver colando uma célula individual, o conteúdo da célula selecionada será substituído. Se você estiver fazendo a colagem fora de uma tabela, as linhas, colunas ou células serão usadas para definir uma nova tabela.

Remoção do conteúdo da célula mantendo as células intactas

  1. Selecione uma ou mais células.
    Observação:

    assegure que a seleção não é inteiramente constituída de linhas ou colunas completas.

  2. Pressione a tecla Delete.

    Observação:

    se apenas linhas ou colunas completas estiverem selecionadas quando você clicar em Editar > Limpar ou pressionar Delete, as linhas ou colunas inteiras, e não apenas seu conteúdo, serão removidas da tabela.

Exclusão de linhas ou colunas que contêm células mescladas

  1. Selecione a linha ou coluna.
  2. Selecione Editar > Tabela > Excluir linha ou Editar > Tabela > Excluir coluna.

Aninhamento de tabelas

Uma tabela aninhada é uma tabela dentro de uma célula de outra tabela. Você pode formatar uma tabela aninhada como faria em qualquer outra tabela. No entanto, sua largura é limitada pela largura da célula em que ela aparece.

  1. Clique em uma célula da tabela existente.
  2. Selecione Inserir > Tabela, defina as opções Inserir tabela e clique em OK.

Ordenação de tabelas

Você pode ordenar as linhas de um tabela com base no conteúdo de uma única coluna. Também é possível executar uma ordenação de tabela mais complexa com base no conteúdo de duas colunas.

Você não pode ordenar tabelas que contenham o atributo colspan ou rowspan, ou seja, tabelas que contenham células mescladas.

  1. Selecione a tabela ou clique em qualquer célula.
  2. Selecione Editar > Tabela > Ordenar tabela, defina as opções na caixa de diálogo e clique em OK.

    Ordenar por

    Determina quais valores de coluna serão usados para ordenar as linhas da tabela.

    Ordem

    Determina se a coluna será ordenada por ordem alfabética ou numérica, e se ela será ordenada em ordem crescente (de A a Z, dos números menores para os maiores) ou decrescente.

    Quando o conteúdo de uma coluna for composto por números, selecione Numericamente. Uma ordenação alfabética aplicada a uma lista de números de um e dois dígitos resulta na ordenação dos números como se eles fossem palavras (por exemplo, 1, 10, 2, 20, 3, 30), e não como números realmente (por exemplo, 1, 2, 3, 10, 20, 30).

    Depois, por/Ordem

    Determina a ordem de uma ordenação secundária em uma coluna diferente. Especifica a coluna de ordenação secundária no menu pop-up Depois, por e a ordem da ordenação secundária nos menus pop-up Ordem.

    Ordenação inclui a primeira linha

    Especifica se a primeira linha da tabela deve ser incluída na ordenação. Se a primeira linha for um cabeçalho que não deve ser movido, não selecione esta opção.

    Ordenar linhas do cabeçalho

    Especifica que todas as linhas da seção thead (se houver alguma) da tabela devem ser ordenadas usando os mesmos critérios das linhas do corpo. (Observe que as linhas thead permanecem na seção thead e ainda aparecerão na parte superior da tabela, até mesmo depois da ordenação.) Para obter informações sobre a tag thead, consulte o painel Referência (selecione Ajuda > Referência).

    Ordenar linhas do rodapé

    Especifica que todas as linhas da seção tfoot (se houver alguma) da tabela devem ser ordenadas usando os mesmos critérios das linhas do corpo. (Observe que as linhas tfoot permanecem na seção tfoot e ainda aparecerão na parte inferior da tabela, até mesmo depois da ordenação.) Para obter informações sobre a tag tfoot, consulte o painel Referência (selecione Ajuda > Referência).

    Manter todas as cores de linha inalteradas após a ordenação

    Especifica que os atributos de linha de tabela (como cor) devem permanecer associados ao mesmo conteúdo após a ordenação. Se as linhas de tabela forem formatadas com duas cores alternativas, não selecione esta opção para garantir que a tabela classificada ainda terá linhas com cores alternativas. Se os atributos de linha forem específicos do conteúdo de cada linha, selecione esta opção para garantir que esses atributos permanecerão associados às linhas corretas na tabela ordenada.

Receba ajuda com mais rapidez e facilidade

Novo usuário?