<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>表</title>
<style>
table{
width:80%;
border-collapse:separate;
border-spacing:0.5em 0.1em;
}
.groupA{
background:#c9ff93;
}
.groupB{
background:#ffbf7f;
}
.groupC{
background:#b7dbff;
}
tbody tr:nth-child(1){
height:4em;
}
tbody tr:nth-child(3){
height:2em;
}
tbody tr:nth-child(1) td:nth-child(2){
}
tbody tr:nth-child(1) td:nth-child(3){
}
tbody tr:nth-child(1) td:nth-child(4){
}
tbody tr:nth-child(1) td:nth-child(5){
vertical-align:baseline;
}
tbody tr:nth-child(2) td{
border:2px red dotted;
}
tbody tr:nth-child(3) td{
border:2px blue solid;
}
td:nth-of-type(2n+1){
font-size:2em;
}
</style>
</head>
<body>
<h1>表</h1>
<article>
<h2>基本問題</h2>
<figure>
<table>
<caption>表のタイトル</caption>
<colgroup><col class="groupA"><col span="2" class="groupB"></colgroup><colgroup span="2" class="groupC">
<thead>
<tr>
<th>グループA</th><th>グループB</th><th>グループB</th><th>グループC</th><th>グループC</th>
</tr>
</thead>
<tbody>
<tr>
<td>グループA-1</td><td>グループB1-1</td><td>グループB2-1</td><td>グループC1-1</td><td>グループC2-1</td>
</tr>
<tr>
<td>グループA-2</td><td>グループB1-2</td><td>グループB2-2</td><td>グループC1-2</td><td>グループC2-2</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
</figure>
</article>
</body>
</html>