<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>表基本1</title>
</head>
<body>
<h1>表基本1</h1>
<article>
<h2>いろいろな表</h2>
<section>
<h3>基本形</h3>
<table>
<caption>表のタイトル(省略可)</caption>
<thead>
<tr>
<th>見出し</th><th>見出しA</th><th>見出しB</th><th>見出しC</th>
</tr>
</thead>
<tbody>
<!--
4行2列の表にせよ
見出し1データA-1データB-1データC-1
見出し2データA-2データB-2データC-2
-->
</tbody>
</table>
</section>
<section>
<h3>セル結合</h3>
<table>
<caption>表のタイトル(省略可)</caption>
<colgroup span="4" style="background:#b7dbff">
<thead>
<tr>
<th>見出し</th><th>見出しA</th><th>見出しB</th><th>見出しC</th>
</tr>
</thead>
<tbody>
<!--
・データA-1とデータA-2を結合せよ
・データC-1とデータC-2を結合せよ
-->
<tr>
<th>見出し1</th><td>データA-1</td><td>データA-2</td><td>データC-1</td>
</tr>
<tr>
<th>見出し2</th><td>データA-2</td><td>データB-2</td><td>データC-2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">※色はスタイルシート</td>
</tr>
</tfoot>
</table>
</section>
<section>
<h3>colgroup</h3>
<table>
<caption>表のタイトル(省略可)</caption>
<!--
グループA、グループB、グループCを各々colgroupとしてまとめよ。
-->
<colgroup><col style="background:#c9ff93"><col style="background:#ffbf7f"></colgroup><colgroup style="background:#b7dbff">
<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>
</tbody>
<tfoot>
<tr>
<td colspan="5">※色はスタイルシート</td>
</tr>
</tfoot>
</table>
</section>
</article>
</body>
</html>