このモジュールの2番目の記事では、HTML テーブルのより高度な機能 (キャプション/要約、行をテーブルのヘッダー、本文、フッターのセクションにグループ化するなど) や、視覚障碍のあるユーザのためのテーブルのアクセシビリティについて調べます。

<caption> を用いて表にキャプションを追加する

前提知識:	HTML の基礎 (HTML 入門を参照)。
目標:	表のより高度な機能やアクセシビリティについて学ぶ

テーブルにキャプションを付けるには、{{htmlelement("caption")}} 要素内に配置し、それを {{htmlelement("table")}} 要素内にネストします。これは <table> 要素の開始タグすぐ下に置くべきです。

上記の簡単な例から推測できるように、キャプションには表の内容の説明が含まれています。これは、ページに目を通して表が役に立つかどうかをすぐに把握したい全ての読者にとって便利ですが、特に盲目のユーザにとっては便利です。スクリーンリーダーに表の内容を知るためだけに多くのセルの内容を読み上げさせるのではなく、キャプションを頼りにして表をより詳細に読み取るかどうかを決定できます。

注: {{htmlattrxref("summary","table")}} 属性は、<table> 要素で説明を提供するためにも使用できます。これはスクリーンリーダーによっても読み上げられます。ただし、summary は HTML5 仕様では{{glossary("deprecated","推奨されておらず")}}、(ページには表示されないので)晴眼のユーザには読むことができないため、代わりに <caption> 要素を使用することをお勧めします。

アクティブラーニング: キャプションの追加

前の記事で最初に出会った例を再考しながら、これを試してみましょう。

<thead>、<tfoot>、<tbody> を用いて構造を追加する

表の構造がもう少し複雑になったら、それらにもっと構造的な定義を与えることは有用です。これを行う明確な方法の1つは、{{htmlelement("thead")}}、{{htmlelement("tfoot")}}、および {{htmlelement("tbody")}} を使用することです。これにより、表のヘッダー、フッター、および本体のセクションをマークアップできます。

これらの要素によって表がスクリーンリーダーのユーザにアクセスしやすくなることはなく、また視覚的な機能強化が生じることもありません。ただし、これらはスタイリングやレイアウトに非常に役立ちます — CSS を表に追加するための便利なフックとして機能します。いくつか興味深い例を挙げると、長い表の場合、全ての印刷ページで表のヘッダーとフッターを繰り返すようにしたり、表の本体を単一ページに表示して、上下にスクロールして内容を表示したりすることができます。

注: <tbody> は常に全ての表に含まれていて、コードで指定しない場合は暗黙的に含まれます。これを確認するには、<tbody> を含まない以前の例の1つを開き、ブラウザ開発者ツールの HTML コードを調べます — ブラウザによってこのタグが追加されたことがわかります。なぜそれを含まないのかと疑問に思うかもしれません — すべき、表の構造とスタイリングがより細かく制御できるためです。

アクティブラーニング: 表構造の追加

注: 現時点で私たちはあなたが CSS を完全に理解しているとは思っていません。あなたが私たちの CSS モジュールを一通り学ぶとき、これについてより多くを学ぶでしょう(CSS 入門は始めるのに良い場所です。スタイリングされた表に関する具体的な記事もあります)。

Hidden example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My spending record</title>
    <style>

        html {
          font-family: sans-serif;
        }

          table {
          border-collapse: collapse;
          border: 2px solid rgb(200,200,200);
          letter-spacing: 1px;
          font-size: 0.8rem;
        }

        td, th {
          border: 1px solid rgb(190,190,190);
          padding: 10px 20px;
        }

        th {
          background-color: rgb(235,235,235);
        }

        td {
          text-align: center;
        }

        tr:nth-child(even) td {
          background-color: rgb(250,250,250);
        }

        tr:nth-child(odd) td {
          background-color: rgb(245,245,245);
        }

        caption {
          padding: 10px;
        }

        tbody {
          font-size: 90%;
          font-style: italic;
        }

        tfoot {
          font-weight: bold;
        }
    </style>
  </head>
  <body>
      <table>
        <caption>How I chose to spend my money</caption>
        <thead>
          <tr>
            <th>Purchase</th>
            <th>Location</th>
            <th>Date</th>
            <th>Evaluation</th>
            <th>Cost (€)</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">SUM</td>
            <td>118</td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>Haircut</td>
            <td>Hairdresser</td>
            <td>12/09</td>
            <td>Great idea</td>
            <td>30</td>
          </tr>
          <tr>
            <td>Lasagna</td>
            <td>Restaurant</td>
            <td>12/09</td>
            <td>Regrets</td>
            <td>18</td>
          </tr>
          <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/09</td>
            <td>Big regrets</td>
            <td>65</td>
          </tr>
          <tr>
            <td>Toothpaste</td>
            <td>Supermarket</td>
            <td>13/09</td>
            <td>Good</td>
            <td>5</td>
          </tr>
        </tbody>
    </table>

  </body>
