How can I construct a table header than spans multiple rows in HTML?

I would like to construct a table as follows:

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

Seeing as how there is only 1 line for TH elements, how can I construct the header row such as the columns line up? Hierarchical tables doesn't seem like a good option because the column widths won't line up, and I also can't use two rows with TH tags with colspan.

This is how I would do it (working fiddle at http://jsfiddle.net/7pDqb/) Tested 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>

Were you accidentally using rowspan instead of colspan? Or did you accidentally forget a closing </tr> tag?

Extending off of tvanfosson's answer, I'd use the scope attribute on the th elements for semantic and accessibility purposes:

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>

However, besides the case of header cell spanning multiple columns, tables that have header cell spanning two rows are also very often seen.

Here is an example. See col 5 and data5 below:

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

Here is the fiddle.

W3C's Web Accessibility Initiative (WAI) website says to use the markup structure shown below.

(Note that the rendered markup in the example table on the website is slightly different than what they show in the sample markup. See link and inspect the example table.)

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>