Tabelas HTML são fáceis de criar, uma vez que você entende os fundamentos de linhas e colunas, e também quando você entende quando é aceitável usar uma tabela e quando deve evitá-las.
Uma Breve História das Tabelas e Web Design
Muitos anos atrás, antes da aceitação dos padrões CSS e web, os designers da Web usavam o HTML
elemento para criar um layout de página para sites. Os designs de sites seriam "cortados" em pequenos pedaços, como um quebra-cabeça, e depois combinados com uma tabela HTML para renderizar no navegador como pretendido. Foi um processo muito complexo que criou muitas marcações HTML extras e que nunca seriam utilizáveis hoje no mundo de multitelas em que nossos sites vivem. Como o CSS se tornou o método aceito para o visual e layout de páginas da web, o uso de tabelas para isso se tornou evitado e muitos web designers erroneamente acreditavam que "mesas eram ruins". Isso foi e não é verdade. As tabelas para o layout são ruins, mas elas ainda têm um lugar no design da web e no HTML, ou seja, para exibir dados tabulares como um calendário ou programação de trens. Para esse conteúdo, usar uma tabela ainda é uma abordagem aceitável e boa.
Então, como você faz o layout de uma mesa? Vamos começar criando uma tabela simplesmente 2x2. Isto terá 2 colunas (estes são os blocos verticais) e 2 linhas (os blocos horizontais). Depois de construir uma tabela 2x2, você pode criar qualquer tabela de tamanho que desejar simplesmente adicionando linhas ou colunas adicionais.
Veja como
-
Primeiro abra a mesa
-
Abra a primeira linha com a tag tr
-
Abra a primeira coluna com a tag td
|
-
Escreva o conteúdo da célula
-
Feche a primeira célula e abra a segunda
|
-
Escreva o conteúdo da segunda célula
-
Feche a segunda célula e feche a linha
-
Escreva a segunda linha exatamente como a primeira
| | |
-
Então feche a mesa
-
É isso aí!
Você também pode optar por adicionar cabeçalhos de tabela à sua tabela usando o
elemento. Esses cabeçalhos de tabela substituiriam as partes "dados da tabela" na primeira linha da tabela, desta forma:
| Nome | Função | | Jeremy | Desenhista | Jennifer | Desenvolvedor |
Quando essa página fosse renderizada no navegador, essa primeira linha com os cabeçalhos da tabela seria, por padrão, exibida em negrito e eles seriam centralizados na célula da tabela em que aparecem.
Então, não há problema em usar tabelas em HTML?
Sim, desde que você não os use para fins de layout, não há problema em usar tabelas. Se você precisar exibir informações tabulares, uma tabela é a maneira de fazer isso. De fato, evitar uma tabela por causa de alguma pureza equivocada para evitar esse elemento HTML legítimo é tão retrógrado quanto usá-los por motivos de layout neste dia e época.
Escrito por Jennifer Kyrin. Editado por Jeremy Girard.
|
