Como construir tabelas em HTML5

Às vezes sua página web inclui dados melhores apresentados em uma tabela. Você pode usar o sistema de mesa com todos os recursos do HTML5 para criar tabelas como o que neste exemplo:

image0.jpg

A estrutura básica de uma mesa em formato HTML é razoavelmente fácil de entender- verificar o código que criou a tabela no exemplo:

basicTable.html
A tabela básico
Superheroes HTML
HeróiPoderNêmesis
o XMLatorcumprimento de normasMenino Código Sloppy
Capitão CSSSuperlayoutSenhor Reprovado
navegador MulherMegacompatibilityMonstro código feio

Examinando o código mostra que uma mesa é simplesmente um conjunto de tags cuidadosamente aninhadas. O processo para a construção de uma tabela não é difícil, mas requer um pouco de reflexão.

  1. Planeje sua mesa para que você sabe quantas colunas você quer, e que linhas ou colunas será manchetes.

    Esboçando sua mesa no papel primeiro é uma boa ideia, especialmente se ele está em tudo complicado.

  2. Comece a tabela com a tag.

    O par encerra a tabela inteira.

  3. Criar uma linha da tabela com o par.

    Uma tabela é apenas uma série de linhas. Você precisa do par para incluir cada linha de dados.

  4. Significam títulos com.

    Muitas vezes, a linha superior (e talvez a esquerda; coluna mais) contêm títulos. Utilizar o par para significar texto que deve ser tratado como uma célula de cabeçalho. Por padrão, essas células são geralmente mais ousados ​​e centrado, mas isso pode ser alterado com CSS.

  5. Especifique células de dados comuns, com o par.

  6. Manter o número de células consistentes em linhas.

    Como você se tornar mais familiarizado com tabelas HTML5, você pode encontrar maneiras de estender uma célula em várias linhas ou colunas.

  7. Adicionar CSS conforme necessário.

    Tabelas têm um formato básico, que você pode mudar com CSS - para adicionar bordas, por exemplo.

Embora os usuários HTML5 têm desenvolvido maneiras de usar tabelas para fins de layout, CSS fornece todas as técnicas de layout de página que você precisa, então use tabelas HTML5 para os fins previstos: apresentação de dados tabulares.

Semelhante

menu