Semantisches Markup für komplexe oder verschachtelte HTML-Tabellen?

Question

Ich mag den besten Weg, wissen, tabellarische Daten auf einer Webseite zu markieren, wenn Datenzeilen komplexe Daten enthalten, das nicht in einer einzigen Tabellenzeile passen.

Hier ist ein konkretes Beispiel. Die erste Zeile hat eine Liste von zusätzlichen Informationen an sie über Arme und Beine.

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

Gibt es eine gute Möglichkeit, diese bis andere zu markieren, als eine übergreif Zelle mit einer verschachtelten Tabelle wie folgt enthalten?

+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+
| +-------+------+-+      |
| |       |      | |      |
| +-------+------+-+      |
| |       |      | |      |
| +-------+------+-+      |
+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+
|       |  |        |     |
+-------+--+--------+-----+

Ich bin nicht ganz zufrieden mit diesem, weil der äußeren Tabelle vier Spalten mit spezifischen Positionen und Bedeutungen; aber die zweite Reihe erstreckt sich über alle vier Spalten und enthält etwas anderes. Ich mag diese Informationen wirklich einen Teil der ersten Position (Shadrach), die nicht Teil der Top-Level-Tabelle sein. Aber HTML scheint nicht, mir zu erlauben, dies zu tun.

Gibt es einen besseren, semantischen Weg?

Answer 1

Eine Sache, die Sie brauchen, um sich zu fragen, wenn sie versuchen, Ihr Markup mehr semantische zu machen, ist zu dem, was Sie am Ende es tun. Semantisches Markup hat Wert, weil es leichter zu frisieren ist, und gelten unterschiedliche Stylesheets, ohne sie für die Markup anpassen müssen Sie verwenden. Es hat einen Wert, weil es Zugänglichkeit hilft, macht es einfacher für Screenreadern oder alternativer Rendering-Engines es in geeigneter Weise zu analysieren. Und manchmal hat es Wert, weil Suchmaschine oder andere automatisierte Tools können Informationen aus extrahieren.

Manchmal aber Sie über einen Fall kommen, dass HTML kann einfach nicht damit umgehen. Dies scheint einer von ihnen zu sein. HTML hat keine Möglichkeit, hierarchische Daten der Verschachtelung mit Spalten in Tabellen, die nicht auf die anderen Spalten der Tabelle übereinstimmen. So müssen Sie das Beste mit dem tun, was du hast. An diesem Punkt, sich Gedanken über die es mehr semantische kaufen Sie nicht allzu viel; Sie tun etwas ziemlich Spezialfall, dass andere Stylesheets, Screenreadern und Tools wahrscheinlich nicht wissen, was damit zu tun, so ziemlich jede Lösung, die Sie mit, dass kommen zu dem Zweck der Elemente nicht völlig konträr in Frage ist in Ordnung.

ich glaube, die Lösung, die Sie erwähnen, ist über das Beste, was Sie tun können. Markieren Sie die Zeilen enthalten, verschachtelte Tabellen mit einer Klasse, die angibt, dass sie nicht wie die anderen Reihen sind, und nennt es gut. Wenn Sie wollten, könnten Sie gruppieren sie zusammen mit den Reihen sie mehrere <tbody> Elemente zu verwenden angebracht sind:

<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

Wenn Sie die Tabelle in der ersten Spalte der Detailzeile setzen, machen es alle vier Spalten erstrecken, und beschreibende Tabellenüberschriften der Tabelle hinzufügen, dann sollte, dass einige grundlegende Semantik bieten die Detailtabelle auf die Spalte, dass es beziehen beschreibt.

Ich denke, dies ist ein Fall, obwohl, wo die traditionelle HTML-Semantik nicht zu vermitteln, was Sie suchen, und Sie sollen über die Nutzung von XHTML denken und es mit ARIA Attribute von der W3C ausgebreitet WAI augment bestehende XHTML Semantik komplexe Strukturen wie das beschreiben, die Sie versuchen, zu erstellen. Vielleicht, wenn Sie hinzugefügt, um ein aria-describedby Attribut an die Zelle im Detail Tabelle beschreibt, dass die zusätzliche Semantik bereitstellen würden Sie suchen:

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

Es gibt eine Vielzahl von aria-Rollen und Attribute Sie nützlich sein können, zum Beispiel: treegrid Rolle für Tabellen mit hierarchischen Layouts und erweitern Reihen. Werfen Sie einen Blick durch den ARIA Arbeitsentwurf und ich bin sicher, werden Sie etwas finden, das beschreiben, was Sie versuchen zu vermitteln.

Answer 3

  

Gibt es einen besseren, semantischen Weg?

Ja - stellt eine verschachtelte Tabelle nicht drin. Die Arme / Beine sollten entweder mehr Spalten auf dem Originaltisch sein, oder eine separate Tabelle zusammen. Dann entsprechend verwendet CSS Stil ¹ .

¹ Nein, ich weiß nicht, wie Sie möglicherweise die gleiche visuelle Wirkung mit semantischen HTML und CSS bekommen. Aber das ist nicht der Punkt. Sie sind für semantisches Markup suchen - nicht, wie es mit fit zu machen, was Sie denken, ist UX angemessen (Hinweis: Wenn Sie Tabellen für das Layout verwenden (wie Sie sind), dann ist es nur UX geeignet für visuelle Nutzer).

Answer 4

Die WAI Tische Tutorial bietet eine sehr einfache Einführung mit komplexen Tabellen zu tun haben. Das Beispiel aus der ursprünglichen Nachricht könnte eine Art veranschaulichen Multi-Level-Tabelle .

Answer 5

Wenn Sie explizite Semantik zu Ihrer Information haben, gibt es keinen einzigen Weg, dies zu tun. Sie scheinen eine baumartige Struktur in den Reihen zu haben und einige verschachtelten DIV nützlich sein. So kann es möglich sein, ein DIV Kind einer Reihe Zelle zu haben, obwohl es mit zur Arbeit komplex sein wird. Alternativ könnten Sie versuchen, verschachtelte Tabellen (TABLE als Inhalt oder eine Zelle) zu erstellen.

Wenn Sie komplexe Semantik erhalten wollen, dann ist HTML nicht der beste Weg, es zu tun und vielleicht sollten Sie entweder eine XML-Darstellung oder RDF verwenden. Diese können sowohl in HTML für die Anzeige umgewandelt werden, während der Semantik zu erhalten.