Como construir e definir uma tabela básica para páginas baseadas na Web HTML5 e CSS3 - Dummies

Às vezes, você encontrará dados que se encaixam melhor em um formato tabular em vez de uma lista. O HTML5 suporta várias tags de tabela para esse tipo de trabalho. Aqui, você pode ver uma tabela muito básica.

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

Compare a saída com o código para BasicTable. html que cria:

basicTable. html

Uma tabela básica

HTML Super Heroes


 Hero 
 Power 
 Nemesis 


 O HTMLator 
 Cumprimento de padrões 
 Sloppy Code Boy 


 Captain CSS 
 Super -layout 
 Lord Deprecated 


 Browser Woman 
 Mega-Compatibility 
 Ugly Code Monster

Hero	Power	Nemesis
O HTMLator	Cumprimento de padrões	Sloppy Code Boy
Captain CSS	Super -layout	Lord Deprecated
Browser Woman	Mega-Compatibility	Ugly Code Monster

A tabela HTML é definida com o par. Faz muito sentido recuar e espaço seu código com cuidado para que você possa ver a estrutura da tabela no código. Apenas olhando o código, você pode adivinhar que a tabela consiste em 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, preencha. Em HTML, você define a tabela linha por linha e os elementos em cada linha determinam o número de colunas. Cabe a você garantir que cada linha tenha o mesmo número de elementos.

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

Essa tag cria uma tabela e especifica que 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 da borda para ou para um número maior. O maior número faz uma fronteira maior.

Definir uma borda de tabela é uma boa ideia, porque você não pode contar com navegadores para ter o mesmo padrão. Além disso, o valor da borda está sempre entre aspas. Com o CSS, você pode adicionar bordas mais complexas e interessantes do que este atributo simples permite.

Como adicionar sua primeira linha

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

No interior do conjunto, você precisa de alguns dados de tabela. A primeira linha geralmente consiste em cabeçalhos de tabela. Estas células especiais são formatadas de forma diferente para indicar que elas são etiquetas, e não dados.

Os cabeçalhos das tabelas têm alguma formatação padrão para ajudá-lo a lembrar que são cabeçalhos, mas você pode mudar a maneira como eles se parecem. Você pode alterar a aparência do cabeçalho da tabela em todos os tipos de ótimas maneiras. Defina o cabeçalho da tabela, então, quando você descobrir a formatação e decidir fazer todos os cabeçalhos da sua tabela, você saberá onde no código HTML são todos os cabeçalhos das tabelas.

Descarte os cabeçalhos dentro do conjunto. Se a sua tabela contiver três colunas, sua primeira linha pode começar assim:

Coloque o texto desejado nos cabeçalhos da tabela entre os elementos e. O conteúdo aparece na ordem em que são definidos.

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

Como fazer suas linhas de dados

O próximo passo é criar outra linha. As linhas de dados são exatamente 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 possui 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 tabelas são uma boa razão para usar os editores WYSIWYG (o que você vê é o que você obtém) porque eles acham difícil criar tabelas no modo de texto. Você precisa planejar um pouco, mas é realmente bastante rápido e fácil de construir uma tabela HTML sem ferramentas gráficas se você seguir este plano:

Planejar com antecedência.

Saiba quantas linhas e colunas estarão na tabela. Esboçar no papel primeiro pode ser útil. Alterar o número de linhas mais tarde é fácil, mas alterar o número de colunas pode ser uma dor real depois de algum código ter sido escrito.
Crie os títulos.

Se você começar com uma tabela de cabeçalho padrão, comece criando a linha de cabeçalho. Salve, verifique e valide. Você não quer que os erros se multipliquem quando você adiciona mais complexidade. Esta linha de cabeçalho indica quantas colunas você precisará.
Crie uma linha de amostra vazia.

Faça uma linha de amostra com o número correto de elementos com um par por linha. Crie um conjunto e use copiar e colar para copiar esta célula de dados quantas vezes você precisar. Verifique se o número de pares é igual ao número de conjuntos na linha de cabeçalho.
Copie e cole a linha vazia para criar quantas linhas você precisa.
Salvar, exibir e validar.

Certifique-se de que tudo esteja certo e valide corretamente antes de colocar muito esforço na adição de dados.
Preencha a tabela com os dados que você precisa.

Ir linha por linha, adicionando os dados entre os pares.
Teste e valide novamente para se certificar de que você não acidentalmente quebrou algo.