Jak skonstruować nagłówek tabeli niż rozciąga się wiele wierszy w HTML?

Question

chciałbym skonstruować tabelę następująco:

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

Widząc jak jak tam jest tylko 1 linia elementów TH, w jaki sposób można skonstruować takie jak wiersz nagłówka kolumny w kolejce? Hierarchiczne tabele nie wydają się być dobrym rozwiązaniem, ponieważ szerokości kolumn nie będą wyrównane, a także nie będę mógł używać dwóch wierszy z tagami TH z colspan.

Answer 1

Tak to zrobię (działa skrzypce pod numerem http://jsfiddle.net/7pDqb/) Przetestowano w 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

Byłaś przypadkowo używając rowspan zamiast colspan? Czy przypadkiem zapomniałeś o zamknięciu tagu </tr>?

Rozszerzanie się odpowiedzi tvanfosson jest, że używam scope attribute on the th elements dla semantyczny i accessibility celom:

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

Jednakże, oprócz przypadku komórki nagłówka obejmującym wiele kolumn, tabel, które mają Komórka nagłówka obejmująca dwa rzędy również jest bardzo często widoczna.

Oto przykład. Zobacz col 5 i data5 poniżej:

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

Oto fiddle.