Exibindo texto em colunas pode ajudar a melhorar a legibilidade do seu site. Uma maneira de formatar o texto para que ele exibe em colunas é usar uma tabela HTML. tabelas HTML suportar qualquer número de colunas. Você pode gerenciar a largura e alinhamento de cada coluna usando grupos de colunas. Vejamos um exemplo simples de uma página da Web que exibe as pontuações dos jogos.
Coisas que você precisa
- Bloco de notas ou outro editor de texto
- Internet Explorer ou outro navegador web
Criar uma página HTML
Clique no "Começar" botão. Escolha o "Todos os programas" item do menu. Escolha o "Acessórios" item do menu. Escolha o "Bloco de anotações" item do menu.
Digite o seguinte no documento:
pontuações de jogos Este código HTML define a estrutura básica de uma página HTML e define o texto na barra de título do navegador para "Pontuações do jogo." Deixe o
elemento vazio para agora. Isso é onde você irá adicionar o conteúdo da página.Clique no "Arquivo" item de menu e escolha "Salvar." Se seu "documentos" pasta não estiver selecionada, selecione-o. Escolher "Todos os arquivos" de "Salvar como tipo" drop-down list. Digitar "columns.html" no "Nome do arquivo" campo e clique no "Salvar" botão.
Clique no "Começar" botão e escolha "documentos" Para abrir a janela Explorer. expanda o "documentos" ícone na esquerda; painel do lado. Escolha o "Meus documentos" ícone da pasta.
Duplo click "columns.html" e verificar se um documento com o título "pontuações de jogos" abre no seu browser. Mantenha a janela do navegador aberta.
Adicionar uma tabela para a página da Web
Traga o bloco de notas para o primeiro plano. Adicione o seguinte HTML dentro do
elemento:Primeiro nome Último nome Round 1 2 ª rodada Round 3 Você usa um
elemento para criar uma tabela. A tabela inclui colunas e linhas. Você usa o
(Linha de tabela) elemento para definir as linhas. Em cada linha, você define colunas que contêm conteúdo. Você usa um (Cabeçalho da tabela) elemento para adicionar uma coluna que exibe o texto usando uma fonte em negrito. Aqui você tenha criado uma linha que tem cinco colunas de texto em negrito. Clique no "Arquivo" botão e escolha "Salvar" para salvar as alterações.
Trazer a janela do navegador para o primeiro plano. direita; clique na página vazia e escolha "Refrescar." Seus títulos devem ser exibidos.
Traga o bloco de notas para o primeiro plano. Adicione o seguinte código na linha diretamente abaixo da tag:
João ferreiro 80 75 165 Maria Dodd 92 140 132 o
(Dados da tabela) elemento é usado para definir uma coluna que exibe o texto usando uma fonte normal. Aqui você criou duas linhas que têm cinco colunas cada. Clique no "Arquivo" botão e escolha "Salvar" para salvar as alterações.
Trazer a janela do navegador para o primeiro plano. direita; clique na página vazia e escolha "Refrescar." Sua tabela deve ser exibida.
Alterar largura da coluna e Alinhamento
Traga o bloco de notas para o primeiro plano. Modificar o código HTML, adicionando o seguinte código imediatamente após a
tag:
o
elemento é utilizado para definir uma largura que é aplicável a múltiplas colunas. Você usar o atributo span para definir o número de colunas incluídos no grupo. É usar o atributo largura para definir a largura da coluna em pixels. Clique no "Arquivo" botão e escolha "Salvar" para salvar as alterações.
Trazer a janela do navegador para o primeiro plano. direita; clique na página vazia e escolha "Refrescar." Sua tabela deve ser exibida. Observe que os cabeçalhos da tabela não estão alinhadas com os dados da tabela.
Alterar o código para que o
bloco parecido com este: o
elemento é usado para definir a formatação que se aplica a uma ou mais colunas. Neste caso, você está definindo o alinhamento da esquerda, a maioria das duas colunas "centro" alinhamento. Clique no "Arquivo" botão e escolha "Salvar" para salvar as alterações.
Trazer a janela do navegador para o primeiro plano. direita; clique na página vazia e escolha "Refrescar." Sua tabela deve ser exibida. Observe que os dados da tabela nas duas primeiras colunas é centrado abaixo do título.
Alterar o código para que o
bloco parecido com este: O segundo
elemento se aplica aos próximos três colunas na tabela. Você está definindo a largura dessas colunas de 50 pixels e o alinhamento do texto dentro dessas colunas à direita; justificada. Clique no "Arquivo" botão e escolha "Salvar" para salvar as alterações.
Trazer a janela do navegador para o primeiro plano. direita; clique na página vazia e escolha "Refrescar." Sua tabela deve ser exibida. Observe que três últimas colunas são mais estreitos e os dados dentro deles é certo; justificada com os cabeçalhos das colunas.
dicas & avisos
- Se você optar por usar um editor de texto diferente do bloco de notas, seus passos para criar e salvar um documento será diferente.
- Se você optar por usar um navegador diferente do Internet Explorer, seus passos para atualizar a página web pode ser diferente.
- Ao escrever código HTML, certifique-se cada tag de abertura tem uma marca de fechamento correspondente.
Um tutorial html para adicionar navegação à esquerda
Como atualizar o texto em um arquivo html
Como fazer uma caixa com o texto dentro html
Como criar uma barra de rolagem em uma tabela
Como adicionar um relógio para uma página web
Como fazer com que a tabela de fundo da célula opacidade
Como alinhar o texto em uma tabela HTML
Como alterar o tamanho da fonte em uma tabela