Un doit-il être à l'intérieur d'un

StackOverflow https://stackoverflow.com/questions/5872924

Question

Une ligne de table (<tr>) doit-elle être dans un corps de table (<tbody>), si la table a un corps de table, ou peut-elle exister en dehors du corps de la table? 

<table>
    <tr>
      <td colspan='2'>...</td>
    </tr>

    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>

    <tr>
      <td colspan='2'>...</td>
    </tr>

    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>

</table>
Était-ce utile?

La solution

Non, le <tr> peut être dans <thead>, <tbody>, <tfoot> ou il ne doit être dans aucun d'entre eux.

Autres conseils

Contrairement à ce que dit Terrill Thomson, une table avec des balises <tr> en dehors des balises <thead>, <tfoot> et <tbody> mais à l'intérieur des balises <table> sera validée par rapport aux balises Service de validation de balisage W3C .

Ce document a été vérifié avec succès comme HTML 4.01 transitionnel: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
  </head>
  <body>
    <table>
      <thead>
        <th colspan="2">head1</th>
        <th>head2</th>
      </thead>
      <tfoot>
        <th colspan="2">foot1</th>
        <th>foot2</th>
      </tfoot>

      <tr><td colspan="3">this row is outside of thead and tfoot</td></tr>

      <tbody>
        <tr>
          <td>1-1</td>
          <td>1-2</td>
          <td>1-3</td>
        </tr>
        <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>3-3</td>
        </tr>
        <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
        </tr>
      </tbody>
  </body>
</html>

<tbody> est utilisé pour marquer le corps de votre <table>, si votre table contient des éléments <thead> (en-tête de table) ou <tfoot> (pied de page).Si votre table ne contient pas ces éléments, vous êtes libre de ne pas utiliser <tbody>.

L'utilisation correcte serait: 

<table>
<thead><tr><th>Item          </th><th>Cost </th></tr></thead>
<tbody><tr><td>Stack Overflow</td><td>Free </td></tr>
       <tr><td>Something cool</td><td>$1.00</td></tr></tbody>
</table>

Spécification HTML4 des tableaux

Si vous avez un <tr> en dehors d'un <tbody>, la page ne validera pas: http://validator.w3.org

Comme d'autres l'ont noté, <tbody> est facultatif sauf si vous utilisez <thead> ou <tfoot>. La principale raison d'utiliser ces deux derniers éléments est que l'en-tête et le pied de page sont répétés sur chaque page si un long tableau est imprimé.

On dirait que vous créez peut-être quelque chose comme un calendrier, où vous souhaitez avoir des lignes alternées de <th> (par exemple, pour les dates) et <td> (par exemple, pour les événements à cette date). Si tel est le cas, vous ne devriez pas envelopper les lignes alternées dans <thead> et <tbody> - cela risquerait de dérouter les navigateurs lors de l'impression de la page. Si vous laissez simplement les éléments de regroupement de côté, votre tableau sera validé. Cependant, certains lecteurs d'écran peuvent être déroutés par ce balisage et appliquer la rangée d'en-têtes la plus haute à toutes les cellules situées en dessous. Pour un tableau complexe comme celui-ci, vous devrez ajouter un balisage supplémentaire pour vous assurer que les lecteurs d'écran comprennent comment le tableau est organisé. Voici votre tableau avec un balisage accessible: 

<table summary="A brief description of how the table is organized, for screen reader users">
  <tr>
    <th colspan='2' id="header1">...</th>
  </tr>
  <tr>
    <td headers="header1">...</td>
    <td headers="header1">...</td>
  </tr>
  <tr>
    <th colspan='2' id="header2">...</th>
  </tr>
  <tr>
    <td headers="header2">...</td>
    <td headers="header2">...</td>
  </tr>
</table>

Vous pouvez également vous demander si les données peuvent être organisées en plusieurs tableaux ou si une version alternative peut être fournie qui serait plus facile à utiliser pour les utilisateurs de lecteurs d'écran. Par exemple, un calendrier d'événements pourrait en outre être présenté comme une liste d'événements.

est facultatif, donc la réponse est "oui peut être à l'extérieur" - voir http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 .

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top