Domanda

E 'necessario avere <th> in qualsiasi tavolo? anche se la tabella non ha alcuna intestazione?

tavolo ha altri 3 <thead> tag <tbody> <tfoot> è necessario utilizzare tutti anche se ho nulla per footer tavolo. Firefox di default aggiungere tutti questi in codice.

ed è necessario, <th> sempre dovrebbe essere in un <thead>

e se ho una voce del contenuto ricevuto dal client, e la direzione è da fuori tavolo, ma relazione con la tabella allora come devo mettere che la voce per la tabella

Come tabella sopra

<h3>Heading of table<h3>
<table>......</table>

come titolo della tabella

<table>
<thead><tr rowspan=3><th>Heading of table</th></tr></thead>

o come una didascalia di tabella

<table>
<caption> Heading of table</caption>

Il che è un bene per la lettura dello schermo e semanticamente corretto?

È stato utile?

Soluzione

Secondo il HTML DTD questo è il modello di contenuto per le tabelle 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-->

Quindi questa è la sintassi illegale:

<thead><th>Heading of table</th></thead>

Dovrebbe essere:

<thead><tr><th>Heading of table</th></tr></thead>

Elementi <th> non sono richieste da nessuna parte. Sono semplicemente uno dei due tipi di cellule (l'altra è <td>) che è possibile utilizzare in una riga della tabella. Un <thead> è una sezione tabella opzionale che può contenere una o più righe.

Modifica Per quanto riguarda perché di utilizzare <thead> ci sono diverse ragioni:

  1. Semantica: Stai differenziando tra il contenuto della tabella e "metadati". Questo è più spesso utilizzato per delineare tra le intestazioni delle colonne e righe di dati;
  2. Accessibilità: che aiuta le persone che utilizzano screen reader per comprendere i contenuti della tabella;
  3. non-Media Screen: Stampa di un tavolo multi-pagina può consentire di mettere il contenuto <thead> nella parte superiore di ogni pagina così la gente può capire quali sono le colonne che significa senza sfogliando indietro diverse pagine;
  4. Styling: CSS può essere applicata a <tbody> elementi, elementi <thead>, entrambi o qualche altra combinazione. Ti dà qualcosa di diverso di scrivere un selettore contro;
  5. JavaScript: questo viene spesso fino quando si utilizza jQuery e librerie simili. L'informazione supplementare è utile per scrivere codice.

Come esempio di (5) si potrebbe fare questo:

$("table > tbody > tr:nth-child(odd)").addClass("odd");

L'elemento <thead> mezzi tali righe non verranno in stile in questo modo. Oppure si potrebbe fare:

$("table > tbody > tr").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

con:

tr.hover { background: yellow; }

che esclude ancora una volta le righe <thead>.

Infine, molti di questi stessi argomenti si applicano all'uso di elementi <th> sugli elementi <td>: si sta a indicare che questo cellulare non è un dato, ma un colpo di testa di qualche tipo. Spesso tali cellule vengono raggruppati in una o più righe nella sezione <thead> o essere la prima cella in ogni riga a seconda della struttura e la natura della tabella.

Altri suggerimenti

Utilizzare <th>s se state visualizzando dati tabulari - utilizzare uno per ogni colonna. E 'bello per gli utenti regolari e indispensabile per gli screen reader. Non usare <th>s se si utilizza la tabella per il layout (o altri programmi nefasti ...)

No, non è necessario avere esimo. Ma non sembra che si sta utilizzando ° a destra. In generale, si dispone di uno per ogni colonna. Un semplice esempio di esimo utilizzati in modo corretto è:

<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>

Si potrebbe anche fare:

<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>

La risposta è

YES!

se si utilizza tabelle per visualizzare i dati tabulari .

i dati tabulari sono organizzati in righe e colonne per un motivo. Il significato del dato in una cella di tabella è definito dal significato della colonna e la riga in cui appare.

E 'importante identificare quelle cellule che danno senso alle righe e colonne, piuttosto separatamente dalle cellule che contengono solo i dati.

Ad esempio, la seguente tabella trasmette assolutamente alcuna informazione significativa:

34 56 90 15
45 65 85 30
50 55 70 35

I numeri hanno senso solo se le righe e le colonne sono dati nomi. Quei nomi sono contrassegnati utilizzando <th>:

    Feb May Aug Nov
ITH
JFK
IST

Naturalmente, noi ancora non si sa che cosa quei numeri significano che è il motivo per cui è necessaria <caption>:

Average Temperatures by Month at Selected Airports
    Feb May Aug Nov
ITH
JFK
IST

Infine, è importante notare dettagli come le unità di misura, fonti di dati, ecc Questo tipo di informazioni di solito va nel piè di pagina della tabella:

Average Temperatures by Month at Selected Airports
    Feb May Aug Nov
ITH
JFK
IST
Temperatures in °F. Source: Publication #456 MNMO

Il titolo della tabella va in <caption> . Il <thead> e sezioni <tfoot> sono particolarmente utili quando una tabella cresce di grandi dimensioni. Vedi Come trattare con interruzioni di pagina quando la stampa di un grande tavolo HTML per un esempio.

È possibile utilizzare <colgroups> per raggruppare logicamente dati correlati.

Si desidera utilizzare ciò che descrive meglio i dati.

<caption> descriverà l'intera tabella. th creerà una singola cella che viene solitamente utilizzato per descrivere una colonna (ma può essere utilizzato anche per le intestazioni di riga).

thead, tfoot e tbody. tutti possono essere utilizzati e sono tutti opzionali a condizione che essi siano in questo ordine, se usato, e si dispone di un solo thead e uno tfoot (ma si può avere tbody multipla. Molti browser (tutti?) li aggiungere implicitamente se si don' t, ma le specifiche dice che sono optional.

th può apparire all'interno di qualsiasi tr indipendentemente da dove il tr è.

<table>
     <tr>
        <td>text</td>
     </tr>      
</table>

Questo è tavolo minimo che mi viene in mente.

I vantaggi sono semantica. I mezzi <th> T grado H eader. Usalo per marcare le intestazioni delle colonne. Generalmente all'interno di un <thead>.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top