2026年4月

今回は表の作り方です。表を作るのは簡単です。デザインを整えるにはCSSが不可欠になります。今回は表の枠線、配置（右寄せ、中央）、背景色などは扱いません。デザインがイマイチでも少しガマンしてください。 表（table） まずはシンプルな表の例を見てください。 table要素 使用例： &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;body> &lt;table border="1"> &lt;tr>&lt;td>りんご&lt;/td>&lt;td>みかん&lt;/td>&lt;td>マンゴー&lt;/td>&lt;/tr> &lt;tr>&lt;td>１５０円&lt;/td>&lt;td>１００円&lt;/td>&lt;td>５００円&lt;/td>&lt;/tr> &lt;/table> &lt;/body> &lt;/html> HTML表示 table要素のborderは枠線の太さを表していますがCSSで書くべき内容なので通常は書きません（CSSを使わないときは必要、でもかっこ悪い）。 表の中身をセルと呼びます。セルは&lt;td>表のデータ（セル）&lt;/td>のように記述します。山かっこ＜＞の数や&lt;/td>忘れなどが間違えやすいので注意しましょう。 表のタイトル(caption要素)と見出しセル(th要素) 表に名前をつけたいときはcaption(キャプション)要素を使います。 caption要素 使用例： &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;body> &lt;table border="1"> &lt;caption>好きな果物の値段表&lt;/caption> &lt;tr>&lt;td>りんご&lt;/td>&lt;td>みかん&lt;/td>&lt;td>マンゴー&lt;/td>&lt;/tr> &lt;tr>&lt;td>１５０円&lt;/td>&lt;td>１００円&lt;/td>&lt;td>５００円&lt;/td>&lt;/tr> &lt;/table> &lt;/body> &lt;/html> HTML表示 表の1番上はよく見出しの項目として使い、データとは別のものとして扱います。そのときは表の見出しセルth要素を使います。 th要素 使用例： &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;body> &lt;table border="1"> &lt;caption>鉄道の最高時速&lt;/caption> &lt;tr>&lt;th>列車名&lt;/th>&lt;th>最高時速&lt;/th>&lt;th>走行路線&lt;/th>&lt;/tr> &lt;tr>&lt;td>はやぶさ&lt;/td>&lt;td>320km/h&lt;/td>&lt;td>東北新幹線&lt;/td>&lt;/tr> &lt;tr>&lt;td>スカイライナー&lt;/td>&lt;td>160km/h&lt;/td>&lt;td>成田スカイアクセス線&lt;/td>&lt;/tr> &lt;tr>&lt;td>新快速&lt;/td>&lt;td>130km/h&lt;/td>&lt;td>東海道本線・山陽本線&lt;/td>&lt;/tr> &lt;/table> &lt;/body> &lt;/html> HTML表示 表見出しセルは（自動で）太文字＆中央揃えとなります。ここまで理解できれば表を作るのは難しくありません。 縦方向のセル結合(rowspan)と横方向のセル結合(colspan) 縦方向のセル結合 使用例： &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;body> &lt;table border="1"> &lt;caption>鉄道の最高速度&lt;/caption> &lt;tr>&lt;th>列車名&lt;/th>&lt;th>最高速度&lt;/th>&lt;th>走行路線&lt;/th>&lt;/tr> &lt;tr>&lt;td>特急ひたち&lt;/td>&lt;td rowspan="3">130km/h&lt;/td>&lt;td>常磐線&lt;/td>&lt;/tr> &lt;tr>&lt;td>サンダーバード&lt;/td>&lt;td>湖西線&lt;/td>&lt;/tr> &lt;tr>&lt;td>新快速&lt;/td>&lt;td>東海道本線・山陽本線&lt;/td>&lt;/tr> &lt;/table> &lt;/body> &lt;/html> HTML表示 縦方向のセル結合はrowspan要素を用います。後ろの数字は結合したいセルの個数を書きます。注意すべきことはサンダーバードや新快速の「行」では結合される部分の&lt;td>&lt;/td>は記入不要ということです。 それでは横方向の例も見てみましょう。 横方向のセル結合 使用例： &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;body> &lt;table border="1"> &lt;tr>&lt;th colspan="3">鉄道の最高速度まとめ&lt;/th>&lt;/tr> &lt;tr>&lt;td>こまち・はやぶさ&lt;/td>&lt;td>320km/h&lt;/td>&lt;td>東北新幹線&lt;br>（宇都宮〜盛岡）&lt;/td>&lt;/tr> &lt;tr>&lt;td>京成スカイライナー&lt;/td>&lt;td>160km/h&lt;/td>&lt;td>成田スカイアクセス線&lt;br>（印旛日本医大～空港第2ビル）&lt;/td>&lt;/tr> &lt;tr>&lt;td>特急ひたち&lt;/td>&lt;td>130km/h&lt;/td>&lt;td>常磐線&lt;br>（日暮里～日立）&lt;/td>&lt;/tr> &lt;/table> &lt;/body> &lt;/html> HTML表示 横方向のセル結合はcolspan要素を用います。使い方は縦方向と同じです。 最初に書いたように表のデザインがイマイチだと思います。特に枠線が二重になってしまうなど、標準の表では満足できません。デザインについてはCSSの表（テーブル）で扱います。

2026年4月

HTML入門05 画像の表示

HTML入門04 表（テーブル）の作成