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

Question

Je voudrais construire un tableau comme suit :

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

Étant donné qu'il n'y a qu'une seule ligne pour les éléments TH, comment puis-je construire la ligne d'en-tête de manière à ce que les colonnes soient alignées ? Les tableaux hiérarchiques ne semblent pas être une bonne option car la largeur des colonnes ne sera pas alignée, et je ne peux pas non plus utiliser deux lignes avec des balises TH avec colspan.

Answer 1

Voici comment je m'y prendrais (en travaillant à la bricole) http://jsfiddle.net/7pDqb/ ) Testé dans 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>

Answer 2

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

Dans le prolongement de la réponse de tvanfosson, j'utiliserais la fonction scope de l'attribut th éléments pour la sémantique et accessibilité objectifs :

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>

Answer 3

Toutefois, outre le cas où la cellule d'en-tête s'étend sur plusieurs colonnes, les tableaux dont la cellule d'en-tête s'étend sur deux rangées sont également très fréquents.

Voici un exemple. Voir col 5 y 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 .

Answer 4

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

(Notez que le balisage rendu dans le tableau d'exemple sur le site Web est légèrement différent de ce qu'ils montrent dans le balisage d'exemple. Voir le lien et inspecter le tableau d'exemple).

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>