根据提供的图像设计 HTML 表格
我需要根据上图中的表格结构制作一个html表格。我尝试了很多方法，但我做不到。
请帮我创建 Html 表格。
P粉1487820962023-09-15 19:08:55
在这里，我在标题单元格上使用 colspan 使其占据多个单元格的宽度，然后在单元格上使用 rowspan 使其垂直扩展多行。
这可以让你 90% 的图片显示出来。垂直/旋转文本是可能的，但不是这个问题的内容，所以我没有做这一部分。
table{
border-collapse: collapse;
}
td,th {
padding: 3px;
border: 1px solid #333;
}
th {
background: #CCC;
}
.blank {
background: #FFF;
border: none;
}
<table>
<thead>
<tr>
<th colspan="3" class="blank"></th>
<th colspan="8">Attribute Name 1</th>
</tr>
</thead>
<thead>
<tr>
<th colspan="3" class="blank"></th>
<th colspan="2">Attribute 1 Value 1</th>
<th colspan="2">Attribute 1 Value 2</th>
<th colspan="2">Attribute 1 Value 3</th>
<th colspan="2">Attribute 1 Value 4</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="32" class="vertical-text">Attribute Name</th>
<th rowspan="4" class="vertical-text">Attribute 2 Value 1</th>
<th>Price Category 1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 3</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="4" class="vertical-text">Attribute 2 Value 2</th>
<th>Price Category 1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 3</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="4" class="vertical-text">Attribute 2 Value 3</th>
<th>Price Category 1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 3</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="4" class="vertical-text">Attribute 2 Value 4</th>
<th>Price Category 1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 3</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Price Category 4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>