web-dev-qa-db-fra.com

Comment coder sémantiquement une table imbriquée HTML qui s'aligne (et s'associe) avec les en-têtes de sa table parent

Modifier: la réponse sélectionnée contient un lien vers le violon de travail que j'ai pu composer sans utiliser de table imbriquée.

Je veux coder sémantiquement un tableau en HTML avec une mise en page comme l'image ci-dessous. Malheureusement, je n'ai pas pu trouver quelque chose de semblable ici sur le réseau.

enter image description here

J'ai pu forcer le look en définissant manuellement la largeur des cellules, mais je veux m'assurer que le code que je produis a du sens, et je ne pense pas que ce soit le cas, car sans définir manuellement les largeurs, le rendu standard semble plus comme l'image suivante.

enter image description here

Jusqu'à présent, le code problématique que j'ai trouvé ressemble à ceci:

<table>
  <thead>
    <tr>
      <th scope="col">Type of Loss Dollar</th>
      <th scope="col">Reserve Amount</th>
      <th scope="col">Paid Amount</th>
      <th scope="col">Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <th scope="row">Medical</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Indemnity</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Expense</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr>
          </tbody>
        </table>
      </td><td>
        TOTAL
      </td>
    </tr>
  </tbody>
</table>
htmlhtml-tablesemantic-markup
24
Evan Driscoll

Sans les images, c'est un peu difficile à dire, mais je pense qu'une meilleure solution que les tables imbriquées serait d'utiliser simplement les attributs colspan et rowspan.

Edit: En voyant les images, je dirais que vous pouvez très certainement y parvenir en utilisant rowspan (et colspan comme vous l'utilisez déjà).

De plus, vous n'avez pas besoin de définir l'attribut scope s'il s'agit de "col". Il est par défaut "col".

Edit: Comme le souligne Marat Tanalin, la valeur par défaut de l'attribut scope est en fait auto ce qui "fait appliquer la cellule d'en-tête à un ensemble de cellules sélectionnées en fonction du contexte". Et qui, selon mon expérience, agit exactement de la même manière que le définir sur "col" (pour les lecteurs d'écran).

Edit: Voici deux excellents articles sur le balisage des tableaux avancés: http://www.456bereastreet.com/archive/200910/use_the_th_element_to_specify_row_and_column_headers_in_data_tables/ & http://www.456bereastreet.com/archive/200410/bring_on_the_tables /

Edit: Voici le violon présentant le comportement souhaité (visuellement au moins) et le code source de ce violon suit:

<table border="1">
  <thead>
    <tr>
      <th>Status</th>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3">Open</td>
      <td>Medical</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td rowspan="3">TOTAL</td>
    </tr><tr>
      <td>Indemnity</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr><tr>
      <td>Expense</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>
19
powerbuoy

oui, comme le suggèrent tous les voyants ci-dessus, il s'agit de l'envergure.

voici une réécriture de votre code:

<table>
  <thead>
    <tr>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
      <th>Last Heading</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>Medical</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td rowspan="3">TOTAL</td>
    </tr><tr>
      <td>Indemnity</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr><tr>
      <td>Expense</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>
1
caitriona