今まで習ったリストは、情報を縦に並べるものでしたよね。でも時々、成績表みたいに行と列で整理されたデータを見ることがあります。あれはどうやって作るんですか？
それが「表（テーブル）」と呼ばれるものだ。HTMLでは<table>タグを使って、行と列で構成されたデータを美しく整理できるんだ。
Excelみたいな感じですか？
その通り！HTMLの表は、Excelのように行と列でデータを整理する。成績表、料金表、スケジュール表など、関連するデータを比較・参照しやすい形で表示できるよ。
表（テーブル）の基本構造
HTMLの表は、<table>タグを基本に、<tr>（行）と<td>（セル）を組み合わせて作成します。情報を整理して見やすく表示するための強力なツールです。
囲む
作成する
を作成する
基本構造のポイント
<table>タグ 表全体を囲む親要素。すべての表はこのタグから始まります。<tr>タグ “Table Row”の略で、表の「行」を定義します。<td>タグ “Table Data”の略で、個々のデータを入れる「セル」を定義します。- 入れ子構造
<table>の中に<tr>タグを、<tr>タグの中に<td>タグを入れるという階層構造が基本です。
実際に表を作ってみよう
理論だけでなく、実際にコードを使って基本的な表がどのように作られるかを確認してみましょう。
実際に表示してみたら、セルは行と列になっているのに、枠線がないのでただの文字が並んでいるだけに見えました。これだと表っぽくないですね。
その通り。HTMLの表は、何も指定しないと枠線が見えないんだ。
<table>タグにborder="1"という属性を追加すると、表らしく見えるようになるよ。
属性って、今まで習ったものと同じですね！
そうだね！<img>タグのsrc属性や<a>タグのhref属性と同じように、タグに追加情報を与える仕組みだ。
表を見やすくする border 属性
HTMLの表は、デフォルトでは枠線（ボーダー）が表示されません。表として認識しやすくするために、border属性を使って枠線を表示させることができます。
<!-- border="1"を追加（枠線が表示される） -->
<table border="1">
<tr>
<td>商品名</td>
<td>価格</td>
</tr>
<tr>
<td>リンゴ</td>
<td>150円</td>
</tr>
</table>border属性を使った表の表示を体験
実際にborder属性を使って、枠線がある場合に表がどのように変わるかを確認してみましょう。
HTMLのborder属性は手軽ですが、見た目の調整や一貫したデザインのためにはCSSで枠線を制御する方法が推奨されます。理由と実例を簡潔に示します。
- 柔軟なスタイリング 色・太さ・角丸・影など細かく指定できる
- 一貫性の確保 クラスで全ページの表を統一できる
- 構造と装飾の分離 マークアップは構造、CSSは見た目に専念できる
- レスポンシブ対応 メディアクエリで画面サイズに応じて調整可能
CSSについては、また別の機会で詳しく学ぶので、現在はHTMLの基本的な使い方に集中しましょう。
様々な表の活用例
なるほど、表の基本的な作り方は分かりました！でも、実際にどんな場面で使うと便利なんですか？
表は本当に色々な場面で活躍するんだ。具体的な例をいくつか見てみよう。データを整理して比較したいときにとても便利だよ。
成績・データ比較
数値データの比較に表は非常に効果的です。時系列での変化や科目間の比較が一目でわかります。
スケジュール管理
時間軸と項目の組み合わせでスケジュール管理ができます。
商品・価格比較
商品の特徴や価格を比較する際にも表が活躍します。
本当にいろんな使い方があるんですね！特にスケジュール表は、学校の時間割みたいで分かりやすいです。
その通り！表は「関連するデータを整理して比較する」のが得意なんだ。縦と横の関係性を利用することで、情報がとても見やすくなるよ。
表を見やすくデザインするコツ
先生、表を作ってみたんですけど、なんだかゴチャゴチャして見にくいんです…。何かコツはありますか？
実は、ほんの少しの工夫で、表は驚くほど見やすくなるんだ。今回は、誰でも実践できる「見やすい表のデザイン原則」を3つ紹介するよ。
1つのセルには1つの情報だけ
まず一番大切なのは、「1セル＝1データ」の原則です。1つのセルに複数の情報を詰め込むと、途端に読みづらくなってしまいます。
| 売上データ |
| 1Q売上:1,200万円 前年比+15% |
| 期間 | 売上 | 前年比 |
| 1Q | 1,200万円 | +15% |
データの種類を「列」で揃える
次に、「同じ種類のデータは同じ列にまとめる」ことを意識しましょう。「列」とはセルが縦に並んだ集まりのことです。同じ列にあるセルには、同じ種類のデータを入れるのが基本です。
なるほど！さっきの例だと、「売上」の列を見れば、売上の推移がすぐに分かりますね！
その通り！人間は縦方向に情報を追うのが得意だから、列を揃えるだけで格段に理解しやすくなるんだ。下の例で確認してみよう。
| 情報1 | 情報2 |
| 1Q | 1,350万円 |
| 1,200万円 | +20% |
| +15% | 2Q |
| 期間 | 売上 | 前年比 |
| 1Q | 1,200万円 | +15% |
| 2Q | 1,350万円 | +20% |
悪い例だと、誰が何歳で何が好きか、一目で分かりにくいだろう？良い例のように列を意識して整理することが、見やすい表を作るための重要な鍵なんだ。
見出しと文字の配置を工夫する
最後は仕上げのテクニックです。各列に分かりやすい見出しを付け、文字の配置を整えることで、プロが作ったような表になります。
- 見出しを明確に 最初の行を太字にするなどして、見出しであることを分かりやすく示す。
- テキストの配置 左揃えにすると、文章が読みやすくなる。
- 数値の配置 右揃えにすると、桁が揃って比較しやすくなる。
| 商品名 | 価格（円） | 在庫数 |
| リンゴ | 120 | 30 |
| バナナ | 250 | 15 |
| オレンジ | 80 | 50 |
| 商品名 | 価格（円） | 在庫数 |
| リンゴ | 120 | 30 |
| バナナ | 250 | 15 |
| オレンジ | 80 | 50 |
本当だ！数値が右に揃うと、すごく見やすいです！見出しが太字なのも分かりやすい！
そうだね。これらの原則を守るだけで、君の作る表はもっと分かりやすく、伝わりやすくなるはずだよ。
ちなみに、見出しには専用の<th>タグを使うのがより正しい方法なんだ。それについては次のレッスンで詳しく学ぼう！
設計の基本原則まとめ
- 1セル1データ 1つのセルには1つの情報だけを入れる。
- 列で整理 同じ種類のデータは同じ列にまとめ、縦で比較しやすくする。
- 見出しを明確に 列の内容が分かりやすい見出しをつける。
- 配置を整える テキストは左揃え、数値は右揃えを基本にすると見やすい。
- 枠線で見やすく
border="1"属性などを使い、セルの境界を明確にする。
理解度チェッククイズ
表の基本構造と作成方法を理解できたか、クイズで確認してみましょう。
表の基本ミニクイズ
<table border="1">
<tr>
<td>商品名</td>
<td>価格</td>
<td>在庫</td>
</tr>
<tr>
<td>リンゴ</td>
<td>150円</td>
<td>あり</td>
</tr>
</table><table border="1">
①
<td>科目</td>
<td>点数</td>
</tr>
<tr>
<td>数学</td>
<td>85</td>
</tr>
</table><table border="1">
<tr>
<td>月</td>
<td>火</td>
</tr>
<tr>
<td>会議</td>
<td>開発</td>
</tr>
<tr>
<td>10時</td>
<td>11時</td>
</tr>
</table>まとめ
表の作り方がよく分かりました！特にborder属性で枠線が表示されると、表らしく見えて分かりやすいです。
1セル1データの原則は重要ですね。確かに、1つのセルにいろんな情報があると読みづらい。それとborder="1"を忘れずに付けるのもポイントですね。
その通り！表は情報の「整理棚」のようなものだね。適切に分類・配置することで、データが格段に見やすくなる。そしてborder属性で枠線を表示することで、表として認識しやすくなる。次は、表をより意味的に構造化する方法について学んでいこう。見出しや表の部分的構造化により、アクセシビリティも向上させることができるよ。
- 基本構造
<table>で全体を囲み、<tr>で行、<td>でセルを作成 - 枠線表示
border="1"属性で表に枠線を表示し、表として認識しやすく - データ整理 関連するデータを行と列で構造的に配置
- 設計原則 1セル1データで情報を明確に分離
- 様々な用途 成績表、スケジュール、商品比較など幅広く活用
- 読みやすさ 数値は右揃え、見出しの明確化で理解促進
次回は「表の構造化」について学習します。<thead>、<tbody>、<th>を使った、より意味的で使いやすい表の作成方法を習得しましょう！