Marcatura semantica per tabelle HTML complesse o nidificate?

Question

Desidero conoscere il modo migliore per contrassegnare i dati tabulari in una pagina Web quando le righe di dati contengono dati complessi che non possono essere contenuti in una singola riga della tabella.

Ecco un esempio concreto. La prima riga contiene un elenco di informazioni aggiuntive su braccia e gambe.

 
Shadrach M Banana  12 
    Arms Blue 2 
    Legs Yellow 3 
Meshgah M Apple  34 
Abednego M Persimmon 0 

C'è un buon modo per marcare questo in su altro che utilizzare un cellulare con spanning che contiene una tabella nidificata come questo?

Non sono completamente soddisfatto di questo perché il tavolo esterno ha quattro colonne, con intestazioni e significati specifici; ma la seconda fila si estende su tutte e quattro le colonne e contiene qualcosa di diverso. Voglio davvero che questa informazione faccia parte del primo elemento pubblicitario (Shadrach), non parte della tabella di primo livello. Ma HTML non sembra permettermi di farlo.

C'è un modo migliore, più semantico?

Answer 1

Una cosa che devi chiederti quando tenti di rendere il tuo markup più semantico è fino a che punto lo stai facendo. Il markup semantico ha valore perché è più semplice da stile e applica diversi fogli di stile senza doverli personalizzare per il markup che si sta utilizzando. Ha valore perché favorisce l'accessibilità, rendendo più facile per gli screen reader o i motori di rendering alternativi di analizzarlo in modo appropriato. E a volte ha un valore perché il motore di ricerca o altri strumenti automatici possono estrarre informazioni da esso.

A volte, tuttavia, vi imbattete in un caso che l'HTML non è in grado di gestire. Questo sembra essere uno di loro. HTML non ha alcun modo di annidare i dati gerarchici nelle tabelle con colonne che non corrispondono alle altre colonne della tabella. Quindi, devi fare il meglio con quello che hai.A questo punto, preoccuparsi di renderlo più semantico non ti compri molto di più; stai facendo qualcosa di abbastanza speciale, che altri fogli di stile, screen reader e strumenti probabilmente non sapranno cosa fare, quindi praticamente qualsiasi soluzione tu crei non è completamente contraria allo scopo degli elementi in questione va bene.

Penso che la soluzione che hai menzionato riguardi il meglio che puoi fare. Segna quelle righe contenenti tabelle nidificate con una classe che indica che non sono come le altre righe, e chiamale bene. Se si voleva, è possibile raggruppare insieme con le righe che stanno attaccati utilizzando più <tbody> elementi:

<table> 
<tbody> 
    <tr><td>Shadrach <td>M <td>Banana  <td>12 
    <tr class=nested><td colspan=4> 
    <table>...</table> 
<tbody> 
    <tr><td>Meshgah <td>M <td>Apple  <td>34 
<tbody> 
    <tr><td>Abednego <td>M <td>Persimmon <td>0 
</table> 

Answer 2

A meno che non si disponga di una semantica esplicita per le informazioni, non esiste un unico modo per farlo. Sembra che ci sia una struttura ad albero all'interno delle righe e qualche DIV annidato può essere utile. Quindi potrebbe essere possibile avere un figlio DIV di una cella di riga, anche se sarà complesso con cui lavorare. In alternativa puoi provare a creare tabelle nidificate (TABELLA come contenuto o cella).

Se si desidera preservare semantica complessa, HTML non è il modo migliore per farlo e forse si dovrebbe utilizzare una rappresentazione XML o RDF. Questi possono essere entrambi trasformati in HTML per la visualizzazione preservando la semantica.

Answer 3

Se si posiziona la tabella nella prima colonna della riga di dettaglio, si estendono tutte e quattro le colonne e si aggiungono intestazioni di tabella descrittive alla tabella, quindi questo dovrebbe fornire alcune semantiche di base per correlare la tabella dei dettagli alla colonna che esso descrive.

penso che questo è un caso però in cui la tradizionale semantica HTML non riescono a trasmettere ciò che si sta cercando, e si dovrebbe pensare di fare uso di XHTML e si estende con ARIA attributes prevista dal W3C WAI per aumentare la semantica XHTML esistenti descrivere strutture complesse come quella che stai cercando di creare. Forse, se si è aggiunto un attributo aria-describedby alla cella della tabella di dettaglio descrive, che avrebbe fornito la semantica aggiuntivi che stai cercando:

<table> 
    <thead> 
     <tr> 
      <th>column 1</th> 
      <th>column 2</th> 
      <th>column 3</th> 
      <th>column 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td id="master" aria-describedby="detail">Shadrach</td> 
      <td>M</td> 
      <td>Banana</td>  
      <td>12</td> 
     </tr> 
     <tr> 
      <td colspan="4"> 
      <table id="detail"> 
       <tbody> 
        <tr> 
         <td>arms</td> 
         <td>blue</td> 
         <td>2</td> 
        </tr> 
        <tr> 
         <td>legs</td> 
         <td>yellow</td> 
         <td>3</td> 
        </tr> 
       </tbody> 
      </table> 
      </td> 
     </tr> 
    </tbody 
</table> 

Ci sono una moltitudine di Aria-ruoli e attributi si possono trovare utili, ad esempio, , treegrid ruolo per le tabelle con layout gerarchici e righe espandibili. Dai un'occhiata al draft di lavoro di ARIA e sono sicuro che troverai qualcosa in grado di descrivere ciò che stai cercando di trasmettere.

Answer 4

c'è un modo migliore, più semantico?

Sì, non inserire una tabella nidificata. Le braccia/gambe dovrebbero essere più colonne sul tavolo originale, o un tavolo separato del tutto. Quindi utilizzare CSS per lo stile appropriato .

No, non so come si possa ottenere lo stesso effetto visivo con HTML semantico e CSS. Ma non è questo il punto. Stai cercando il markup semantico, non come adattarlo a ciò che pensi sia UX appropriato (suggerimento: se stai usando le tabelle per il layout (come sei), allora è solo UX appropriato per gli utenti visivi).

Answer 5

WAI's tables tutorial fornisce un'introduzione molto semplice alla gestione di tabelle complesse. L'esempio del post originale potrebbe illustrare una specie di multi-level table.