As tabelas de dados listam várias informações em colunas e linhas para facilitar a leitura. Os dados geralmente são parcialmente numéricos com rótulos de texto. Um exemplo é uma tabela de dados que mostra quantas calorias alguém ingere por dia. Fazer uma tabela de dados online pode ser feito com HTML ou a linguagem de navegador CSS mais complexa. A tabela final se parece com uma tabela de dados criada em uma planilha ou no papel. A única diferença é a codificação em segundo plano, que não é vista a menos que se olhe o código-fonte. A codificação pode ser criada por editores de HTML, texto ou outras formas. Existem muitos sites online que oferecem a capacidade de inserir dados, definir alguns atributos e criar toda a codificação da tabela para você. As tabelas de dados online geralmente são usadas como parte de uma página da web. As tabelas de dados costumam ser usadas para criar listas de itens com categorias, como itens à venda. Algumas páginas da Web os usam para mostrar estatísticas e informações. Embora as tabelas de dados possam ser usadas offline para impressão ou em relatórios, geralmente é melhor usar software de planilha, como o Microsoft Office Excel, que oferece muito mais recursos para trabalhar com dados. Este guia mostra como criar uma tabela de dados HTML com o Bloco de notas.
Abra um editor de HTML ou apenas um documento de texto comum do Bloco de notas para inserir o código HTML. O Bloco de notas funciona bem se você estiver acostumado com a codificação HTML. Os editores de HTML tornam as tarefas repetitivas mais rápidas, mas alguns, como o Frontpage, adicionam codificação extra desnecessária que pode tornar as páginas da Web mais lentas. A melhor coisa a fazer é codificar com um editor de HTML primeiro, depois voltar e editar o código manualmente para limpá-lo.
Decida os atributos da tabela para a borda, largura, cor de fundo e cores da fonte. Você precisa levar em consideração o layout, a largura, as cores e outros atributos da página da Web para tornar a tabela facilmente legível. Você também precisa decidir quantas linhas e colunas são necessárias para os dados. Comece definindo os atributos da tabela. (Nosso exemplo mostra o número de calorias ingeridas no almoço e no jantar em cada dia da semana. Precisamos de três colunas (Dia, Almoço e Jantar) e sete linhas (duas para rótulos e uma para cada dia da semana).
Adicione uma borda ao redor da tabela e das células de dados. As bordas separam os dados em células para facilitar a visualização. É medido em pixels e pode receber um valor 0 para não usá-los. Geralmente, uma borda de um ou dois pixels é adequada. A marca para a fronteira é
bgcolor = border = "CHOSEN_BORDER_WIDTH"
A cor da borda pode ser alterada com a tag
bordercolor = "CHOSEN_COLOR"
que utiliza os termos de cores básicas, como vermelho ou preto ou códigos de cores hexadecimais de seis dígitos. Os hexadecimais oferecem mais cores. Nosso exemplo usa border = "2" e bordercolor = "black".
Determine a largura de toda a mesa. É medido em pixels ou porcentagem do tamanho da tela. Os pixels são definitivos e as porcentagens permitem que a mesa se ajuste a diferentes tamanhos de tela. Tente avaliar a largura com base na largura dos dados nas linhas. Se mais tarde você descobrir que a mesa é muito fina ou larga, ela pode ser alterada. Nosso exemplo usa width = "175".
Defina a cor de fundo das células de dados. É diferente da cor de fundo da página, que pode oferecer um bom contraste. A tag é
bgcolor = "CHOSEN_COLOR"
assim como a cor da borda. Nosso exemplo usa bgcolor = "white".
Defina a cor da fonte do texto nas células. Certifique-se de que a cor contrasta bem com o fundo, para que seja facilmente legível. Luz no escuro ou escuro na luz sempre funcionam melhor. A tag é
font = "CHOSEN_COLOR"
Nosso exemplo é font = "black", que contrasta bem com o fundo branco.
Escreva as tags completas da tabela entre uma seta para a esquerda e direita com um espaço entre os atributos da tag e começando com a tag da tabela na frente. A ordem das tags não importa, contanto que "mesa" esteja à frente.
Determine as larguras das colunas. A largura de cada coluna depende da largura de toda a tabela. Pegue a largura da tabela e divida-a pelo número de células para obter colunas de tamanho uniforme. Se necessário, ajuste as larguras das colunas, mas o total não pode exceder a largura da tabela. Quando a largura de uma célula muda, as outras células precisam ser ajustadas para totalizar a largura da tabela. (Nosso exemplo tem uma largura de 175 e três colunas por linha, portanto, uma divisão par de cerca de 59. A divisão real é 70, 60, 40.)
Comece adicionando seus dados. Primeiro, comece uma nova linha e adicione uma linha da tabela com o código
Insira seus dados para a célula; usando este código para representar células em branco:
Feche a célula com a tag. A tag bordercolor é usada para especificar a cor da borda da célula, se desejado. Se for deixado de fora, a cor de borda da tabela padrão será usada. O código da primeira célula do nosso exemplo é:
Repita a criação de células de dados da tabela, cada uma em uma nova linha, até que todas as células da linha estejam completas. Em seguida, termine a linha com a tag. Comece a próxima linha com o mesmo processo, começando com o
Feche o código da tabela com com marcação. Nosso código da tabela final, se encerrado após duas linhas de dados, está abaixo.
Coisas que você precisa
- Editor de HTML ou bloco de notas
- Dados