web-dev-qa-db-fra.com

Comment puis-je construire un en-tête de table qui s'étend sur plusieurs lignes en HTML?

Je voudrais construire un tableau comme suit:

|   Major Heading 1    |  Major Heading 2    |
|   Minor1  |  Minor2  | Minor3  |  Minor4   |
----------------------------------------------
|   col1    |   col2   |   col3  |    col4   |
rest of table ...

Vu qu'il n'y a qu'une seule ligne pour les éléments TH, comment puis-je construire la ligne d'en-tête telle que les colonnes alignées? Les tables hiérarchiques ne semblent pas être une bonne option car la largeur des colonnes ne s'aligne pas et je ne peux pas non plus utiliser deux lignes avec des balises TH avec colspan.

htmlhtml-table
63
statguy

Voici comment je le ferais (je travaillais avec http://jsfiddle.net/7pDqb/ ) Testé en Chrome.

th, td { border: 1px solid black }
<table>
  <thead>
    <tr>
      <th colspan="2">Major 1</th>
      <th colspan="2">Major 2</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
      <td>data4</td>
    </tr>
  </tbody>
</table>

82
tvanfosson

Avez-vous utilisé accidentellement rowspan au lieu de colspan? Ou avez-vous accidentellement oublié une balise </tr> de fermeture?

Pour étendre la réponse de tvanfosson, j'utiliserais l'attribut scope SUR LES &EACUTE;L&EACUTE;MENTS th à des fins sémantiques et d'accessibilité :

th, td { border: 1px solid black }
<table>
  <thead>
    <tr>
      <th colspan="2" scope='colgroup'>Major Heading 1</th>
      <th colspan="2" scope='colgroup'>Major Heading 2</th>
    </tr>
    <tr>
      <th scope='col'>Minor1</th>
      <th scope='col'>Minor2</th>
      <th scope='col'>Minor3</th>
      <th scope='col'>Minor4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
      <td>col4</td>
    </tr>
  </tbody>
</table>

20
rink.attendant.6

Toutefois, outre le cas de cellules d'en-tête couvrant plusieurs colonnes, les tables comportant une cellule d'en-tête couvrant deux lignes sont également très souvent consultées. 

Voici un exemple. Voir col 5 et data5 ci-dessous:

    <table>
        <thead>
            <tr>
                <th colspan="2">Major 1</th>
                <th colspan="2">Major 2</th>
                <th rowspan="2">col 5</th>
            </tr>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
            </tr>
        </tbody>
    </table>

Voici le violon .

5
gm2008

Le site Web de la WAI (Web Accessibility Initiative) du W3C recommande d'utiliser la structure de balisage indiquée ci-dessous.

(Notez que le balisage rendu dans l'exemple de tableau sur le site Web diffère légèrement de celui affiché dans l'exemple de balisage. Voir le lien et inspectez le tableau.)

Source: https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-two-tier-headers

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>
0
cantera