一つ前の章では3種類のリストについて学習しました。
今回はテーブルについて見ていきましょう。
Lesson1-0：HTML/CSSの開発環境を無料で整備しよう
Lesson1-1：HTML学習の入り口｜Webページの基本構造を理解しよう
Lesson1-2：基本的なHTMLタグを理解しよう
Lesson1-3：Webページにリンクや画像を挿入しよう
Lesson1-4：３種類のリストを理解しよう
Lesson1-5：テーブル（表）の基礎を理解しよう ◁今回はココ
Lesson1-6：フォームを作成しよう
Lesson1-7：セクションタグとメタタグを知ろう
テーブル（表）はデータを行と列で整理して表示するために使用されます。
たとえば商品の一覧表やスケジュール表など、視覚的に情報を整えて分かりやすく伝える際に非常に便利です。
HTMLではテーブルを作成するために専用のタグが用意されており、それらを活用することで簡単に行と列で構成されたデータを表示できます。
<<前のページ
記事一覧
次のページ>>
HTMLテーブルの基本構造とその要素を理解しよう
HTMLでテーブルを作成するには、まず基本的な構造を理解する必要があります。テーブルは以下の3つの要素で構成されます。
<table>タグ
テーブル全体を定義します。このタグで囲むことで、HTMLがその中の内容を「表」として認識します。<tr>タグ
テーブルの「行」を定義します。各行ごとに<tr>タグで囲みます。<td>タグ
テーブルの「データセル」を定義します。1つのセルに表示されるデータをこのタグで囲みます。
例えば、以下のようにブラウザ表示するHTMLコードを見てみましょう。
この画像と下記のコードを見比べて、どこに書いたコードが画面のどこに表示されているかを確認して下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>基本的なテーブル</title>
</head>
<body>
<h1>商品一覧表</h1>
<table><!-- ここから表 -->
<tr><!-- ここから1行目 -->
<td>商品名</td><!-- 1行目の1つめのセル -->
<td>価格</td><!-- 2つ目のセル -->
<td>在庫数</td><!-- 3つ目のセル -->
</tr>
<tr><!-- ここから2行目 -->
<td>リンゴ</td>
<td>100円</td>
<td>20個</td>
</tr>
<tr><!-- ここから3行目 -->
<td>バナナ</td>
<td>150円</td>
<td>15個</td>
</tr>
</table><!-- 表はここまで -->
</body>
</html><table>タグでテーブル全体を囲んでいます。- 各行は
<tr>タグで囲まれ、行の中のデータは<td>タグで表されています。 - この例では「商品名」「価格」「在庫数」の3列があり、それぞれが1行目のセルに対応しています。
ヘッダーとデータセルを使う方法
HTMLではテーブルの中で特定の行や列を「見出し」として強調するために、<th>タグ を使用します。
<th>タグで囲まれたセルはデフォルトで太字になり、中央揃えで表示されます。
またテーブルをさらにわかりやすくするために、<thead>タグ や <tbody>タグ を利用してテーブルを構造的に整理することができます。
<th>タグ
見出しセルを定義します。この例では「商品名」「価格」「在庫数」の列が見出しとなっています。<thead>タグ
テーブルのヘッダー部分をグループ化するために使用します。ここに見出し行をまとめて記述します。<tbody>タグ
データ部分をグループ化するために使用します。実際のデータをこのタグ内に記述します。
ヘッダーとデータセルの基本例
以下は見出しセルとデータセルを分けて記述した例です。
また、今回は見やすくするためにborder属性を使用して罫線を引いています。（推奨されるやり方ではありません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ヘッダーとデータセル</title>
</head>
<body>
<h1>商品一覧表</h1>
<table border="1"><!-- ここから表 -->
<thead><!-- ここから表の見出し -->
<tr><!-- ここから1行目 -->
<th>商品名</th><!-- 1つ目の見出し -->
<th>価格</th><!-- 2つ目の見出し -->
<th>在庫数</th><!-- 3つ目の見出し -->
</tr>
</thead><!-- 見出しはここまで -->
<tbody>
<tr><!-- ここから2行目 -->
<td>リンゴ</td>
<td>100円</td>
<td>20個</td>
</tr>
<tr><!-- ここから3行目 -->
<td>バナナ</td>
<td>150円</td>
<td>15個</td>
</tr>
</tbody>
</table>
</body>
</html>このコードをコピーし、VSCを使ってブラウザで表示してみましょう。
列の幅を制御する方法
HTMLではテーブル内の列の幅を細かく制御するために <colgroup>タグ や <col>タグ を使用します。
これらのタグを利用することで、特定の列の幅やスタイルを簡単に設定することが可能です。
<colgroup>タグ
テーブル内の列をグループ化するために使用します。このタグで囲むことで、複数の列に一括してスタイルを適用できます。<col>タグ
特定の列にスタイルを適用します。次の例では、1列目（商品名）を40%、2列目と3列目をそれぞれ30%の幅に設定しています。
テーブルの列制御の基本例
以下は、列の幅を制御したシンプルなテーブルの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>行と列の制御</title>
</head>
<body>
<h1>商品一覧表</h1>
<table border="1">
<colgroup>
<col style="width: 40%;"> <!-- 商品名の列の幅を全体の40%に指定 -->
<col style="width: 30%;"> <!-- 価格の列の幅を全体の30%に指定 -->
<col style="width: 30%;"> <!-- 在庫数の列の幅を全体の30%に指定 -->
</colgroup>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫数</th>
</tr>
</thead>
<tbody>
<tr>
<td>リンゴ</td>
<td>100円</td>
<td>20個</td>
</tr>
<tr>
<td>バナナ</td>
<td>150円</td>
<td>15個</td>
</tr>
</tbody>
</table>
</body>
</html>テーブルを制御する際のポイント
- 列の幅はテーブル全体の幅に対する割合で指定できます。幅の設定がない場合、セルの内容に応じて自動調整されます。
- HTMLの構造をシンプルに保つため、基本的にはCSSを活用してスタイルを制御することが推奨されます。
セルを結合する方法と使い方
HTMLではテーブル内で複数のセルを結合することができ、データを整理しやすくなるとともに複雑なレイアウトを作成することが可能です。
セルを結合するには以下の2つの属性を使用します。
rowspan属性：セルを縦方向（行）に結合します。colspan属性：セルを横方向（列）に結合します。
セルを結合する基本例
以下はセルを結合したテーブルの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セルの結合</title>
</head>
<body>
<h1>イベントスケジュール</h1>
<table border="1">
<thead>
<tr>
<th>日付</th>
<th>時間</th>
<th>イベント名</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">2025年1月20日</td> <!-- 1つのセルを2行に結合 -->
<td>10:00</td>
<td>開会式</td>
</tr>
<tr>
<td>14:00</td>
<td>セミナー</td>
</tr>
<tr>
<td>2025年1月21日</td>
<td colspan="2">終日：ワークショップ</td> <!-- 2つのセルを1つに結合 -->
</tr>
</tbody>
</table>
</body>
</html>rowspan属性
この属性を使うことで1つのセルが複数行にわたって表示されます。この例では2025年1月20日のセルが2行に結合されています。colspan属性
この属性を使うことで1つのセルが複数列にわたって表示されます。この例では2025年1月21日の「終日：ワークショップ」のセルが2列に結合されています。
セルを結合する際の注意点
- 行や列の結合は便利ですが、デザインをさらに調整したい場合はCSSを活用することが推奨されます。
- 過剰な結合はテーブルを見にくくするため、必要な箇所だけ使用しましょう。
HTMLテーブルの基本をまとめておさらい
テーブルはデータを整理して見やすく表示するために欠かせないHTML要素です。
この解説では、以下の基本的な内容を学びました：
- テーブルの基本構造
<table>タグを用いて行と列でデータを整理する方法。 - ヘッダーとデータセルの使い方
<th>タグや<thead>タグで見出しを強調し、テーブルを分かりやすくする方法。 - 列の幅の制御
<colgroup>タグや<col>タグを使って、特定の列のスタイルや幅を設定する方法。 - セルの結合
rowspan属性とcolspan属性を使って、複雑なレイアウトを実現する方法。
テーブルは構造を定義するためのタグですが、その見た目を整えるにはCSSを使うことが推奨されます。
罫線や背景色、文字のスタイルなどを調整することで、より見やすいデザインを作成できます。
この解説で得た知識を基に、Lesson2のCSSの学習に進む準備を整えてください。
練習問題1-5：生徒の成績を表で表示しよう
VSCで「training1-5.html」というファイルを作って保存してください。
そのファイルにhtmlコードを書き、ブラウザに以下のように表示させましょう。
初めてのWebサイトを作ろう1-5
このサイトの Lesson1-1（HTML学習の入り口） から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1の記事下部からダウンロードして下さい。
Lesson1-5のまとめノートと練習問題を追加しよう
このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
１．練習問題の解答を保存
練習問題1-5で作成した「training1-5.html」を、ダウンロードした「lesson1（学習フォルダ）」の中に保存してください。
トップページからリンクで飛べるようになりますので確認しましょう。
２．まとめノートを作成・保存
下記のHTMLコードは、このLesson1-5で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite1-5.html」という名前で保存し、「lesson1（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson1-5</title> <link rel="stylesheet" href="style/styles-lesson1.css"> </head> <body> <main class="container"> <h1>Lesson1-5：テーブルを作成しよう</h1> <h2>目的・要点</h2> <p>このレッスンでは、HTMLのテーブル（表）を使用してデータを整理する方法を学びました。テーブルは、行と列で情報を整列させるための強力なツールであり、商品一覧表やスケジュール表など、さまざまな用途に活用できます。基本的な構造を理解し、適切なタグを使用することで、視認性の高い表を作成することが可能です。</p> <h2>このレッスンで学習した内容</h2> <h3>基本的なテーブル構造（<code><table></code>タグ）</h3> <ul> <li><code><tr></code>（行）と <code><td></code>（セル）を使ってデータを整理。</li> <li><code><th></code>タグを使用してヘッダーを強調。</li> </ul> <h3>テーブルの見出しとデータの整理</h3> <ul> <li><code><thead></code> タグでヘッダー部分を定義。</li> <li><code><tbody></code> タグでデータ部分をグループ化。</li> </ul> <h3>テーブルの行と列の制御</h3> <ul> <li><code><colgroup></code> および <code><col></code> タグで列の幅やスタイルを設定。</li> </ul> <h3>セルの結合</h3> <ul> <li><code>rowspan</code> 属性で縦方向（行）にセルを結合。</li> <li><code>colspan</code> 属性で横方向（列）にセルを結合。</li> </ul> <h2>トピック・豆知識</h2> <ul> <li><strong>テーブルとSEO：</strong> 検索エンジンはテーブルをデータ構造として認識するため、適切に活用すると情報の整理に役立つ。</li> <li><strong>CSSを活用したテーブルのデザイン：</strong> HTMLだけでも基本的な表は作成できるが、CSSを使用すると罫線や背景色の調整、セル間の余白設定などが可能。</li> <li><strong>レスポンシブデザイン対応：</strong> モバイル環境での表示を考慮し、スクロール可能なテーブルやカラムの折りたたみを検討する。</li> </ul> <h2>まとめ</h2> <p>テーブルは情報を整理してわかりやすく表示するために非常に有効な手段です。適切なタグを使用し、必要に応じてCSSを組み合わせることで、視覚的に見やすいテーブルを作成できます。次のレッスンでは、Webフォームの作成方法を学び、よりインタラクティブなページを作るための技術を習得していきましょう。</p> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </main> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>※ MyWebsite1-5.htmlは先ほどのtraining1-5.htmlと違い、少しだけCSSを使用して見た目を整理しています。
これでLesson1-5の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
<<前のページ
記事一覧
次のページ>>
FAQ｜HTMLテーブルに関するよくある質問
- Q1. HTMLでテーブルが正しく表示されない場合、何を確認すればいいですか？
-
まずは
<table>,<tr>,<td>などのタグの閉じ忘れがないか確認しましょう。またセルの結合で
rowspanやcolspanを使用している場合は、指定する数値が正しいかも重要です。HTMLの構文エラーは、VSCやオンラインのHTMLバリデーターを使って確認できます。
- Q2. HTMLテーブルで行や列の幅を指定するにはどうすればいいですか？
-
width属性を使って列ごとに幅を指定できます。また<colgroup>や<col>タグを使えば、複数の列を一括で設定できます。さらに、CSSで
table-layout: fixed;を指定すると、均等な幅で表示することも可能です。
- Q3. rowspanとcolspanは一緒に使えますか？
-
はい、使えます。
例えば1つのセルで「2行と3列」を結合する場合は、
<td rowspan="2" colspan="3">と指定します。ただし、他のセルとの位置がずれないように注意しましょう。
- Q4. テーブルにタイトルや説明を付ける方法はありますか？
-
captionタグを使うと、テーブルにタイトルを付けられます。例えば
<caption>生徒の成績表</caption>とすれば視覚的にもわかりやすくなり、SEO的にも有利です。
- Q5. セルの余白や罫線の幅はどうやって調整できますか？
-
HTMLの
cellpaddingとcellspacing属性で調整可能ですが、最近はCSSでの設定が主流です。例えば
table { border-collapse: collapse; }で罫線を重ね、td { padding: 8px; }でセル内の余白を設定できます。
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。