コンテンツにスキップ

HTML/テーブル

出典: フリー教科書『ウィキブックス（Wikibooks）』
要素一覧 HTML
テーブル 		フォーム

テーブルは、データを行と列で整理して表示するための強力なツールです。HTML5では、テーブルの構造化とアクセシビリティが強化され、より意味論的なマークアップが可能になりました。この章では、HTML5でのテーブルの作成方法、構造化、そしてベストプラクティスについて学びます。

テーブルの基本構造

[編集]

HTML5のテーブルは、以下の主要な要素で構成されています：

  • <table>: テーブル全体を定義します。
    • <tr>: Table Row の略で、テーブルの行を定義します。
      • <td>: Table Data の略で、テーブルのセル（データを含む個々の箱）を定義します。
      • <th>: Table Header の略で、ヘッダーセル（列や行のタイトル）を定義します。
基本的なテーブルの例
<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25</td>
    <td>デザイナー</td>
  </tr>
</table>
レンダリング例
名前 年齢 職業
山田太郎 30 エンジニア
佐藤花子 25 デザイナー

この例では、1行目がヘッダー行で、その後に2行のデータが続いています。

テーブルの構造化

[編集]

大きなテーブルや複雑なテーブルでは、さらに構造化するために以下の要素を使用します：

  • <thead>: ヘッダー行をグループ化します。
  • <tbody>: テーブルの本体（主要なデータ部分）をグループ化します。
  • <tfoot>: フッター行（合計や概要など）をグループ化します。
構造化されたテーブルの例
<table>
  <thead>
    <tr>
      <th>製品名</th>
      <th>価格</th>
      <th>在庫数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ノートPC</td>
      <td>80,000円</td>
      <td>20</td>
    </tr>
    <tr>
      <td>スマートフォン</td>
      <td>60,000円</td>
      <td>50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td>140,000円</td>
      <td>70</td>
    </tr>
  </tfoot>
</table>
レンダリング例
製品名 価格 在庫数
ノートPC 80,000円 20
スマートフォン 60,000円 50
合計 140,000円 70

この構造化により、ブラウザやスクリーンリーダーがテーブルの各部分を正確に解釈できるようになります。

セルの結合

[編集]

複雑なレイアウトを作成するために、セルを結合することができます：

  • colspan 属性: 列方向にセルを結合します。
  • rowspan 属性: 行方向にセルを結合します。
セル結合の例
<table>
  <tr>
    <th colspan="2">個人情報</th>
  </tr>
  <tr>
    <th>名前</th>
    <td>山田太郎</td>
  </tr>
  <tr>
    <th rowspan="2">連絡先</th>
    <td>090-1234-5678</td>
  </tr>
  <tr>
    <td>yamada@example.com</td>
  </tr>
</table>
レンダリング例
個人情報
名前 山田太郎
連絡先 090-1234-5678
yamada@example.com

この例では、「個人情報」が2列にまたがり、「連絡先」が2行にまたがっています。

アクセシビリティと意味論的マークアップ

[編集]

アクセシブルなテーブルを作成するために、以下の要素と属性を使用します：

  • <caption>: テーブルの説明や題目を提供します。
  • scope 属性: ヘッダーセルが行または列のどちらのヘッダーであるかを指定します。
アクセシブルなテーブルの例
<table>
  <caption>2033年第1四半期売上</caption>
  <tr>
    <th scope="col">製品</th>
    <th scope="col">1月</th>
    <th scope="col">2月</th>
    <th scope="col">3月</th>
  </tr>
  <tr>
    <th scope="row">製品A</th>
    <td>100</td>
    <td>120</td>
    <td>130</td>
  </tr>
  <tr>
    <th scope="row">製品B</th>
    <td>85</td>
    <td>90</td>
    <td>100</td>
  </tr>
</table>
レンダリング例
2033年第1四半期売上
製品 1月 2月 3月
製品A 100 120 130
製品B 85 90 100

