Jak mogę zbudować nagłówek tabeli obejmujący wiele wierszy w HTML?

Tak bym to zrobił (pracując na skrzypcach

http://jsfiddle.net/7pDqb/
http://jsfiddle.net/7pDqb/) testowane w Chrome.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">

th, td { border: 1px solid black }

<pre class="snippet-code-html lang-html prettyprint-override">

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

Czy przypadkowo użyłeś

rowspan

zamiast

colspan

? A może przypadkowo zapomniałeś zamykającego tagu

& </tr & >

?
Rozszerzając odpowiedź tvanfosson, użyłbym

Atrybut

scope

dla elementów

th

https://developer.mozilla.org/ ... nt/th
do celów semantycznych i

dostępność
http://www.w3.org/WAI/GL/WCAG2 ... .html
:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">

th, td { border: 1px solid black }

<pre class="snippet-code-html lang-html prettyprint-override">

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

Jednak poza przypadkiem, gdy komórka nagłówka obejmuje wiele kolumn, bardzo często występują również tabele, w których komórka nagłówka obejmuje dwa wiersze.
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>

Tutaj

fiddle
http://jsfiddle.net/u3qw0cnn/1/
.

Strona internetowa W3C Internet Accessibility Initiative (WAI) mówi o używaniu struktury znaczników pokazanej poniżej.
(Zwróć uwagę, że wyrenderowane znaczniki w przykładowej tabeli w witrynie internetowej różnią się nieco od tego, co pokazują w przykładowych znacznikach. Zobacz łącze i sprawdź przykładową tabelę).
Źródło:

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

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