O que é th
O elemento <th>
é uma tag HTML utilizada para definir células de cabeçalho em tabelas. Ele é parte integrante da estrutura de tabelas em HTML, que é composta por várias outras tags, como <table>
, <tr>
e <td>
. A função principal do <th>
é fornecer um contexto para os dados que estão sendo apresentados, permitindo que os usuários compreendam rapidamente a informação contida na tabela.
Importância do th em tabelas
O uso do <th>
é crucial para a acessibilidade e a usabilidade das tabelas. Ao marcar uma célula como cabeçalho, os leitores de tela podem identificar facilmente quais dados pertencem a qual categoria, melhorando a experiência de navegação para usuários com deficiência visual. Além disso, o uso adequado do <th>
pode ajudar a melhorar o SEO da página, uma vez que os motores de busca interpretam melhor a estrutura da informação.
Como utilizar a tag th
Para utilizar a tag <th>
, ela deve ser inserida dentro de uma linha de tabela, que é criada com a tag <tr>
. Normalmente, as células de cabeçalho são colocadas na primeira linha da tabela, mas também podem ser usadas em colunas. Um exemplo simples de uso seria: <tr><th>Nome</th><th>Idade</th></tr>
, onde “Nome” e “Idade” são os cabeçalhos das colunas.
Atributos do th
A tag <th>
pode ter vários atributos que ajudam a definir seu comportamento e estilo. Os atributos mais comuns incluem scope
, que indica se a célula é um cabeçalho de linha, coluna ou grupo de cabeçalhos, e colspan
e rowspan
, que permitem que a célula se estenda por várias colunas ou linhas, respectivamente. Esses atributos são essenciais para criar tabelas complexas e bem estruturadas.
Estilizando o th com CSS
O estilo das células de cabeçalho pode ser facilmente modificado utilizando CSS. Por padrão, as células <th>
são exibidas em negrito e centralizadas, mas isso pode ser alterado. Por exemplo, você pode usar a regra CSS th { background-color: #f2f2f2; }
para adicionar uma cor de fundo às células de cabeçalho, melhorando a estética da tabela e a legibilidade dos dados apresentados.
Exemplo prático de th
Um exemplo prático de uma tabela utilizando a tag <th>
seria: <table><tr><th>Produto</th><th>Preço</th></tr><tr><td>Camiseta</td><td>R$ 29,90</td></tr></table>
. Neste exemplo, “Produto” e “Preço” são cabeçalhos que ajudam a identificar os dados que seguem.
Diferença entre th e td
A principal diferença entre <th>
e <td>
é que <th>
é utilizado para cabeçalhos, enquanto <td>
é utilizado para células de dados. As células de cabeçalho são geralmente formatadas de maneira diferente, como em negrito e centralizadas, para se destacarem dos dados normais. Essa distinção é importante para a organização e a interpretação correta das informações em uma tabela.
Compatibilidade do th com navegadores
A tag <th>
é amplamente suportada por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Isso garante que as tabelas que utilizam essa tag sejam exibidas corretamente em diferentes plataformas e dispositivos. Além disso, o uso de <th>
contribui para a compatibilidade com tecnologias assistivas, tornando as tabelas mais acessíveis.
Considerações sobre o uso do th
Ao utilizar a tag <th>
, é importante seguir as melhores práticas de acessibilidade e SEO. Isso inclui o uso adequado de atributos como scope
e a manutenção de uma estrutura lógica na tabela. Além disso, deve-se evitar o uso excessivo de cabeçalhos, pois isso pode confundir os usuários e afetar negativamente a legibilidade da tabela.