Você pode adicionar tabelas às suas páginas da Web para ajudar a estruturar texto, imagens ou objetos em uma página. Você pode fazer isso para mostrar dados em uma tabela, uma lista de preços, uma comparação de produtos, uma lista de termos e definições e assim por diante. Você também pode fazer isso para posicionar o conteúdo, por exemplo, mostrar o funcionário Biographies, as informações de contato ou o horário comercial. Este artigo explica como posicionar ou estruturar o conteúdo em uma página usando o editor de tabelas em seu site e outros métodos como HTML e CSS.
Neste artigo
Inserir uma tabela
Para inserir uma tabela em uma página, muito em sua conta do Microsoft 365, abra o editor do site e siga estas etapas.
-
Navegue até a página da Web à qual você deseja adicionar a tabela.
-
Clique na guia página .
-
Clique no botão Editar .
-
Clique na página à qual você deseja adicionar a tabela.
-
Clicar na guia Inserir.
-
Clique no botão tabela .
-
Há duas maneiras de adicionar a tabela:
-
Clique na seta para expandir as linhas de grade da tabela, passe o ponteiro do mouse sobre as linhas de grade da tabela e, em seguida, clique no número desejado de células da tabela.
-
Ou clique no botão Inserir Tabela , digite o número de colunas e linhas desejadas e clique em OK.
-
-
A tabela é adicionada à sua página da Web, onde você pode começar a adicionar conteúdo a ele ou personalizá-la, tarefas descritas a seguir.
Personalizar uma tabela
Depois de inserir uma tabela na sua página da Web, você pode começar a personalizá-la. Você pode adicionar e excluir linhas ou colunas, mesclar e dividir linhas ou colunas, redimensionar a tabela, alterar a aparência e assim por diante.
Adicionar linhas e colunas
Você pode adicionar linhas e colunas de células em uma tabela para permitir conteúdo mais estruturado na página. Você pode adicioná-los acima, abaixo, à esquerda ou à direita da célula onde o cursor está localizado. Apenas linhas ou colunas inteiras podem ser adicionadas de uma só vez, em vez de células individuais.
Para adicionar linhas ou colunas em uma tabela
-
Edite a página da Web que contém a tabela.
-
Coloque o cursor na célula da tabela onde você deseja adicionar a linha ou coluna.
-
Clique na guia layout da tabela .
-
Escolha uma destas opções:
-
Inserir acima para adicionar uma linha acima da célula selecionada.
-
Inserir abaixo para adicionar uma linha abaixo da célula selecionada.
-
Inserir à esquerda para adicionar uma coluna à esquerda da célula selecionada.
-
Inserir à direita para adicionar uma coluna à direita da célula selecionada.
-
Dica: Se não gostar do resultado das novas células, você poderá desfazer a ação digitando Ctrl + Z ou clicando na guia Formatar texto e escolhendo desfazer.
Você verá as alterações aplicadas imediatamente à sua tabela. Se você tinha texto ou imagens nas células, eles serão colocados juntos na nova célula mesclada.
Mesclar células
Ao mesclar células, você combina duas ou mais células para permitir mais espaço para texto, imagens e outros objetos na tabela. Você pode mesclar células acima ou abaixo umas às outras e à esquerda ou à direita umas das outras, mas só pode mesclar células individuais e não linhas ou colunas inteiras.
Para mesclar células em uma tabela
-
Edite a página da Web que contém a tabela.
-
Coloque o cursor na célula da tabela que você deseja mesclar.
-
Clique na guia layout da tabela .
-
Clique em mesclar células e escolha uma das seguintes opções:
-
Mesclar acima para mesclar com a célula acima.
-
Mesclar abaixo para mesclar com a célula abaixo.
-
Mesclar à esquerda para mesclar com a célula à esquerda.
-
Mesclar à direita para mesclar com a célula à direita.
-
Dica: Se não gostar do resultado das células mescladas, você poderá desfazer a ação digitando Ctrl + Z ou clicando na guia Formatar texto e escolhendo desfazer.
Você verá as alterações aplicadas imediatamente à sua tabela. Se você tinha texto ou imagens nas células, eles serão colocados juntos na nova célula mesclada.
Dividir células
Ao dividir células, você transforma uma única célula em duas células para aplicar mais estrutura ao conteúdo da tabela. Você pode dividir as células horizontal ou verticalmente, mas só pode dividir células individuais e não linhas ou colunas inteiras.
Para dividir células em uma tabela
-
Edite a página da Web que contém a tabela.
-
Coloque o cursor na célula da tabela que você deseja dividir.
-
Clique na guia layout da tabela .
-
Clique em dividir células e escolha uma das seguintes opções:
-
Dividir horizontal para dividir a célula em duas células, lado a lado.
-
Dividir em vertical para dividir a célula em duas células, uma sobre a outra.
-
Dica: Se não gostar do resultado das células divididas, você poderá desfazer a ação digitando Ctrl + Z ou clicando na guia Formatar texto e escolhendo desfazer.
Você verá as alterações aplicadas imediatamente à sua tabela. Se você tinha texto ou imagens na célula, eles permanecerão na célula original e não no novo.
Redimensionar a tabela
Você pode alterar o tamanho de uma tabela, bem como as linhas e colunas individuais que compõem a tabela. Você pode fazer isso para colocar mais conteúdo de página em uma célula de tabela ou liberar mais espaço no restante da página para outro conteúdo. Você pode especificar o tamanho da tabela ou da célula em pixels (px) ou como uma porcentagem (%). Somente uma linha, coluna ou tabela inteira pode ser redimensionada de uma vez em vez de células individuais.
Para alterar o tamanho da tabela
-
Edite a página da Web que contém a tabela.
-
Coloque o cursor dentro da tabela que você deseja redimensionar.
-
Clique na guia layout da tabela .
-
Ao lado de largura da tabela, insira um valor de porcentagem ou de pixel. Um valor de 100% ou 700px ou mais usa a área de conteúdo da página inteira.
-
Ao lado de altura da tabela, insira um valor de porcentagem ou de pixel. Tenha em mente que o número de parágrafos determina também a altura da tabela.
-
Ao lado de largura da coluna, insira um valor de porcentagem ou de pixel. Um valor de 100% ou 700px ou mais usa a área de conteúdo da página inteira.
-
Ao lado de altura da coluna, insira um valor de porcentagem ou de pixel. Lembre-se de que o número de parágrafos determina também a altura da tabela da célula.
Dica: Se não gostar do resultado da tabela ou das células redimensionadas, você poderá desfazer a ação digitando Ctrl + Z ou clicando na guia Formatar texto e escolhendo desfazer.
Você verá as alterações aplicadas imediatamente à sua tabela. Se você tinha texto ou imagens nas células, eles permanecerão na célula redimensionada.
Alterar o estilo da tabela
Você pode personalizar a aparência de uma tabela alterando seu estilo, designando uma linha de cabeçalho ou rodapé e aplicando formatação especial à primeira e última linha ou coluna da tabela.
Para alterar o estilo da tabela
-
Edite a página da Web que contém a tabela.
-
Coloque o cursor na tabela que você deseja personalizar.
-
Clique na guia site .
-
Escolha uma das opções de estilo de tabela a seguir. (Você pode não ver diferenças de formatação se o estilo de tabela "Light" ou "Clear" for aplicado atualmente à sua tabela.)
-
Linha de cabeçalho aplica uma formatação especial à primeira linha da tabela.
-
A linha de rodapé aplica uma formatação especial à última linha da tabela.
-
A primeira coluna aplica uma formatação especial à primeira coluna da tabela.
-
Última coluna aplica uma formatação especial à última coluna da tabela.
-
-
Escolha um estilo de tabela. Cada estilo altera a cor da borda, a cor da célula e a cor do cabeçalho ou rodapé. (Alguns estilos só alteram o cabeçalho e rodapé se você tiver selecionado essa opção acima.)
-
Estilo de tabela padrão – claro: bordas de grade finas, claras, cinza.
-
Estilo de tabela 1 – claro: não há bordas visíveis.
-
Estilo de tabela 2 – em tiras leves: linhas horizontais cinza-claro, todas as outras linhas sombreadas cinza.
-
Estilo de tabela 3 – dois tons médios: cabeçalho azul, todas as outras linhas estão em azul-claro em cinza.
-
Estilo de tabela 4 – linhas leves: cabeçalho cinza, linhas azuis azuis horizontais.
-
Estilo de tabela 5 – grade: bordas de grade cinza, a cada linha cinza sombreada.
-
Estilo de tabela 6 – ênfase 1: bordas azuis de grade, cabeçalho azul.
-
Estilo de tabela 7 – ênfase 2; Bordas de grade azul clara, cabeçalho azul claro.
-
Estilo de tabela 8 – ênfase 3: bordas de grade verdes, cabeçalho verde.
-
Estilo de tabela 9 – ênfase 4: bordas de grade oliva, cabeçalho oliva.
-
Estilo de tabela 10 – ênfase 5: bordas de grade vermelhas, cabeçalho vermelho.
-
Estilo de tabela 11 – ênfase 6: bordas da grade roxa, cabeçalho roxo.
-
-
Clique em Mostrar linhas de grade para mostrar ou ocultar linhas de grade da tabela. Isso é simplesmente um auxílio visual caso você tenha aplicado o estilo de limpar tabela ou bordas de outra forma ocultas, mas ainda precisa ver a tabela para trabalhar com ela.
Você verá as alterações aplicadas imediatamente à sua tabela. Se você tinha texto ou imagens na célula, eles permanecerão na célula original com o novo estilo aplicado.
Adicionar texto ou objetos à tabela
Quando tiver terminado de personalizar a tabela, você estará pronto para começar a adicionar conteúdo à tabela, como texto, elementos gráficos e outros objetos, conforme descrito aqui.
Para adicionar texto ou objetos à tabela
-
Edite a página da Web que contém a tabela.
-
Coloque o cursor dentro da célula da tabela onde você deseja adicionar conteúdo.
-
Para adicionar texto, basta começar a digitar o texto ou colar o texto na célula da tabela. Para alterar a face de tipos ou o tamanho da fonte, clique na guia Formatar texto e escolha as configurações de fonte a partir dela.
-
Para inserir uma imagem, um vídeo ou outro objeto, clique na guia Inserir e insira o objeto como você faria em qualquer uma de suas páginas da Web. (Se a imagem ou o vídeo for maior que a célula da tabela, a célula da tabela será redimensionada automaticamente para se ajustar à imagem ou ao vídeo.)
-
Para remover o texto, as imagens ou os objetos, selecione-os na célula e pressione delete no teclado.
Excluir uma célula, linha, coluna ou tabela
Você pode excluir células individuais, linhas, colunas ou a tabela inteira, se necessário.
Para excluir uma célula, linha, coluna ou tabela
-
Edite a página da Web que contém a tabela.
-
Coloque o cursor dentro da célula, da linha, da coluna ou da tabela que você deseja excluir.
-
Clique na guia layout da tabela .
-
Clique em excluir e escolha uma das seguintes opções:
-
Excluir célula para excluir a célula individual onde o cursor está localizado.
-
Excluir coluna para excluir a coluna onde o cursor está localizado.
-
Excluir linha para excluir a linha onde o cursor está localizado.
-
Excluir tabela para excluir a tabela inteira onde o cursor está localizado.
-
Continuar Personalizando a tabela ou o conteúdo na página.
Criar sua própria tabela, conteúdo HTML ou CSS
Se você quiser criar uma tabela personalizada ou usar seu próprio código HTML com CSS para posicionar o conteúdo em uma página, é possível fazer isso criando o código HTML em um editor de páginas da Web, como o Expression Web ou o Dreamweaver. Faça suas alterações no editor e, em seguida, copie e cole o código da página da Web em seu site público seguindo estas etapas.
Adicionar uma tabela personalizada ou um código de página da Web ao seu site da Web
-
Edite a página da Web à qual você deseja adicionar uma tabela ou conteúdo HTML.
-
Clique na guia Formatar texto e, em seguida, clique em Editar fonte no grupo marcação.
-
Na janela código-fonte HTML, digite ou cole o HTML personalizado ou modifique o conteúdo de origem existente, como a aplicação de tags DIV. (A janela de código-fonte HTML também é uma maneira útil de copiar uma tabela de uma parte do seu site para outra, o que é mais rápido do que recriar e personalizar uma tabela.)
-
Clique em OK e, em seguida, salve a página.
-
Para personalizar ainda mais o HTML (por exemplo, usando camadas CSS), clique na guia site e, em seguida, clique em Editar folha de estilos.
-
Na janela Editar folha de estilos, adicione sua CSS personalizada e, em seguida, clique em salvar.
Dica: Para personalizar ainda mais o layout e o posicionamento do conteúdo em uma página, você pode considerar a criação de um layout de página personalizado usando o Gerenciador de design.