この例では、<caption>でテーブルの内容を説明し、scope属性で各ヘッダーの役割を明確にしています。

スタイリング

[編集]

CSSを使用してテーブルをスタイリングすることで、見た目や読みやすさを向上させることができます。

基本的なスタイリングの例
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

このCSSは、境界線の結合、セルのパディング、交互の行の背景色変更などを行っています。

レスポンシブデザイン

[編集]

モバイルデバイスでも適切に表示されるレスポンシブなテーブルを設計することが重要です。以下は、小さな画面でテーブルを横スクロール可能にする方法の例です：

index.html
<div class="table-container">
  <table>
    <!-- テーブルの内容 -->
  </table>
</div>
style.css
.table-container {
  overflow-x: auto;
}

table {
  min-width: 600px; /* テーブルの最小幅を設定 */
}

この方法では、画面幅が狭い場合でもテーブル全体を表示し、横スクロールで全データにアクセスできるようになります。

レイアウトにテーブル要素を使うべきではありません

[編集]

HTMLのTABLE要素は本来、データを表形式で表示するために設計されていますが、レイアウトのために目的外使用されてきました。しかし、近年のHTMLとCSSの進化により、レイアウトを作成するためには他の方法が推奨されています。以下に、なぜテーブル要素をレイアウトに使うべきでないのかとその代替手段について説明します。

なぜテーブル要素をレイアウトに使うべきでないのか？
  1. セマンティックな意味の混乱: TABLE要素はデータの表形式を定義するものであり、文書の構造を伝えるためには適していません。HTMLのセマンティクスに反することになります。
  2. アクセシビリティの問題: スクリーンリーダーやその他の支援技術が、テーブル要素を適切に処理することが期待されているのはデータテーブルの場合であり、レイアウト目的での使用は混乱を引き起こす可能性があります。
  3. 柔軟性の欠如: テーブルは基本的にグリッド形式であり、柔軟なレスポンシブデザインを達成するのには不向きです。テーブル要素は内容に応じて自動的に拡張・縮小しないため、異なるデバイスや画面サイズに対応しづらいです。
代替手段として推奨される方法
  1. CSS Flexbox: フレキシブルなボックスモデルを提供し、要素の配置や整列を制御できます。 
    <div style="display: flex; justify-content: space-between;">
    <div>コンテンツ 1</div>
    <div>コンテンツ 2</div>
    <div>コンテンツ 3</div>
</div>
  2. CSS Grid: より複雑なレイアウトを簡単に実現できます。 
    <div style="display: grid; grid-template-columns: 1fr 2fr;">
    <div>サイドバー</div>
    <div>メインコンテンツ</div>
</div>
  3. Semantic HTML: 適切なセマンティクスを持つHTML要素を使用して、文書の構造や意味を正しく表現します。 
    <header>
 <nav>ナビゲーション</nav>
</header>
<main>
 <article>
  <section>セクション</section>
 </article>
</main>
<footer>フッター</footer>
  4. レスポンシブデザインの考慮: CSSのメディアクエリやフレキシブルな単位（%、rem、emなど）を使用して、異なるデバイスや画面サイズに適応するデザインを実現します。
結論

テーブル要素(TABLE)はデータの表形式の表示に特化しており、レイアウト目的での使用は推奨されません。代わりに、CSS FlexboxやCSS Gridなどの最新のレイアウト手法を使用して、より柔軟でアクセシブルなレイアウトを構築することが推奨されています。

以上が、HTML5におけるテーブルの基本から応用までの解説です。テーブルは単純なデータ表示から複雑なレイアウトまで幅広く使用できる要素です。適切な構造化とアクセシビリティへの配慮を行いながら、効果的にデータを表示することが重要です。


要素一覧 HTML
テーブル 		フォーム
"https://ja.wikibooks.org/w/index.php?title=HTML/テーブル&oldid=251482" より作成