お褒めいただきありがとうございます！HTMLの要素の中でも、**テーブル（表）**は情報を整理して表示するために非常によく使われます。初心者の方にも分かりやすく、その使い方とポイントを解説しますね。
テーブル（表）とは？ HTMLで情報を整理して表示する
**テーブル（table）は、データを行（row）と列（column）**で整理して表示するためのHTML要素です。ちょうどExcelやスプレッドシートのように、項目と値が縦横に並んだ情報を視覚的に分かりやすく伝えるのに役立ちます。
例えば、商品の価格表、社員リスト、時刻表など、構造化されたデータを表示する際に非常に便利です。
例えるなら、
- レストランのメニュー表や、学校の時間割のようなものです。項目が縦横に並んでいて、一目で情報が理解できますよね。
テーブルの基本的な構造要素
テーブルを作成するには、いくつかのタグを組み合わせて使います。最初は少し複雑に感じるかもしれませんが、それぞれの役割を理解すれば大丈夫です。
<table>
<thead>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データA</td>
<td>データB</td>
</tr>
<tr>
<td>データC</td>
<td>データD</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>フッター1</td>
<td>フッター2</td>
</tr>
</tfoot>
</table>
それぞれのタグの役割を見ていきましょう。
-
<table>タグ：テーブル全体のコンテナ- すべてのテーブルの内容は、この
<table>タグの中に記述します。 - 「ここからテーブルが始まって、ここで終わりますよ」という宣言です。
- すべてのテーブルの内容は、この
-
<thead>タグ：テーブルのヘッダー部分（任意だが推奨）- テーブルの**見出し行（ヘッダー）**をグループ化する要素です。
- 通常、テーブルの一番上に来て、各列が何のデータを示すのかを説明します。
- CSSでヘッダー部分にだけ特別なスタイルを適用したい場合などにも便利です。
-
<tbody>タグ：テーブルの本体部分- テーブルの**主要なデータ（本体）**をグループ化する要素です。
- 通常、
<thead>の下に配置され、実際のデータがここに入ります。
-
<tfoot>タグ：テーブルのフッター部分（任意）- テーブルのフッター行をグループ化する要素です。
- 合計値や注釈など、テーブルの最後に表示される情報を入れるのに使います。
-
<tr>タグ：テーブルの行（Table Row）- 「テーブルの行」を定義します。
<tr>の数だけ行が増えます。 - 各
<tr>の中には、列のデータが入るセルを配置します。
- 「テーブルの行」を定義します。
-
<th>タグ：テーブルの見出しセル（Table Header）- テーブルの見出しのセルを定義します。
<thead>の中で使われることが多く、セル内のテキストは太字で表示され、その列や行の見出しであることを示します。- 検索エンジンやスクリーンリーダーにとっても重要な情報となります。
-
<td>タグ：テーブルのデータセル（Table Data）- テーブルの通常のデータセルを定義します。
<tbody>や<tfoot>の中で使われ、実際のデータがここに入ります。
具体的な使用例を見てみよう
例えば、簡単な商品リストのテーブルを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品リスト</title>
<style>
/* CSSでテーブルの見た目を少し整えてみましょう */
table {
width: 80%; /* テーブルの幅を80%にする */
border-collapse: collapse; /* セルの境界線を結合する */
margin: 20px auto; /* 上下左右の余白を設定して中央に */
}
th, td {
border: 1px solid #ccc; /* セルの枠線 */
padding: 8px; /* セル内の余白 */
text-align: left; /* テキストを左寄せに */
}
th {
background-color: #f2f2f2; /* ヘッダーの背景色 */
}
</style>
</head>
<body>
<h1>商品リスト</h1>
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格（円）</th>
<th>在庫</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>150</td>
<td>100</td>
</tr>
<tr>
<td>バナナ</td>
<td>120</td>
<td>50</td>
</tr>
<tr>
<td>みかん</td>
<td>80</td>
<td>200</td>
</tr>
</tbody>
</table>
</body>
</html>
このコードをブラウザで開くと、以下のような表が表示されます（CSSで装飾されているため、より見やすい形になります）。
| 商品名 | 価格（円） | 在庫 |
| りんご | 150 | 100 |
| バナナ | 120 | 50 |
| みかん | 80 | 200 |
ポイント：colspan と rowspan 属性
テーブルをより柔軟にレイアウトするために、セルを結合する属性があります。
-
colspan属性（コルスパン）：列を結合する- 指定した数の列を横方向に結合します。
- 例：
colspan="2"と指定すると、そのセルが2つの列の幅を占めます。
HTML<tr> <th colspan="2">商品情報</th> <th>在庫</th> </tr> -
rowspan属性（ロースパン）：行を結合する- 指定した数の行を縦方向に結合します。
- 例：
rowspan="2"と指定すると、そのセルが2つの行の高さを占めます。
HTML<tr> <td rowspan="2">フルーツ</td> <td>りんご</td> <td>150</td> </tr> <tr> <td>バナナ</td> <td>120</td> </tr>
テーブルを使う上での注意点
-
レイアウト目的でテーブルを使わない！
- テーブルは表形式のデータを表示するためのものです。Webページの全体のレイアウト（どこにサイドバーを置くか、など）のためにテーブルを使うのは、HTMLの正しい使い方ではありません。CSSを使ってレイアウトを構築するのが一般的です。
- レイアウト目的で使うと、レスポンシブデザイン（様々な画面サイズへの対応）が難しくなったり、検索エンジンやスクリーンリーダーがコンテンツを正しく解釈できなくなったりする原因になります。
-
CSSで見た目を整える
- HTMLのテーブルタグだけでは、デフォルトではシンプルな枠線がつく程度で、あまり見栄えが良くありません。
- **CSS（Cascading Style Sheets）**を使って、テーブルの幅、セルのパディング、背景色、文字色、罫線などを細かくデザインすることで、見やすく美しいテーブルにすることができます。上記の例もCSSを少し追加していますね。
まずは、上記で紹介した基本的な<table>、<thead>、<tbody>、<tr>、<th>、<td>タグを使って、ご自身のパソコンで簡単な表を作成してみることをお勧めします。
実際に手を動かして試行錯誤することで、それぞれのタグの役割やテーブルの構造がより深く理解できるはずです。頑張ってください！
0 件のコメント:
コメントを投稿