Tabelas

Tabelas Simples

Tabelas são um recurso muito importante para a organização dados no geral, em HTML para criar uma tabela usa-se a tag table e, dentro dela, algumas tags de definição de conteúdo, tais como:

• tr (Table Row) - Linha da tabela
• th (Table Header) - Cabeçalho da tabela
• td (Table Data) - Dado da tabela

Uma tabela simples tem geralmente esta aparência:

Anatomia de Tabelas

Essa anatomia é utilizada para tabelas grandes e melhora o resultado em sites de busca, consiste em adicionar os seguintes elementos na tabela:

• caption - Legenda/Descrição
• thead - Cabeçalho
• tbody - Corpo
• tfoot - Rodapé

Todos esses elementos podem conter seus próprios tr, td e th (menos o caption).

Independente da ordem que você colocar as tags de anatomia, o navegador sempre vai organizar na ordem correta.

Scope

É um atributo de um th que indica para qual direção o título está mostrando os dados, pode ter os valores:

• row - Dados em linha
• col - Dados em coluna
• colgroup - Dados num conjunto de colunas (para células mescladas)
• rowgroup - Dados num conjunto de linhas (para células mescladas)

Obs.: Esse atributo é extremamente útil para ajudar o site a ser relevante em sites de busca.

Um exemplo de uma tabela utilizando todos os atributos da anatomia citada a cima pode ser visto a seguir:

Mesclagem de Células

Mesclar células em uma tabela é algo bem comum e importante, em HTML é necessário colocar os seguintes atributos nas tags th ou td:

• colspan - Mesclagem em coluna.
• rowspan - Mesclagem em linha.

Depois, adiciona-se o valor que representa o número de células que ela irá ocupar. Um exemplo pode ser visto a seguir:

Estilização de Colunas

Para especificar uma coluna em uma tabela HTML, usa-se a tag colgroup, ela é uma tag que define as colunas em uma tabela, cada coluna é representada por uma tag col que fica dentro de colgroup, isso facilita na hora de estilizar colunas com CSS.

A tag col possui o parâmetro span que especifica quantas colunas uma mesma tag col pode representar.

Um exemplo de tabela com colunas estilizadas:

Responsividade

Por útlimo, também é possível deixar uma tabela larga responsiva colocando-a dentro de uma div e usando a propriedade CSS overflow-x.

Enfim, esse foi todo o meu aprendizado nesse curso sobre a criação e uso das tabelas em HTML5, com algumas estilizações em CSS3.

Acesse aqui o desafio referente à esse exercício.