html ทำตาราง ให้ tag th ซ้อนกันตามรูปนี้ จะต้องเขียนอย่างไรครับ

	<table>
		<thead bgcolor="red">
			<tr>
				<td colspan="4">1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>	
		</tbody>
	</table>

<style>
	th{
		width: 100px;
		border: 1px solid red;
	}
	td{
		border: 1px solid gray;
		text-align: center;
	}
	.box{
		border: 1px dotted blue;
	}
</style>
<div>
	
<table class="box">
	<tr>
		<th style="background-color: red;">xxxxx</th>
	</tr>
	<tr>
		<td>
			<table>
				<tr>
					<th>1</th>
					<th>1</th>
					<th>1</th>
					<th>1</th>
				</tr>
				<tr>
					<td>2</td>
					<td>2</td>
					<td>2</td>
					<td>2</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</div>