É necessário ter <th> em qualquer mesa?
-
21-09-2019 - |
Pergunta
é necessário ter <th>
em qualquer mesa?mesmo se a tabela não tem nenhum título?
tabela 3 outras tags <thead>
<tbody>
<tfoot>
é necessária a utilização de todos, mesmo se eu não tivesse nada para o rodapé da tabela.O Firefox, por padrão, adicionar todos estes no código.
e é necessário , <th>
sempre deve estar em um <thead>
e se eu tiver um título no conteúdo recebido do cliente , e o título é de fora da tabela, mas relacionados a mesa, em seguida, como devo colocar esse título para a tabela
Como a tabela acima
<h3>Heading of table<h3>
<table>......</table>
como um título de tabela
<table>
<thead><tr rowspan=3><th>Heading of table</th></tr></thead>
ou como uma legenda de tabela
<table>
<caption> Heading of table</caption>
O que é bom para o leitor de tela e semanticamente correto?
Solução
De acordo com Html dtd Este é o modelo de conteúdo para tabelas HTML:
<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> <!ELEMENT CAPTION - - (%inline;)* -- table caption --> <!ELEMENT THEAD - O (TR)+ -- table header --> <!ELEMENT TFOOT - O (TR)+ -- table footer --> <!ELEMENT TBODY O O (TR)+ -- table body --> <!ELEMENT COLGROUP - O (COL)* -- table column group --> <!ELEMENT COL - O EMPTY -- table column --> <!ELEMENT TR - O (TH|TD)+ -- table row --> <!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
Portanto, esta é uma sintaxe ilegal:
<thead><th>Heading of table</th></thead>
Deveria ser:
<thead><tr><th>Heading of table</th></tr></thead>
<th>
Os elementos não são necessários em nenhum lugar. Eles são simplesmente um dos dois tipos de células (o outro sendo <td>
) que você pode usar em uma linha de tabela. UMA <thead>
é uma seção de tabela opcional que pode conter uma ou mais linhas.
Editar: Quanto a Por quê usar <thead>
Existem várias razões:
- Semântico: Você está diferenciando entre o conteúdo da sua tabela e "metadados". Isso geralmente é usado para delinear entre cabeçalhos de coluna e linhas de dados;
- Acessibilidade: Ajuda as pessoas que usam os leitores de tela para entender o conteúdo da tabela;
- Mídia sem tela: Imprimir uma tabela de várias páginas pode permitir que você coloque o
<thead>
Conteúdo na parte superior de cada página para que as pessoas possam entender o que as colunas significam sem recuar várias páginas; - Estilo: CSS pode ser aplicado a
<tbody>
elementos,<thead>
elementos, ambos ou alguma outra combinação. Dá a você outra coisa para escrever um seletor contra; - JavaScript: Isso geralmente surge ao usar o jQuery e bibliotecas similares. As informações extras são úteis na redação do código.
Como exemplo de (5) você pode fazer isso:
$("table > tbody > tr:nth-child(odd)").addClass("odd");
o <thead>
Elemento significa que essas linhas não serão estilizadas dessa maneira. Ou você pode fazer:
$("table > tbody > tr").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
com:
tr.hover { background: yellow; }
que novamente exclui o <thead>
linhas.
Por fim, muitos desses mesmos argumentos se aplicam ao uso <th>
elementos acima <td>
Elementos: você está indicando que esta célula não é dados, mas um cabeçalho de algum tipo. Muitas vezes essas células serão agrupadas em uma ou mais linhas no <thead>
Seção ou seja a primeira célula em cada linha, dependendo da estrutura e da natureza da sua mesa.
Outras dicas
Usar <th>
s Se você estiver exibindo dados tabulares - use um para cada coluna. É bom para seus usuários regulares e essenciais para os leitores de tela. Não use <th>
s Se você estiver usando a tabela para fins de layout (ou outros esquemas nefastos ...)
Não, não é necessário ter th. Mas não parece que você está usando a direita. Geralmente, você tem um para cada coluna. Um exemplo simples de TH usado corretamente é:
<table>
<tr><th>Breed</th><th>Name</th></tr>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>
Você também pode fazer:
<table>
<thead><tr><th>Breed</th><th>Name</th></tr></thead>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>
A resposta é
SIM!
Se você estiver usando tabelas para exibir dados tabulares.
Os dados tabulares são organizados em linhas e colunas por um motivo. O significado do dado em uma célula de tabela é definido pelo significado da coluna e pela linha em que aparece.
É importante identificar as células que dão significado às linhas e colunas separadamente das células que contêm apenas dados.
Por exemplo, a tabela a seguir transmite absolutamente nenhuma informação significativa:
34 56 90 15 45 65 85 30 50 55 70 35
Os números só têm significado se as linhas e colunas receberem nomes. Esses nomes são marcados usando <th>
:
Fevereiro Poderia AUG Nov Com Jfk Ist
Claro, ainda não sabemos o que esses números significam e é por isso <caption>
é preciso:
Temperaturas médias por mês em aeroportos selecionados Fevereiro Poderia AUG Nov Com Jfk Ist
Por fim, é importante observar detalhes como as unidades de medição, fontes de dados etc. Esse tipo de informação geralmente entra no rodapé da tabela:
Temperaturas médias por mês em aeroportos selecionados Fevereiro Poderia AUG Nov Com Jfk Ist Temperatures in °F. Source: Publication #456 MNMO
O título da tabela entra em <caption>
. o <thead>
e <tfoot>
As seções são especialmente úteis quando uma tabela cresce. Ver Como lidar com quebras de página ao imprimir uma grande tabela HTML Por exemplo.
Você pode usar <colgroups>
para agrupar dados logicamente relacionados.
Você deseja usar o que descreve melhor seus dados.
<caption>
vai descrever toda a tabela. th
vai criar uma única célula, que é geralmente usado para descrever uma coluna (mas também pode ser usado para cabeçalhos de linha).
thead
, tfoot
, e tbody
.todos podem ser usados e são todos opcionais, desde que elas estão em ordem, se usado, e você tem apenas um thead
e um tfoot
(mas você pode ter vários tbody
.Muitos navegadores (todos?) irá adicioná-los implicitamente se você não, mas a especificação diz que eles são opcionais.
th
pode aparecer de dentro de qualquer tr
independentemente de onde o tr
é.
<table> <tr> <td>text</td> </tr> </table>
Esta é a tabela mínima em que consigo pensar.
Os benefícios são semântica. o <th>
significa T capaz H Eader. Use -o para marcar os cabeçalhos de suas colunas. Geralmente dentro de um <thead>
.