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 se tornou popular para layouts de sites, a ideia de que “tabelas são ruins” se consolidou. Infelizmente, muitas pessoas interpretaram mal isso como significando 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
e
fazem?
A tag
, 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 , ou “cabeçalho da tabela”, é semelhante a de várias maneiras. Ele pode conter o mesmo tipo de informação (embora você não coloque uma imagem em um ), 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 em vez de ?
A tag
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 qual é 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
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 forma. Navegadores futuros podem alterar a cor por padrão ou não fazer nenhuma alteração visual no conteúdo . Você nunca deve confiar apenas 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 do 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 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. Resultado – 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.