</html>

{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

ネストした表

<table> 要素を含む完全な構造を含める限り、表を別の表の中にネストすることは可能です。そのマークアップがスクリーンリーダーのユーザにとって混乱を招きやすく、アクセスしにくくなるため、これは一般的にはあまり推奨されません。多くの場合、既存の表に追加のセル/行/列を挿入することもできます。ただし、他のソースからコンテンツを簡単にインポートしたい場合などは、時々必要になります。

次のマークアップは、単純なネストした表を示しています。

視覚障碍者向けの表

データ表の使用方法について簡単に説明しましょう。表は、データにすばやくアクセスし、さまざまな値を検索できるようにするための便利なツールです。例えば、昨年8月に Gent で販売された指輪 (Rings) の数を確認するには、下の表を見てください。その情報を理解するために、この表内のデータとその列ヘッダーや行ヘッダーとの間の視覚的な関連付けを行います。

しかし、あなたがそれらの視覚的な関連付けをすることができないならば、どうですか？では、どのようにして上記のような表を読むことができますか？視覚障碍者は、Webページの情報を読み上げるスクリーンリーダーをよく使用します。平文を読んでいるときはこれは問題ありませんが、表を解釈することは視覚障碍者にとっては非常に困難な場合があります。それでも、適切なマークアップを使用して、視覚的な関連付けをプログラムによる関連付けに置き換えることができます。

記事のこのセクションでは、可能な限りアクセス可能な表にするためのその他の手法について説明します。

列ヘッダーと行ヘッダーを使用する

スクリーンリーダーは全てのヘッダーを識別し、それらを使用してそれらのヘッダーとそれらが関連するセルとの間のプログラムによる関連付けを行います。列ヘッダーと行ヘッダーの組み合わせにより、各セル内のデータが識別および解釈されるため、スクリーンリーダーのユーザは、晴眼のユーザの場合と同様に表を解釈できます。

scope 属性

Items Sold August 2016
		Clothes	Accessories
		Trousers	Skirts	Dresses	Bracelets	Rings
Belgium	Antwerp	56	22	43	72	23
Gent	46	18	50	61	15
Brussels	51	27	38	69	28
The Netherlands	Amsterdam	89	34	69	85	38
Utrecht	80	12	43	36	19

この記事の新しい話題は {{htmlattrxref("scope","th")}} 属性です。これは <th> 要素に追加して、ヘッダーがどのセルのヘッダーであるかをスクリーンリーダーに正確に伝えることができます — 例えば、それが入っているのは行のヘッダーなのか、それとも列のヘッダーなのか？先ほどの支出記録の例を振り返ると、次のように列ヘッダーを列ヘッダーとして明確に定義できます。

そして各行は次のように定義されたヘッダーを持つことができます(列ヘッダーと同様に行ヘッダーを追加した場合)。

スクリーンリーダーは、このように構成されたマークアップを認識し、例えば、ユーザが列全体または行全体を一度に読み上げることを可能にします。

scope には、さらに2つの可能な値、colgroup と rowgroup があります。これらは、複数列または複数行の上に位置する見出しに使用されます。このセクションの最初にある "Items Sold August 2016" の表を見ると、"Clothes" セルが "Trousers"、"Skirts"、"Dresses" のセルの上に位置することがわかります。これらのセルは全てヘッダー(<th>)としてマークアップするべきで、 "Clothes" はそれらの上に位置し、他の3つの小見出しを定義する見出しです。従って、"Clothes" は scope="colgroup" の属性を得るべきですが、それ以外は scope="col" の属性を得ます。

id 属性と headers 属性

scope 属性を使用する代わりに、{{htmlattrxref("id")}} 属性と {{htmlattrxref("headers", "td")}} 属性を使用して、ヘッダーとセル間の関連付けを作成することもできます。使い方は次のとおりです。

これは HTML の表に、表内の各セルの位置の明示的な定義を与えます。これは、それが属する各列と各行のヘッダーによって定義されます。スプレッドシートのようなものです。それがうまく機能するためには、表は本当に列と行の両方のヘッダーを必要とします。

支出コストの例に戻ると、前の2つのコードは次のように書き直すことができます。

注: この方法では、ヘッダーとデータセルの間に非常に正確な関連付けが作成されますが、マークアップがはるかに多くなり、エラーの余地がありません。 scope アプローチは通常ほとんどの表に十分です。

アクティブラーニング: scope と headers で遊ぶ

まとめ

表の HTML について他にも学べることがいくつかありますが、現時点で知っておく必要があることは全てここで説明しました。この時点で、HTML の表のスタイリングについて学びたいと思うかもしれません — スタイリングされた表を参照してください。