È necessario avere in qualsiasi tabella?

è necessario avere

in qualsiasi tabella? anche se il tavolo non ha titolo?

table ha altri 3 tag

è necessario usare tutto anche se non ho niente per il footer del tavolo. Firefox per impostazione predefinita aggiunge tutti questi nel codice.

ed è necessario,

dovrebbe sempre essere in

e se ho un’intestazione nel contenuto ricevuto dal client, e l’intestazione è esterna alla tabella ma correlata alla tabella, allora come dovrei posizionare quell’intestazione per la tabella

Come una tabella sopra

 

Heading of table

......

come una voce di tavolo

 

o come didascalia del tavolo

 
Heading of table

Quale è buono per lo screen reader e semanticamente corretto?

Secondo la DTD HTML questo è il modello di contenuto per le tabelle HTML:

          

Quindi questa è una syntax illegale:

 

Dovrebbe essere:

 

elementi non sono richiesti da nessuna parte. Sono semplicemente uno dei due tipi di cella (l’altro è

) che puoi usare in una riga della tabella. Un

è una sezione di tabella facoltativa che può contenere una o più righe.

Modifica: sul perché usare

ci sono diversi motivi:

  1. Semantica: stai distinguendo tra il contenuto della tua tabella e i “metadati”. Questo è più spesso usato per delineare tra intestazioni di colonna e righe di dati;
  2. Accessibilità: aiuta le persone che usano screen reader a comprendere il contenuto della tabella;
  3. Supporti non schermati: la stampa di una tabella a più pagine potrebbe consentire di inserire i contenuti

nella parte superiore di ogni pagina in modo che le persone possano capire cosa significano le colonne senza sfogliare più pagine;

  • Styling: i CSS possono essere applicati a
  • elementi, elementi

    , o ad altre combinazioni. Ti dà qualcos’altro su cui scrivere un selettore;

  • Javascript: questo accade spesso quando si utilizzano jQuery e librerie simili. Le informazioni aggiuntive sono utili nella scrittura del codice.
  • Come esempio di (5) potresti fare questo:

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

    L’elemento

    significa che quelle righe non saranno disegnate in questo modo. O potresti fare:

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

    con:

     tr.hover { background: yellow; } 

    che esclude nuovamente le righe

    .

    Infine, molti di questi stessi argomenti si applicano all’utilizzo di

    elementi su

    elementi: stai indicando che questa cella non è un dato ma un’intestazione di qualche tipo. Spesso tali celle verranno raggruppate insieme in una o più righe nella sezione

    o essere la prima cella di ogni riga a seconda della struttura e della natura della tabella.

    Usa

    s se stai visualizzando dati tabulari – usa uno per ogni colonna. È bello per i tuoi utenti abituali ed essenziale per i lettori di schermo. Non utilizzare

    s se si utilizza la tabella per scopi di layout (o altri schemi nefasti …)

    No, non è necessario avere th. Ma non sembra che tu stia usando giusto. Generalmente, ne hai uno per ogni colonna. Un semplice esempio di questo usato correttamente è:

     
    Heading of table
    Heading of table
    Heading of table
    BreedName
    PekingesePluto
    LabBuddy

    Potresti anche fare:

     
    BreedName
    PekingesePluto
    LabBuddy

    La risposta è

    SÌ!

    se si utilizzano le tabelle per visualizzare dati tabulari .

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

    È importante identificare quelle celle che danno significato alle righe e alle colonne piuttosto separatamente dalle celle che contengono solo dati.

    Ad esempio, la seguente tabella non trasmette assolutamente informazioni significative:

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

    I numeri hanno significato solo se le righe e le colonne hanno un nome. Questi nomi sono marcati usando

    :

         Feb maggio ago nov
     ITH
     JFK
     IST
    

    Ovviamente, non sappiamo ancora cosa significino quei numeri e per questo motivo

    è necessaria:

      Temperature medie per mese negli aeroporti selezionati
         Feb maggio ago nov
     ITH
     JFK
     IST
    

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

      Temperature medie per mese negli aeroporti selezionati
         Feb maggio ago nov
     ITH
     JFK
     IST
     Temperature in ° F.  Fonte: pubblicazione n. 456 MNMO
    

    Il titolo del tavolo va in

    . Le sezioni

    e

    sono particolarmente utili quando un tavolo diventa più grande. Vedi Come gestire le interruzioni di pagina quando si stampa una tabella HTML di grandi dimensioni per un esempio.

    Puoi usare per raggruppare i dati logicamente correlati.

    Vuoi usare ciò che descrive meglio i tuoi dati.

    descriverà l’intera tabella. th creerà una singola cella che di solito viene usata per descrivere una colonna (ma può anche essere usata per le intestazioni di riga).

    thead , tfoot e tbody . tutti possono essere usati e sono tutti opzionali purché siano in questo ordine, se usati, e hai solo un thead e uno tfoot (ma puoi avere più tbody . Molti browser (tutti?) li aggiungeranno implicitamente se non lo fai t, ma le specifiche dicono che sono opzionali.

    può apparire in qualsiasi tr indipendentemente da dove si trova il tr .

     
    text

    Questa è una tabella minima a cui posso pensare.

    I benefici sono la semantica. Il

    significa T eader in grado. Usalo per contrassegnare le intestazioni delle tue colonne. Generalmente all’interno di

    .