Um pouco sobre: Tabela HTML

As tabelas HTML são utilizadas apenas para apresentar dados tabulares, ou seja, que necessitam serem apresentado em uma ordem lógica com linhas e colunas.

A criação de tabelas não é tão complicada, explicandos as três tags básicas para a criação de tabelas, torna tudo mais fácil.

As três principais tags necessárias são <tabel>, <tr> e <td>. Mas temos outras que são utilizadas para ter uma melhoria na semântica do código, que são <th>, <caption>, <thead>, <tbody> e <tfoot>.

<table> : necessário no início e no fim da tabela, indica a criação da tabela e o fim da criação.

<tr> = table row: é para a inserção de uma linha na tabela, inicia e termina a linha na horizontal.

<td> = table data: é para a inserção de uma célula dentro da linha.

<th> : para criação de um título dentro da tabela, melhor semântica.

<caption>: para a legenda da tabela.

<thead>: por boas maneiras, na linha de cabeçalho da tabela.

<tbody>: por boas maneiras, para o corpo da tabela.

<tfoot>: por boas maneiras, para a linha do rodapé da tabela.

Obs: todas as linhas <tr> tem que ter o mesmo número de colunas <td>, caso haja necessidade de mesclar as linhas ou as colunas utiliza se  <colspan> e <rowspan>.

<colspan>: para mesclar em colunas.

<rowspan>: para mesclar em linhas.

Como descrito anteriormente as tabelas são ultilizadas apenas para apresentar dados tabulados. Antes  os layout’s das páginas eram criados por meio de tabelas, mas após as  novas indicações da WC3 os layout’s são criados de outras formas, que contem melhor semântica no código HTML.

Para se ter uma tabela de fácil entendimento, é necessário informar ao usuário dados que possibilitem o entendimento, como, nome, descrição, cabeçalhos entre outros.

A seguir teremos o exemplo do código em HTML, para entendermos tudo o que foi citado acima.

Codificação da Tabelas

Resultado da Codificação