anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Aprenda como criar uma semântica de tabela em HTML5

ban_blog

Como sabemos, uma das grandes mudanças no HTML5 é a semântica. Agora delimitamos claramente para o navegador o que é cada elemento; um bom exemplo disso é quando você acessa um site no seu celular e ao clicar no campo e-mail ele muda a configuração do seu teclado e deixa o @ e talvez o “.com” mais acessível, ou quando você clica em um campo numérico ele já torna seu teclado em teclado numérico. Porém, semântica não se resume a apenas isso: vamos ver como aplicar a semântica às tabelas.

 

Criação da tabela em HTML5

Principais Tags

<table> define a criação da tabela. Ao encerrar a tabela precisa ser fechada com a tag </table>

<caption> não é necessariamente a legenda, esta é apenas a tradução, pois o caption é muitas vezes usado para indicar o próprio título da tabela.

<tr> (Linha da Tabela) é usada para criar linhas. Toda tabela tem ao menos uma linha, logo precisamos usá-la. E como no outro caso, ao terminar sua linha ela precisa ser fechada com a tag </tr>

<th> (Heading da tabela) é similar ao nosso H1, é uma informação importante que substitui o TD e tem os mesmos atributos. Vale lembrar que ele é por padrão centralizado.

<td> (Informação da Tabela) é a nossa célula (NÃO CRIAMOS COLUNAS NO HTML, ELAS SURGEM SOZINHAS, CRIAMOS AS LINHAS E AS CÉLULAS. Sempre que for criar um novo quadradinho (nova célula) criamos um TD, logo podemos ter vários TDs em cada TR, e cada TD tem que ser fechado quando terminamos de digitar a sua informação, para só então abrir o próximo TD.

 

Semântica

Os elementos abaixo não são obrigatórios, porém ajudam no entendimento da tabela pelo navegador:

<thead> Table Head (cabeçalho da tabela):  É a informação que fica no topo da tabela. Sempre fica no topo, então mesmo que eu coloque no final da minha tabela, a informação contida nele vai ficar no topo.

<tfoot> Table Foot (Rodapé da tabela): É a informação que fica na parte inferior da tabela. Mesmo padrão do Table Head: tudo dentro do Table Foot vai aparecer no final da tabela.

<tbody> Table Body (Corpo da tabela): É a informação que compõe a tabela, tudo que fica entre o Table head e o Table foot.

 

Atributos

Agora veremos alguns atributos. Eles ficam dentro das tags e não são obrigatórios, mas em alguns casos são necessários para sabemos o href na tag <a> e o src na tag <img>:

colspan = Mescla as colunas da célula (do td ou th), ou seja, faz com que meu td ocupe o espaço de mais de uma coluna.

Exemplo: <td colspan=”2″>

Neste caso minha célula vai se expandir para ocupar 3 colunas.

 

rowspan = Mescla as linhas da célula (do td ou th), ou seja, faz com que meu td ocupe o espaço de mais de uma linha.

Exemplo: <th rowspan=”2″ colspan=”2″>

Neste caso minha célula vai se expandir para ocupar o espaço de 2 colunas e 2 linhas.

 

border = coloca borda na tabela.

Exemplo: <table border=1>

Coloca a borda na espessura 1 na sua tabela. IMPORTANTE: Não gosto de usar border para formatar, porque o ideal é formatar pelo CSS. Porém, colocamos este atributo para que seja possível ver as bordas na nossa tabela.

 

Vamos praticar?

 Vamos criar esta tabela:

Tabela em HTML5

Primeiro você vai criar o doctype, html, body… todos as tags comuns. Agora eu vou iniciar minha tabela. (em preto fica o código e em azul são as minhas explicações. Só digitem o texto em preto, ok?)

<table border=1> Coloquei a borda só como auxílio visual

<thead> Cabeçalho da minha tabela

<caption>Melhores episódios de South Park</caption>  Criei o tema da minha tabela.

<tr> minha primeira linha (que na verdade é a segunda se contarmos o caption)

<th>Nome do Episódio</th><th>Temporada</th><th>Episódio</th> Criei o conteúdo desta linha

</tr> Fechei minha linha

</thead> Terminei o cabeçalho

<tfoot> Estou fazendo já o rodapé, mesmo ele sendo feito agora, o navegador vai colocar ele lá para o final da tabela, porque o pé fica em baixo.

<tr>

<th colspan=”3″>Agora você já sabe que episódios você precisa ver</th></tr> Com o colspan=3 eu fiz com que esta célula ocupe o espaço de 3 colunas.

</tfoot> Terminei o rodapé

Vou fazer o começo, e vocês tentem terminar a tabela só com o que vimos aqui.

<tbody> Estou abrindo aqui o corpo da tabela (só tenho que fechá-lo quando acabar tudo, uma boa ideia é fazer um pedaço da tabela, salvar e testar, fazer mais um pouco, salvar e testar até completá-la.)

<tr>
<td>Nome do episódio</td><td>Temporada</td><td>Episódio</td>
</tr>

Fiz minha primeira linha, vou para a segunda agora no mesmo padrão.

<tr>

<td>Marjorie</td><td>9ª Temporada</td><td>Episódio 9</td>

</tr>

Fiz minha linha com o conteúdo de cada célula na ordem certa.

 

 

… e você continua! Não esqueça de fazer as linhas (tr), e as células (td), e de fechá-los quando terminar e no final fechar seu corpo da tabela (tbody) e finalmente sua tabela (table).

 Galera, se tiverem dúvidas no tutorial, comentem aqui no blog ou no Facebook. Até a próxima!
Próximo

Postado por

Postagem Relacionada

Exercício Prático – MS Word
Olá pessoal, tudo bom? Hoje vamos colocar a mão na massa e aplicar alguns conceitos