Como construir tabelas em html5

Video: Parte 48 - Como criar uma tabela no 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 de HTML5 para criar tabelas como o que neste exemplo:

Video: HTML5 - Criando Tabelas - Notepad++

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

Video: Curso HTML 5 - Aula 7 - Criar Tabela

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 idéia, 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. Significar títulos com .

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

  5. Especificar as 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.

Video: Curso Básico PHP - Manipulando Variáveis dentro de Tabelas #04

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.


Publicações relacionadas