今回は表の作り方です。表を作るのは簡単です。デザインを整えるにはCSSが不可欠になります。今回は表の枠線、配置(右寄せ、中央)、背景色などは扱いません。デザインがイマイチでも少しガマンしてください。
表(table)
まずはシンプルな表の例を見てください。
table要素
使用例:
<!DOCTYPE html>
<html lang="ja">
<body>
<table border="1">
<tr><td>りんご</td><td>みかん</td><td>マンゴー</td></tr>
<tr><td>150円</td><td>100円</td><td>500円</td></tr>
</table>
</body>
</html>
HTML表示

table要素のborderは枠線の太さを表していますがCSSで書くべき内容なので通常は書きません(CSSを使わないときは必要、でもかっこ悪い)。
表の中身をセルと呼びます。セルは<td>表のデータ(セル)</td>のように記述します。山かっこ<>の数や</td>忘れなどが間違えやすいので注意しましょう。
表のタイトル(caption要素)と見出しセル(th要素)
表に名前をつけたいときはcaption(キャプション)要素を使います。
caption要素
使用例:
<!DOCTYPE html>
<html lang="ja">
<body>
<table border="1">
<caption>好きな果物の値段表</caption>
<tr><td>りんご</td><td>みかん</td><td>マンゴー</td></tr>
<tr><td>150円</td><td>100円</td><td>500円</td></tr>
</table>
</body>
</html>
HTML表示

表の1番上はよく見出しの項目として使い、データとは別のものとして扱います。そのときは表の見出しセルth要素を使います。
th要素
使用例:
<!DOCTYPE html>
<html lang="ja">
<body>
<table border="1">
<caption>鉄道の最高時速</caption>
<tr><th>列車名</th><th>最高時速</th><th>走行路線</th></tr>
<tr><td>はやぶさ</td><td>320km/h</td><td>東北新幹線</td></tr>
<tr><td>スカイライナー</td><td>160km/h</td><td>成田スカイアクセス線</td></tr>
<tr><td>新快速</td><td>130km/h</td><td>東海道本線・山陽本線</td></tr>
</table>
</body>
</html>
HTML表示

表見出しセルは(自動で)太文字&中央揃えとなります。ここまで理解できれば表を作るのは難しくありません。
縦方向のセル結合(rowspan)と横方向のセル結合(colspan)
縦方向のセル結合
使用例:
<!DOCTYPE html>
<html lang="ja">
<body>
<table border="1">
<caption>鉄道の最高速度</caption>
<tr><th>列車名</th><th>最高速度</th><th>走行路線</th></tr>
<tr><td>特急ひたち</td><td rowspan="3">130km/h</td><td>常磐線</td></tr>
<tr><td>サンダーバード</td><td>湖西線</td></tr>
<tr><td>新快速</td><td>東海道本線・山陽本線</td></tr>
</table>
</body>
</html>
HTML表示

縦方向のセル結合はrowspan要素を用います。後ろの数字は結合したいセルの個数を書きます。注意すべきことはサンダーバードや新快速の「行」では結合される部分の<td></td>は記入不要ということです。
それでは横方向の例も見てみましょう。
横方向のセル結合
使用例:
<!DOCTYPE html>
<html lang="ja">
<body>
<table border="1">
<tr><th colspan="3">鉄道の最高速度まとめ</th></tr>
<tr><td>こまち・はやぶさ</td><td>320km/h</td><td>東北新幹線<br>(宇都宮〜盛岡)</td></tr>
<tr><td>京成スカイライナー</td><td>160km/h</td><td>成田スカイアクセス線<br>(印旛日本医大~空港第2ビル)</td></tr>
<tr><td>特急ひたち</td><td>130km/h</td><td>常磐線<br>(日暮里~日立)</td></tr>
</table>
</body>
</html>
HTML表示

横方向のセル結合はcolspan要素を用います。使い方は縦方向と同じです。
最初に書いたように表のデザインがイマイチだと思います。特に枠線が二重になってしまうなど、標準の表では満足できません。デザインについてはCSSの表(テーブル)で扱います。