Coloque o ponto de inserção onde você deseja que a tabela seja exibida.
- Guia do usuário do Dreamweaver
- Introdução
- Dreamweaver e Creative Cloud
- Áreas de trabalho e exibições do Dreamweaver
- Configurar sites
- Sobre sites do Dreamweaver
- Configurar uma versão local do site
- Conectar-se a um servidor de publicação
- Configurar um servidor de teste
- Importar e exportar configurações de site do Dreamweaver
- Trazer sites existentes de um servidor remoto para a raiz do site local
- Recursos de acessibilidade do Dreamweaver
- Configurações avançadas
- Definir preferências de site para transferência de arquivos
- Especificar configurações do servidor proxy no Dreamweaver
- Sincronizar as configurações do Dreamweaver com a Creative Cloud
- Como usar o Git no Dreamweaver
- Gerenciar arquivos
- Criar e abrir arquivos
- Gerenciamento de arquivos e pastas
- Obter e colocar arquivos no servidor
- Devolver e retirar arquivos
- Sincronizar arquivos
- Comparar arquivos em busca de diferenças
- Encobrir arquivos e pastas em seu site do Dreamweaver
- Ativar as Design Notes para sites do Dreamweaver
- Impedir possível ataque ao Gatekeeper
- Layout e design
- CSS
- Noções sobre as folhas de estilos em cascata
- Aplicar layout às páginas usando o CSS Designer
- Usar pré-processadores de CSS no Dreamweaver
- Como definir preferências de estilo CSS no Dreamweaver
- Mover regras de CSS no Dreamweaver
- Converter CSS inline em uma regra de CSS no Dreamweaver
- Trabalhar com tags div
- Aplicação de degradês ao fundo
- Criar e editar efeitos de transição do CSS3 no Dreamweaver
- Formatar código
- Conteúdo e ativos de página
- Definir propriedades da página
- Configurar propriedades de cabeçalho e propriedades de link de CSS
- Trabalhar com texto
- Localizar e substituir texto, tags e atributos
- Painel DOM
- Editar na Visualização dinâmica
- Codificar documentos do Dreamweaver
- Selecionar e exibir os elementos na janela Documento
- Definir propriedades de texto no Inspetor de propriedades
- Verificar ortografia de uma página Web
- Usar regras horizontais no Dreamweaver
- Adicionar e modificar combinações de fontes no Dreamweaver
- Trabalhar com ativos
- Inserir e atualizar datas no Dreamweaver
- Criar e gerenciar ativos favoritos no Dreamweaver
- Inserir e editar imagens no Dreamweaver
- Adicionar objetos de mídia
- Adição de vídeos no Dreamweaver
- Inserir vídeo HTML5
- Inserir arquivos SWF
- Adicionar efeitos de áudio
- Inserir áudio HTML5 no Dreamweaver
- Trabalhar com itens da biblioteca
- Usar texto em árabe e hebraico no Dreamweaver
- Vinculação e navegação
- Efeitos e widgets do jQuery
- Programar sites
- Sobre codificação no Dreamweaver
- Ambiente de codificação no Dreamweaver
- Definir preferências de codificação
- Personalizar codificação por cores
- Escrever e editar código
- Dicas de código e preenchimento de código
- Recolher e expandir código
- Reutilizar código com snippets
- Linting de código
- Otimizar código
- Editar código na Visualização de design
- Trabalhar com conteúdo do cabeçalho das páginas
- Inserir inclusões de servidor no Dreamweaver
- Usar bibliotecas de tags no Dreamweaver
- Importar tags personalizadas para o Dreamweaver
- Usar comportamentos JavaScript (instruções gerais)
- Aplicar comportamentos internos do JavaScript
- Sobre XML e XSLT
- Executar transformações XSL do servidor no Dreamweaver
- Executar transformações XSL do cliente no Dreamweaver
- Adicionar entidades de caracteres para XSLT no Dreamweaver
- Formatar código
- Fluxos de trabalho entre produtos
- Instalar e usar extensões no Dreamweaver
- Atualizações dentro do aplicativo no Dreamweaver
- Inserir documentos do Microsoft Office no Dreamweaver (somente Windows)
- Trabalho com o Fireworks e o Dreamweaver
- Editar conteúdo em sites do Dreamweaver usando o Contribute
- Integração do Business Catalyst ao Dreamweaver
- Criar campanhas de email personalizadas
- Modelos
- Sobre os modelos do Dreamweaver
- Reconhecimento de modelos e documentos baseados em modelo
- Criar um modelo do Dreamweaver
- Criar regiões editáveis nos modelos
- Criar regiões e tabelas repetitivas no Dreamweaver
- Usar regiões opcionais em modelos
- Definir atributos de tag editáveis no Dreamweaver
- Como criar modelos aninhados no Dreamweaver
- Editar, atualizar e excluir modelos
- Exportar e importar conteúdo xml no Dreamweaver
- Aplicar ou remover um modelo em um documento
- Editar conteúdo em modelos do Dreamweaver
- Regras de sintaxe para tags de modelo no Dreamweaver
- Definir preferências de realce para regiões de modelo
- Vantagens de usar modelos no Dreamweaver
- Dispositivo móvel e multitela
- Sites dinâmicos, páginas e formulários Web
- Noções sobre aplicativos Web
- Configurar o computador para desenvolvimento de aplicativos
- Solucionar problemas de conexões de banco de dados
- Remover scripts de conexão no Dreamweaver
- Criar páginas dinâmicas
- Visão geral das fontes de conteúdo dinâmico
- Definir origens de conteúdo dinâmico
- Adicionar conteúdo dinâmico a páginas
- Alterar conteúdo dinâmico no Dreamweaver
- Exibir registros de banco de dados
- Fornecer e solucionar problemas de live data no Dreamweaver
- Adicionar comportamentos personalizados de servidor no Dreamweaver
- Criar formulários usando o Dreamweaver
- Usar formulários para reunir informações de usuários
- Criar e ativar formulários do ColdFusion no Dreamweaver
- Criar formulários Web
- Suporte aprimorado a HTML5 para elementos de formulário
- Desenvolver um formulário usando o Dreamweaver
- Criação visual de aplicativos
- Criar páginas mestre e detalhadas no Dreamweaver
- Criar páginas de pesquisa e de resultados
- Criar uma página de inserção de registro
- Criar uma página de registro de atualização no Dreamweaver
- Criar páginas de exclusão de registro no Dreamweaver
- Usar comandos ASP para modificar um banco de dados no Dreamweaver
- Criar uma página de registro
- Criar uma página de logon
- Criar uma página que apenas usuários autorizados podem acessar
- Proteger pastas no ColdFusion usando o Dreamweaver
- Usar componentes do ColdFusion no Dreamweaver
- Testar, visualizar e publicar sites
- Solução de problemas
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).
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:
- Células
- Linhas
- 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.
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.
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.
-
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.
-
Defina os atributos da caixa de diálogo Tabela e clique em OK para criar a 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.
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
-
Selecione Arquivo > Importar > Importar dados tabulares.
-
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
-
Coloque o ponto de inserção em qualquer célula da tabela.
-
Selecione Arquivo > Exportar > Tabela.
-
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.)
-
Clique em Exportar.
-
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.
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
-
Posicione o ponteiro para a borda esquerda de uma linha ou a borda superior de uma coluna.
-
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.
Seleção de uma única coluna
-
Clique na coluna.
-
Clique no menu de cabeçalho de coluna e escolha Selecionar coluna.
Seleção de uma única célula
-
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
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.
Seleção de células não adjacentes
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
-
Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh).
-
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.
-
Selecione uma tabela.
-
Altere propriedades no Inspetor de propriedades (Janela > Propriedades), conforme desejar.
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.
-
Selecione a coluna ou linha.
-
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.
-
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.
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
-
Selecione uma tabela, célula, linha ou coluna.
-
No Inspetor de propriedades (Janela > Propriedades), clique na seta de expansão no canto inferior direito e altere as propriedades quando necessário.
-
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
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.
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
-
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.
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
-
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.
Alteração visual da altura de uma linha
Torne as larguras de coluna no código consistentes com as larguras visuais
-
Clique em uma célula.
-
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
-
Selecione a tabela.
-
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
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.
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
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
-
Clique em uma célula.
-
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
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.
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
-
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.
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.
-
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
-
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.
-
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
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
-
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.
Na ilustração a seguir, a seleção não é um retângulo. Portanto, as células não podem ser recortadas ou copiadas.
-
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
-
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.
-
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
-
Selecione uma ou mais células.Observação:
assegure que a seleção não é inteiramente constituída de linhas ou colunas completas.
-
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
-
Selecione a linha ou coluna.
-
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.
-
Clique em uma célula da tabela existente.
-
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.
-
Selecione a tabela ou clique em qualquer célula.
-
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.