Marquage sémantique pour tables HTML complexes ou imbriquées?

sauf si vous avez une sémantique explicite pour vos informations, il n'y a pas de moyen unique de le faire. Vous semblez avoir une structure de type arbre à l'intérieur des rangées et que certains DIV imbriqués peuvent être utiles. Il peut donc être possible d'avoir un enfant divisé d'une cellule de rangée, bien qu'il soit complexe de travailler avec. Sinon, vous pouvez essayer de créer des tables imbriquées (table comme contenu ou une cellule).

Si vous souhaitez conserver une sémantique complexe, HTML n'est pas le meilleur moyen de le faire et peut-être que vous devriez utiliser une représentation XML ou une RDF. Ceux-ci peuvent tous deux être transformés en HTML pour l'affichage tout en préservant la sémantique.

Si vous mettez la table dans la première colonne de la ligne de détail, faites-la couvrir les quatre colonnes et ajoutez des en-têtes de table descriptifs à la table, puis fournir une certaine sémantique de base pour relier la table de détail à la colonne qu'elle décrit.

Je pense que c'est une affaire, cependant, où les sémantiques traditionnelles HTML ne transmettent pas ce que vous recherchez, et vous devriez penser à utiliser XHTML et à l'externer avec Aria attributs licenciés par le W3C Wai pour augmenter la sémantique XHTML existante pour décrire des structures complexes comme celle que vous essayez de créer. Peut-être que si vous avez ajouté un Aria-Dreamsded attribut de la cellule le détail Le tableau décrit, qui fournirait la sémantique supplémentaire que vous recherchez: P>

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

Une chose que vous devez vous poser quand vous essayez de rendre votre balise plus sémantique est de savoir quelle extrémité vous le faites. Le balisage sémantique a une valeur, car il est plus facile de styler et appliquer différentes feuilles de style pour ne pas avoir à les personnaliser pour le balisage que vous utilisez. Il a de la valeur car elle aident l'accessibilité, ce qui facilite la tâche des scénaristes ou des moteurs de rendu alternatifs pour l'analyser de manière appropriée. Et parfois, il a de la valeur car le moteur de recherche ou d'autres outils automatisés peut extraire des informations de celui-ci.

Parfois, vous rencontrez un cas que HTML ne peut tout simplement pas gérer. Cela semble être l'un d'entre eux. HTML n'a aucun moyen d'imbriquer des données hiérarchiques dans des tables avec des colonnes qui ne correspondent pas aux autres colonnes de la table. Donc, vous devez faire le meilleur avec ce que vous avez. À ce stade, vous craignez de le rendre plus sémantique ne vous achète pas beaucoup; vous faites quelque chose de cas assez spécial, que d'autres feuilles de style, des lecteurs d'écran et des outils ne sauront probablement pas quoi faire avec, donc à peu près toute solution que vous proposez sans contraire au but des éléments En question, c'est d'accord.

Je pense que la solution que vous mentionner est à propos du mieux que vous puissiez faire. Marquez ces lignes contenant des tables imbriquées avec une classe qui indique qu'ils ne sont pas comme les autres rangées et l'appelent bien. Si vous le souhaitez, vous pouvez les regrouper avec les lignes qu'ils sont attachées à l'utilisation de plusieurs éléments éléments: xxx