Tabelas são estruturas bastante complexas, compostas por linhas e colunas. O esqueleto externo de uma tabela é sempre formado pelo elemento table.
<table> … </table>
Dentro deste elemento, é feita a definição real da tabela. Durante a implementação de uma tabela em HTML, é recomendado atribuir uma borda a ela. Isso facilita a visualização de como as linhas e colunas estão distribuídas. Para isso, o elemento de abertura <table> deve receber a combinação de atributo-valor border="1". (Lembrando que o atributo border não deve ser utilizado em HTML. Neste caso, é recomendado o uso das propriedades CSS correspondentes. Mais informações sobre isso serão dadas posteriormente).
<table border="1"> … </table>
Agora vamos à definição das linhas da tabela. Isso é feito através do elemento tr.
<table border="1"> <tr></tr> </table>
No entanto, isso ainda não resulta na visualização desejada. Em seguida, é necessário definir as colunas. Isso é feito novamente através do elemento td.
<table border="1">
<tr>
<td></td>
</tr>
</table>Agora você pode definir o conteúdo da primeira célula da tabela. Isso é feito entre <td> e </td>.
<table border="1">
<tr>
<td>Conteúdo 1</td>
</tr>
</table>
Somente agora vale a pena visualizar o resultado no navegador.
Ainda não muito espetacular, afinal, a tabela atualmente consiste apenas em uma célula. Você pode agora adicionar outra coluna. Isso é feito novamente através do elemento td. Certifique-se de defini-lo dentro do elemento tr.
<table border="1">
<tr>
<td>Conteúdo 1</td>
<td>Conteúdo 2</td>
</tr>
</table>
Aqui também um olhar sobre o resultado.
Para adicionar linhas adicionais à tabela, basta adicionar um novo elemento tr, no qual os elementos td desejados serão definidos novamente.
Aqui está um exemplo disso:
<table border="1">
<tr>
<td>Conteúdo 1</td>
<td>Conteúdo 2</td>
</tr>
<tr>
<td>Conteúdo 3</td>
<td>Conteúdo 4</td>
</tr>
</table>
Dê uma olhada no resultado no navegador, que mostra o seguinte:
Desta forma, você também pode criar tabelas extensas.
Definir Cabeçalho, Corpo e Rodapé
As tabelas podem ser divididas em áreas lógicas, sendo um cabeçalho, uma ou mais áreas de dados e uma área de rodapé. O exemplo a seguir mostra como isso pode ser feito:
<table border="1">
<thead>
<tr>
<th>Saída</th>
<th>>Chegada</th>
<th>>Plataforma</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Berlim</td>
<td>Stralsund</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlim</td>
<td>Hamburgo</td>
<td>1</td>
</tr>
<tr>
<td>>Munique</td>
<td>Berlim</td>
<td>3</td>
</tr>
</tbody>
</table>E aqui está um visual do resultado no navegador:
A divisão em essas áreas não tem um efeito óbvio. Naturalmente, surge a pergunta: Por que então se dar ao trabalho de definir essas áreas? Existem duas boas razões para isso:
• Com CSS é possível formatar as áreas conforme desejado.
• Os navegadores podem repetir o cabeçalho e rodapé da tabela em cada página ao imprimir tabelas longas.
O cabeçalho da tabela é indicado pelo thead. Em seguida, seguem-se as linhas que pertencem à área do cabeçalho da tabela. Não se esqueça de fechar o cabeçalho </thead>.
Se a tabela precisar de um rodapé, este deve ser definido obrigatoriamente antes do corpo da tabela. O rodapé é iniciado por <tfoot>. Você pode então adicionar uma ou mais linhas que pertençam à área do rodapé. Encerre o rodapé com </tfoot>.
O corpo real da tabela é definido dentro do elemento tbody. Este elemento tbody pode ser repetido diversas vezes. O corpo da tabela é encerrado por </tbody> cada vez que aparece.
Por que, por exemplo, utilizar vários elementos tbody numa tabela? Um bom exemplo disso pode ser a tabela da Bundesliga. Neste tipo de tabela, geralmente há várias áreas.
• Campeão
• Participantes da Liga dos Campeões
• Classificados para a Liga dos Campeões
• Participantes da Liga Europa
• Meio-campo cinza
• Lugar de rebaixamento
• Rebaixados
Cada uma dessas áreas pode ser colocada em seu próprio elemento tbody e então estilizada de maneira diferente usando CSS.
Pré-definir colunas
Como a tabela é exibida pelos navegadores depende, naturalmente, principalmente do número de linhas e colunas existentes. O processo de exibir uma tabela não é tão simples para o navegador. Na verdade, um navegador sempre precisa primeiro ler a tabela inteira antes de poder exibi-la. Especialmente em tabelas muito extensas, isso pode levar algum tempo. Esse problema pode ser contornado informando diretamente ao navegador quantas colunas a tabela realmente tem.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Título</th>
<th>Preço</th>
</tr>
<tr>
<td>23223423434</td>
<td>Uma Breve História de Quase Tudo</td>
<td>29,95 Euros</td>
</tr>
</table>
Através do colgroup, a pré-definição do número de colunas é iniciada. Observe que a maioria dos atributos disponíveis nas versões anteriores do HTML para o colgroup não são mais permitidos no HTML5. Apenas o atributo span é permitido agora. Este atributo espera como valor o número de colunas contidas na tabela.
O elemento colgroup é colocado logo após a entrada <table>. As colunas em si são então definidas pelos elementos col individuais.
Ao usar o colgroup, basicamente existem duas opções:
• Com atributo span
• Sem atributo span
Se não for usado o atributo span, para cada coluna sobre a qual o grupo de colunas deve se estender, um elemento col deve ser definido dentro do elemento colgroup. Observe que o elemento col é um elemento autônomo.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Título</th>
<th>Preço</th>
</tr>
<tr>
<td>23223423434</td>
<td>Uma Breve História de Quase Tudo</td>
<td>29,95 Euros</td>
</tr>
</table>
Existe também uma forma mista.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Isso é especialmente útil quando se deseja pré-definir uma coluna separadamente, mas agrupar as outras em um grupo.
