Tabelas em HTML5 - parte 2

Já vimos como criar uma tabela básica somente de texto sem estilos na parte 1 deste tutorial, embora no nível do código isso seja bom, no nível visual não nos mostra o poder organizacional que uma tabela pode fornecer aos nossos dados, Em nossos sites muitas vezes devemos classificar dados, elementos, informações em geral, para isso podemos usar uma tabela bem construída e representativa.
O elemento
O elemento º nos permite criar cabeçalhos para nossa tabela, a fim de identificar visualmente nossas colunas, bem como td é filho de tr. Seus atributos são: colspan, rowspan, escopo, cabeçalhos, os atributos obsoletos nesta especificação HTML5 são os seguintes: abbr, axis, align, width, char, charoff, valign, bgcolor, height e nowrap, scope, se olharmos em detalhes, este elemento funciona de forma muito semelhante a td, sua convenção CSS é a seguinte:

 th {display: table-cell; alinhamento vertical: herdar; intensidade da fonte: Negrito; alinhamento de texto: centro; } 

Agora vamos ver como usá-lo para construir uma tabela com um pouco mais de formatação do que tínhamos feito anteriormente:

 Exemplo 
 
 
Classificação
inhame
 
Cor
Tamanho
 

 
 
Favorito:
 
Maçãs
Verde
Médio
 

 
 
2º favorito:
 
Laranjas
laranja
Grande
 

 
 
3º favorito:
 
Romã
Uma espécie de vermelho-esverdeado
 
Varia de médio a grande
 

 

 

Como podemos ver neste exemplo, podemos colocar o elemento º dentro do tr, sua função é semelhante a td, apenas que é usado para gerar cabeçalhos, o código mostrado nos dá a seguinte tabela como resultado:

Nossa tabela começa a ficar muito melhor, porém ainda é muito básica, e as informações não são tão claras quanto deveriam ser, por exemplo, os cabeçalhos e o conteúdo não correspondem de maneira adequada, e visualmente é difícil distinguir quais pertence a qual, pois vamos usar CSS e veremos como vamos resolver amplamente esta situação.
Para isso, usaremos o seguinte:

Temos duas condições para º, ambos começam nos dizendo que são filhos de trPorém, no primeiro colocamos que seu alinhamento será à esquerda, ele terá letras brancas e seu fundo será cinza, no segundo indicamos que quando houver apenas um para cada tr o alinharemos à direita , colocaremos um fundo cinza mais claro e as letras serão cinza mais escuro.
Vamos ver o código resultante:

 Exemplo [b] [/ b] 
 
 
Classificação
inhame
Cor
Tamanho
 

 
 
Favorito:
Maçãs
Verde
Médio
 

 
 
2º favorito:
Laranjas
laranja
Grande
 

 
 
3º favorito:
Romã
Uma espécie de vermelho-esverdeado
 
Varia de médio a grande
 

 

 

Agora vamos ver o resultado deste código e perceberemos como desta forma nossa tabela fica muito mais organizada e podemos distinguir a qual coluna cada dado pertence.

Como podemos ver, este exemplo nos dá uma visão do que deveria ser uma mesa, porém ainda está longe de ser perfeita. O que aconteceria, por exemplo, se adicionarmos outro º, na linha de informações? Perderíamos o formato, o que nos faria trabalhar cada vez que a tabela mudasse sua estrutura.
Para evitar isso, existem 3 elementos que dividem logicamente a mesa, por assim dizer, são eles: thead, tbody, tfoot. Com o que vimos, podemos entender sem muita explicação teórica, então vamos passar para um exemplo prático disso.

 Exemplo 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Classificação
inhame
Cor
Tamanho
 

 
 
Classificação
inhame
Cor
Tamanho
 
 
Favorito:
Maçãs
Verde
Médio
 

 
 
2º favorito:
Laranjas
laranja
Grande
 

 
 
3º favorito:
Romã
 
Uma espécie de vermelho-esverdeado
Varia de médio a grande
 

 

 

 

Agora vamos ver o resultado disso:

Como podemos ver, é essencialmente a primeira coisa que fizemos, agora na parte inferior da tabela vemos que temos o cabeçalho igualmente, porém no código vimos como são duas estruturas diferentes, assim como o conteúdo.
Com isso, finalizamos nosso tutorial de tabelas HTML5, precisamos apenas fazer alguns exercícios e praticar o que aprendemos.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo