Às vezes, você encontrará dados que melhor se encaixa em um formato tabular, em vez de uma lista. HTML5 suporta várias marcas de tabela para este tipo de trabalho. Aqui, você pode ver uma tabela muito básico.

Às vezes, a melhor maneira de mostrar os dados de uma forma significativa é a de organizá-lo em uma tabela. HTML define uma tabela com a tag. A tabela contém um número de linhas da tabela (definida com a etiqueta). Cada linha da tabela pode consistir de uma série de dados da tabela () ou cabeçalho da tabela () tags.

Compare o resultado com o código para basicTable.html que a cria:

A tabela básico
HTML Super Heroes
Herói
Poder
Nêmesis
o HTMLator
cumprimento de normas
Menino Código Sloppy
Capitão CSS
Super-disposição
Senhor Reprovado
navegador Mulher
Mega-Compatibilidade
Monstro código feio

A tabela HTML é definido com o par. Faz muito sentido para recuar e espaço seu código com cuidado para que você possa ver a estrutura da tabela no código. Só de olhar para o código, você pode adivinhar que a tabela é constituída por três linhas e cada linha é composta por três elementos.

Em um processador de texto, você geralmente cria uma tabela em branco, definindo o número de linhas e colunas, e, em seguida, preenchê-lo. Em HTML, você define a linha da tabela por linha, e os elementos em cada linha determinar o número de colunas. É até você para certificar-se de cada linha tem o mesmo número de elementos.

Por padrão (na maioria dos navegadores, pelo menos), as tabelas não mostram suas fronteiras. Se você quiser ver as fronteiras básicas de mesa, você pode ativar o atributo da tabela. (A atributo é um modificador especial que você pode anexar a algumas tags.)

Esta tag cria uma tabela e especifica que ela terá uma borda de tamanho. Se você deixar de fora o negócio, alguns navegadores exibem uma borda e outros não. Você pode definir o valor de fronteira ou a um número maior. O número maior faz com que uma borda maior.

A definição de um limite da tabela é uma boa idéia, porque você não pode contar com os navegadores para ter o mesmo padrão. Além disso, o valor de fronteira é sempre entre aspas. Com CSS você pode adicionar bordas mais complexos e interessantes do que este atributo simples permite.

Como adicionar a primeira linha

Depois de definir uma tabela, você precisa adicionar algumas linhas. Cada linha é indicada por um par.

Dentro do conjunto, você precisa de alguns dados da tabela. A primeira linha consiste frequentemente cabeçalhos da tabela. Essas células especiais são formatados de forma diferente para indicar que eles são rótulos, em vez de dados.

cabeçalhos da tabela têm alguma formatação padrão para ajudar a lembrar que eles são cabeçalhos, mas você pode mudar a forma como eles olham. Você pode alterar a aparência do cabeçalho da tabela em todos os tipos de grandes formas. Definir o cabeçalho da tabela por isso, quando você descobre formatação e decidir fazer todo o seu chartreuse tabela de cabeçalhos, você saberá onde no código HTML todos os cabeçalhos da tabela são.

Recuar seus cabeçalhos dentro do set. Se sua tabela contém três colunas, a primeira linha poderia começar assim:

Coloque o texto que deseja mostrado nos cabeçalhos da tabela entre os elementos e. O conteúdo aparecem na ordem em que está definido.

Os títulos não tem que estar na linha superior. Se você quiser posições à esquerda, basta colocar um par como o primeiro elemento de cada linha. Você pode ter posições na parte superior e à esquerda, se quiser. Na verdade, você pode ter posições em qualquer lugar, mas, geralmente, faz sentido colocar títulos apenas no topo ou à esquerda.

Como fazer suas linhas de dados

O próximo passo é criar outra linha. As linhas de dados são como a linha de cabeçalho, exceto que eles usam pares, em vez de pares, para conter os elementos de dados. Normalmente, uma tabela de três colunas tem linhas em branco que se parecem com isto:

Coloque os elementos de dados dentro dos segmentos e você está pronto para ir.

Como construir tabelas no editor de texto

Algumas pessoas pensam que as mesas são uma boa razão para usar WYSIWYG (o que você vê é o que você obtém) editores, porque acho que é difícil para criar tabelas no modo de texto. Você tem que planejar um pouco, mas é realmente muito rápida e fácil de construir uma tabela HTML sem ferramentas gráficas se você seguir este plano:

1. Planejar com antecedência.

   Saber quantas linhas e colunas estarão em cima da mesa. Desenhando no papel primeiro pode ser útil. Alterar o número de linhas mais tarde é fácil, mas mudando o número de colunas pode ser uma verdadeira dor após algum do código foi escrito.

2. Criar os títulos.

   Se você estiver indo para começar com uma tabela padrão cabeçalhos-on-top, começar por criar a linha de título. Salvar, verificar e validar. Você não quer que os erros se multiplicar quando você adiciona mais complexidade. Esta linha de título diz quantas colunas você vai precisar.

3. Criar uma linha vazia amostra.

   Fazer uma linha de amostra com o número correto de elementos com um par por linha. Criar um conjunto e usar copiar e colar para copiar este célula de dados quantas vezes você precisa. Certifique-se o número de pares igual ao número de conjuntos na linha de título.

4. Copie e cole o linha vazia para fazer tantas linhas quanto você precisa.

5. Salvar, visualizar e validar.

   Certifique-se de que tudo parece certo e valida corretamente antes de você colocar um grande esforço para adicionar dados.

6. Preencha a tabela com os dados que você precisa.

   Vá linha por linha, acrescentando os dados entre os pares.

7. Testar e validar novamente para certificar-se de que você não acidentalmente quebrar alguma coisa.