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?

Foi útil?

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:

  1. 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;
  2. Acessibilidade: Ajuda as pessoas que usam os leitores de tela para entender o conteúdo da tabela;
  3. 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;
  4. 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;
  5. 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>.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top