Come posso costruire un'intestazione di tabella che si estende su più righe in HTML?

Question

desidero costruire una tabella come segue:

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

Visto che c'è solo 1 linea per elementi TH, come posso costruire la riga di intestazione come le colonne allineare? Le tabelle gerarchiche non sembrano una buona opzione perché le larghezze delle colonne non si allineano e non posso nemmeno usare due righe con tag TH con colspan.

Answer 1

Questo è il modo in cui lo farei (funzionamento violino al http://jsfiddle.net/7pDqb/) Testato in 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

Were accidentalmente utilizzando rowspan invece di colspan? O hai dimenticato per sbaglio un tag di chiusura </tr>?

Estendere off di risposta di tvanfosson, userei il scope attribute on the th elements per semantica e accessibility scopi:

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

Tuttavia, oltre al caso della cella di intestazione si estende su più colonne, tabelle che hanno anche le celle di intestazione che si estendono su due file sono viste molto spesso.

Ecco un esempio. Vedere col 5 e data5 di seguito:

<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> 

Ecco il fiddle.