Utilização de tabelas em HTML:
Antigamente, tabelas em HTML eram bastante utilizadas para a estruturação de sites.
Entretanto, sites
feitos em tabela ‘nasciam’ com diversos problemas, como:
- o código
sujo que dificultava na manutenção das páginas;
- o site
demorava mais para carregar, já que os browsers levavam mais tempo para
interpretar as diversas tags tabulares;
- problemas do
usuário com respeito à acessibilidade;
- design?? O
que é isso? Haha (desculpa, mas eu tive que fazer essa piada!);
Os
desenvolvedores web notaram que essas diversas questões, problematizavam a criação
de seus sites, pois o tempo empregado em seu desenvolvimento era muito grande e
pensaram em uma forma de contornar todo esse transtorno.
Por outro lado, os
fabricantes de browsers da época criaram seus próprios padrões web, o que
gerava grande dúvida por parte do desenvolvedor, que dificilmente conseguia
fazer um site que rodasse bem em mais de um navegador diferente. Daí teria de
fazer uma pesquisa sobre qual navegador poderia “transferir” melhor a sua ideia
para o ambiente virtual.
Estava tudo
tão ‘saturado’, que nesse período surgiram projetos como o WaSP (Web Standards Project), que consistia em difundir os princípios da
W3C para os fabricantes de browsers. Foi aí que
surgiu o movimento “Tableless”, que visava criar sites SEM TABELAS. Por
um lado muitos aderiram facilmente à ideia, mas outros em compensação
persistiram nas tabelas (essas pessoas hoje em dia podem ser consideradas
extintas).
A ideia era
que o HTML fosse utilizado para o mesmo fim para o qual foi criado, marcar
áreas de um site e com a ajuda do CSS, formatar seus estilos. Tabelas devem ser
usadas somente para agrupar dados.
Hoje em dia,
tabelas não são mais utilizadas para definição de áreas de um site e são usadas
somente para tabular dados.
As tags que formam as tabelas, são:
<table>: Define a criação de uma tabela;
<tr>: Colunas de uma tabela;
<td>: Células de uma tabela;
<th>: Define uma célula como cabeçalho de, para dar título para a linha ou
coluna.
Obs:
Para mesclagem de células, são utilizados 2 atributos:
* colspan – Mescla horizontalmente;
* rowspan – Mescla verticalmente.
<caption>: É um atributo de criação de legendas;
Agrupando
informações:
<thead>: Informações pertencentes ao head da tabela;
<tbody>: Informações pertencentes ao corpo;
<tfoot>: Informações pertencentes ao rodapé.
Obs: Essas estruturas
de agrupamento podem conter mais de uma linha.
Exemplo
de utilização das tags:
<!DOCTYPE>
<html
lang="pt-br">
<head>
<title>Tabela:
Exemplo</title>
</head>
<body>
<table
border="1">
<caption> Tabela de
preços</caption>
<thead>
<tr>
<td
colspan="4">Produtos saldo zero</td>
<tr>
<th>Produto</th>
<th>Preço</th>
<th>QTD</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>999,99</td>
<td>1</td>
<td>999,99</td>
</tr>
<tr>
<td>Tablet</td>
<td>499,99</td>
<td>2</td>
<td>999,98</td>
</tr>
<tr>
<td>Celular</td>
<td>299,99</td>
<td>3</td>
<td>899,99</td>
</tr>
<tbody>
<tfoot>
<tr>
<td
colspan="2">Total</td>
<td>6</td>
<td>2.899,94</td>
</tr>
</tfoot>
</table>
</body>
</html>
Exemplo
da tabela no navegador:
