HTML 入門

HTML テーブル属性

基礎的な <table>、<tr>、<th>、および <td> タグはテーブル作成の土台を提供しますが、属性（Attributes） を使用することで、その外観やレイアウトを詳細にコントロールできるようになります。

本章では、テーブル作成に不可欠な 3 つの属性、border（境界線）、colspan（列またぎ）、および rowspan（行またぎ）について探求します。これらの属性を理解することで、テーブルのルック＆フィールやデータの表示形式をより高度に操れるようになります。

1. border 属性：境界線の設定

border 属性は、テーブル全体および各セルを囲む境界線の太さを指定します。

現代のフロントエンド開発では CSS を用いてスタイルを設定するのが主流ですが、border 属性を理解することは歴史的背景を知る上で重要であり、クイックなプロトタイプ作成やレガシーコードのメンテナンス時に非常に役立ちます。

1.1 基本的な使い方

border 属性は <table> タグに直接追加します。その値は境界線の幅（ピクセル単位）を表します。

<table border="1">
  <tr>
    <th>氏名</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>30</td>
  </tr>
  <tr>
    <td>佐藤 花子</td>
    <td>25</td>
  </tr>
</table>

この例では、テーブルの外枠と各セルの周囲に 1 ピクセル幅の境界線が表示されます。

1.2 重要な考慮事項

  • HTML5 と CSS: 現代のウェブ開発におけるベストプラクティスは、境界線を含むすべてのスタイル設定に CSS を使用することです。border 属性は「表現層」の属性と見なされており、CSS の方が遥かに高い柔軟性と制御力を提供します。
  • CSS での等価記述: border="1" を CSS で再現する場合、table, th, td { border: 1px solid black; border-collapse: collapse; } と記述します。特に border-collapse: collapse; は、二重線になるのを防ぎ境界線を重ねるために非常に重要です。
  • アクセシビリティ: 境界線はテーブルの可読性を高め、特に視覚障害を持つユーザーにとって構造の理解を助けます。境界線と背景色の間には十分なコントラストを確保してください。

1.3 推奨される CSS スタイリング例

以下は、構造（HTML）と表現（CSS）を分離し、メンテナンス性を高める推奨の手法です。

<!DOCTYPE html>
<html lang="ja">
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse; /* 境界線を重ねてスッキリさせる */
}
</style>
</head>
<body>

<table>
  <tr>
    <th>氏名</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>30</td>
  </tr>
  <tr>
    <td>佐藤 花子</td>
    <td>25</td>
  </tr>
</table>

</body>
</html>

2. colspan 属性：列のまたぎ（列結合）

colspan 属性は、一つのセルが横方向にまたぐ（占有する）列の数を指定します。

これは、複数の列にまたがるヘッダーを作成したり、セルを結合して特定のレイアウトを実現したりする際に非常に有用です。

2.1 基本的な使い方

colspan 属性は <th> または <td> タグに追加できます。その値は、そのセルが占有すべき列の数を表します。

<table border="1">
  <tr>
    <th colspan="2">個人情報</th>
  </tr>
  <tr>
    <td>氏名</td>
    <td>田中 太郎</td>
  </tr>
  <tr>
    <td>年齢</td>
    <td>30</td>
  </tr>
</table>

この例では、「個人情報」というヘッダーが 2 列分またがっており、「氏名」と「年齢」の列の上にまたがる形で表示されます。

2.2 応用的な使い方

colspan を使用して、より複雑なテーブルレイアウトを作成できます。例えば、テーブル幅全体にまたがるメインタイトルと、一部にまたがるサブタイトルを組み合わせる構成です。

<table border="1">
  <tr>
    <th colspan="4">従業員詳細</th>
  </tr>
  <tr>
    <th>氏名</th>
    <th>部署</th>
    <th colspan="2">連絡先</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>エンジニアリング部</td>
    <td>Email:</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>佐藤 花子</td>
    <td>マーケティング部</td>
    <td>電話:</td>
    <td>03-1234-5678</td>
  </tr>
</table>

解析：

  • 「従業員詳細」は全 4 列をまたいでいます。
  • 「連絡先」は 2 列をまたいでいます。

2.3 注意点

  • テーブル構造: colspan を使用する場合、各行が占有する列の合計数が一致していることを確認してください。列のカウントが不一致だと、テーブルのレイアウトが崩れる原因になります。
  • アクセシビリティ: セルを結合しても、テーブルの論理構造が明確であることを確認してください。

3. rowspan 属性：行のまたぎ（行結合）

rowspan 属性は、一つのセルが縦方向にまたぐ（占有する）行の数を指定します。

これは、複数のデータ項目に共通するラベルやカテゴリを表示し、行をグループ化する際に非常に便利です。

3.1 基本的な使い方

rowspan 属性は <th> または <td> タグに追加できます。その値は、そのセルが占有すべき行の数を表します。

<table border="1">
  <tr>
    <th>カテゴリ</th>
    <th>項目</th>
  </tr>
  <tr>
    <td rowspan="2">フルーツ</td>
    <td>りんご</td>
  </tr>
  <tr>
    <td>バナナ</td>
  </tr>
  <tr>
    <td rowspan="2">野菜</td>
    <td>にんじん</td>
  </tr>
  <tr>
    <td>ブロッコリー</td>
  </tr>
</table>

この例では、「フルーツ」と「野菜」の各カテゴリセルが 2 行分またがっており、対応する項目を視覚的にグループ化しています。

3.2 rowspan と colspan の組み合わせ

これら 2 つの属性を組み合わせることで、極めて複雑なデータ構造もレイアウト可能です。

<table border="1">
  <tr>
    <th></th>
    <th colspan="2">平均値</th>
  </tr>
  <tr>
    <th>カテゴリ</th>
    <th>身長</th>
    <th>体重</th>
  </tr>
  <tr>
    <td rowspan="2">男性</td>
    <td>1.8m</td>
    <td>80kg</td>
  </tr>
  <tr>
    <td>1.75m</td>
    <td>75kg</td>
  </tr>
  <tr>
    <td rowspan="2">女性</td>
    <td>1.65m</td>
    <td>60kg</td>
  </tr>
  <tr>
    <td>1.60m</td>
    <td>55kg</td>
  </tr>
</table>

解析：

  • 「平均値」は 2 列をまたいでいます（colspan="2"）。
  • 「男性」および「女性」は、それぞれ 2 行をまたいでいます（rowspan="2"）。

4. まとめ

本章では、HTML テーブルの核となる 3 つの属性を学びました。

  • border: 境界線を制御します（現在は主に CSS で制御されます）。
  • colspan: セルを横方向に結合します（列またぎ）。
  • rowspan: セルを縦方向に結合します（行またぎ）。

これらの属性を適切に使い分けることで、複雑なデータセットもユーザーにとって読みやすく、かつ構造的に正しい形式で提示することが可能になります。