Você conhece as tags TH e TD? Há muito tempo as tabelas têm uma má reputação em web design. Muitos anos atrás, as tabelas HTML eram usadas para layout, o que obviamente não era o seu objetivo. À medida que o CSS tornou-se popular para layouts de sites, a ideia de que “tabelas são ruins” se consolidou. Infelizmente, muitas pessoas entenderam que isso significa que as tabelas HTML são ruins o tempo todo. Não é de todo esse caso. A realidade é que as tabelas HTML são ruins quando usadas para algo diferente de seu verdadeiro propósito, que é exibir dados tabulares (planilhas, calendários, etc.). Se você está construindo um site e possui uma página com este tipo de dados tabulares, não hesite em usar uma tabela HTML em sua página.
O que th e td fazem?
A tag <td>, ou tag “table data”, cria células de tabela dentro de uma linha de tabela em uma tabela HTML. Esta é a tag HTML que contém qualquer texto e imagens. Basicamente, essa é a tag burra de carga de sua mesa. As tags conterão o conteúdo da tabela HTML.
A tag <th>, ou “cabeçalho da tabela”, é semelhante a <td> de várias maneiras. Ele pode conter o mesmo tipo de informação (embora você não coloque uma imagem em um <th>), mas define essa célula específica como um cabeçalho de tabela.
A maioria dos navegadores da web altera a espessura da fonte para negrito e centraliza o conteúdo em uma célula. Obviamente, você pode usar estilos CSS para fazer com que esses cabeçalhos de tabela, bem como o conteúdo de suas tags, tenham a aparência que você gostaria que fossem na página da web renderizada.
Quando você deve usar <th> em vez de <td>?
A tag <th> deve ser usada quando você deseja designar o conteúdo da célula como um cabeçalho para essa coluna ou linha. As células do cabeçalho da tabela são normalmente encontradas no topo da tabela ou ao longo da lateral – basicamente, os cabeçalhos no topo das colunas ou os cabeçalhos à esquerda ou no início de uma linha. Esses cabeçalhos são usados para definir o que é o conteúdo abaixo ou ao lado deles, tornando a tabela e seu conteúdo muito mais fácil de revisar e processar rapidamente.
Não use <th> para estilizar suas células. Como os navegadores tendem a exibir células de cabeçalho de tabela de maneira diferente, alguns web designers preguiçosos podem tentar tirar vantagem disso e usar a tag quando quiserem que o conteúdo fique em negrito e centralizado. Isso é ruim por vários motivos:
- Você não pode confiar em navegadores da web sempre exibindo o conteúdo dessa maneira. Os navegadores futuros podem alterar a cor por padrão ou não fazer nenhuma alteração visual no conteúdo <th>. Você nunca deve confiar exclusivamente nos estilos de navegador padrão e nunca deve usar um elemento HTML por causa de como ele “parece” por padrão.
- É semanticamente incorreto. Os agentes de usuário que lêem o texto podem adicionar formatação audível, como “cabeçalho da linha: seu texto” para indicar que ele está em uma <th> célula. Além disso, alguns aplicativos da web imprimem os cabeçalhos da tabela na parte superior de cada página, o que resultaria em problemas se a célula não fosse realmente um cabeçalho, mas fosse usada apenas por motivos estilísticos. Conclusão – usar tags dessa forma pode causar problemas de acessibilidade para muitos usuários, especialmente aqueles que usam dispositivos assistidos para acessar o conteúdo do seu site.
- Você deve usar CSS para definir a aparência das células. A separação de estilo (CSS) e estrutura (HTML) tem sido uma prática recomendada em web design por muitos anos. Mais uma vez, use um porque o conteúdo dessa célula é um cabeçalho, não porque você goste da maneira como o navegador provavelmente renderizará esse conteúdo por padrão.
