markup semantico per le tabelle HTML complesse o nidificate?

Question

Vorrei sapere il modo migliore per contrassegnare i dati tabulari su una pagina web quando le righe di dati contengono dati complessi che non possono andare bene all'interno di una singola riga della tabella.

Ecco un esempio concreto. La prima linea ha una lista di informazioni extra collegato ad esso 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 del tutto contento di questo perché la tabella esterna ha quattro colonne, con intestazioni e significati specifici; ma la seconda fila si estende su tutti e quattro colonne e contiene qualcosa di diverso. Voglio davvero queste informazioni per essere parte della voce prima linea (Shadrach), non fa parte del tavolo di livello superiore. Ma HTML non sembra mi permetterà di fare questo.

C'è un modo migliore, più semantico?

Answer 1

Una cosa è necessario porsi quando si cerca di rendere il vostro markup semantico è quello di quale fine si sta facendo. markup semantico ha valore perché è più facile da stile, e applicare diversi fogli di stile a senza dover personalizzarli per il markup che si sta utilizzando. Essa ha valore perché aiuta l'accessibilità, rendendo più facile per screen reader o motori di rendering alternativi per analizzare in modo appropriato. E a volte ha valore perché motore di ricerca o altri strumenti automatizzati in grado di estrarre informazioni da esso.

A volte, tuttavia, ci si imbatte in un caso che HTML solo non può gestire. Questo sembra essere uno di loro. HTML non ha alcun modo di dati gerarchici nidificazione in tabelle con colonne che non corrispondono alle altre colonne della tabella. Quindi, è necessario fare il meglio con quello che hai. A questo punto, preoccuparsi di rendere più semantica non comprarti più di tanto; si sta facendo qualcosa di abbastanza special-case, che altri fogli di stile, i lettori di schermo, e gli strumenti probabilmente non sa cosa fare con, quindi praticamente qualsiasi soluzione si arriva con questo non è del tutto in contrasto con la finalità degli elementi in questione è OK.

Credo che la soluzione si parla è di circa il meglio che si può fare. Segnare le righe contenenti tabelle nidificate con una classe che indica che non sono come le altre righe, e lo chiamano buono. Se si voleva, è possibile raggruppare insieme con le righe che stanno attaccati utilizzando più elementi <tbody>:

<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

Se si mette la tabella nella prima colonna della riga di dettaglio, rendono abbracciano tutte e quattro le colonne e aggiungere intestazioni di tabella descrittiva al tavolo, allora che dovrebbe fornire alcuni semantica di base mettere in relazione la tabella di dettaglio alla colonna che descrive.

Credo che questo sia 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 attributi dettate dal W3C WAI per aumentare la semantica XHTML esistenti per descrivere strutture complesse come quella che si sta cercando di creare. Forse, se si è aggiunto un aria-describedby attributo alla cella dettaglio tabella descrive, che avrebbe fornito la semantica supplementari 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, ruolo treegrid per le tabelle con i layout gerarchici e righe in espansione. Date uno sguardo attraverso il progetto di ARIA di lavoro e sono sicuro che troverete qualcosa che possa descrivere ciò che si sta cercando di trasmettere.

Answer 3

  

C'è un modo migliore, più semantico?

Sì - non mettere una tabella nidificata in là. Le braccia / gambe devono essere o più colonne sulla tabella originale, o una tabella separata del tutto. Quindi utilizzare i CSS per lo stile a seconda dei casi ¹ .

¹ No, io non so come si potrebbe ottenere lo stesso effetto visivo con HTML semantico e CSS. Ma non è questo il punto. Siete alla ricerca di marcatura semantica - non il modo di renderla adatta con ciò che pensi sia UX appropriata (suggerimento: se si sta utilizzando tabelle per il layout (come siete) allora è solo UX appropriato per gli utenti visivi).

Answer 4

Il tavoli del WAI esercitazione fornisce una semplice introduzione a che fare con tabelle complesse. L'esempio dal post originale potrebbe illustrare una sorta di tavolo multilivello .

Answer 5

A meno che non si dispone di una semantica esplicita per tua informazione non esiste un unico modo per farlo. Si sembrano avere una struttura ad albero all'interno delle righe e alcuni DIV nidificato potrebbe essere utile. Così può essere possibile avere un figlio DIV di una cellula di fila, anche se sarà complessa con cui lavorare. In alternativa si potrebbe cercare di creare tabelle nidificate (tavolo, come i contenuti o una cella).

Se si desidera mantenere la semantica complesse allora HTML non è il modo migliore per farlo e forse si dovrebbe usare sia una rappresentazione XML o RDF. Questi possono entrambi essere trasformati in HTML per la visualizzazione, preservando la semantica.