Comment puis-je construire un en-tête de table sur plusieurs lignes 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 ... 

É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 telle que les colonnes soient alignées? Les tables hiérarchiques ne semblent pas être une bonne option car les largeurs de colonne ne seront pas alignées et je ne peux pas non plus utiliser deux lignes avec des balises TH avec colspan.

    Voici comment je le ferais (violon de travail sur http://jsfiddle.net/7pDqb/ ) Testé dans Chrome.

     th, td { border: 1px solid black } 
     
    Major 1 Major 2
    col1 col2 col3 col4
    data1 data2 data3 data4

    Avez-vous utilisé accidentellement rowspan au lieu de colspan ? Ou avez-vous oublié accidentellement une fermeture ?

    En prolongeant la réponse de tvanfosson, j’utiliserais l’ atsortingbut scope sur les éléments à des fins de sémantique et d’ accessibilité :

     th, td { border: 1px solid black } 
     
    Major Heading 1 Major Heading 2
    Minor1 Minor2 Minor3 Minor4
    col1 col2 col3 col4

    Cependant, outre le cas de la cellule d’en-tête couvrant plusieurs colonnes, les tables comportant une cellule d’en-tête s’étendant sur deux lignes sont également très fréquentes.

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

      
    Major 1 Major 2 col 5
    col1 col2 col3 col4
    data1 data2 data3 data4 data5

    Voici le violon