1. 今回の目的の表
まずはヘッダーとデータを一つの要素として持ち、それぞれの要素を結合した形式
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>サンプル表</title>
<style>
table {
border-collapse: collapse;
width: 600px;
}
th, td {
border: 1px solid #999;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<br>
<table>
<thead>
<tr>
<th rowspan="5">No.</th>
<th rowspan="5">項目名</th>
<th colspan="5">サンプルヘッダー</th>
<th rowspan="5">備考</th>
</tr>
<tr>
<th>上段</th>
</tr>
<tr>
<th>上段</th>
</tr>
<tr>
<th>上段</th>
</tr>
<tr>
<th>上段</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="5">1</td>
<td rowspan="5">データA</td>
<td colspan="5">値1</td>
<td rowspan="5">テスト用コメント</td>
</tr>
<tr>
<td>値3</td>
</tr>
<tr>
<td>値3</td>
</tr>
<tr>
<td>値3</td>
</tr>
<tr>
<td>値3</td>
</tr>
</tbody>
</table>
</body>
</html>
2. 別のパターン
次にヘッダー、データを一つのデータとして持って、見た目だけ縦に表示させる形式
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>サンプル表</title>
<style>
table {
border-collapse: collapse;
width: 600px;
}
th, td {
border: 1px solid #999;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
/* 「サンプルヘッダー」列（縦に要素2つを持つ） */
.complex-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 80px;
}
.complex-header .title {
font-weight: bold;
border-bottom: 1px solid black;
width: 100%;
padding-bottom: 2px;
}
.complex-header .sub {
display: flex;
flex-direction: column;
line-height: 1.2;
margin-top: 3px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>No.</th>
<th>項目名</th>
<th>
<div class="complex-header">
<div class="title">サンプルヘッダー</div>
<div class="sub">
<div>上段</div>
<div>中段</div>
<div>下段</div>
</div>
</div>
</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>データA</td>
<td>
<div>値1</div>
<div>値2</div>
<div>値3</div>
</td>
<td>テスト用コメント</td>
</tr>
</tbody>
</table>
</body>
</html>
