テーブル

HTML テーブルは、行と列で表形式のデータを表示します。表示するコンテンツと、そのコンテンツに対するユーザーのニーズに基づいて <table> を選択する必要があります。データが表示、比較、並べ替え、計算、相互参照されている場合は、<table> が適切な選択肢となります。サムネイル画像の大きなグループなど、表形式以外のコンテンツを整理する場合は、表は適切ではありません。代わりに、画像のリストを作成し、CSS でグリッドのスタイルを設定します。

このセクションでは、表を構成するすべての要素と、表形式のデータを表示する際に考慮すべきアクセシビリティとユーザビリティの機能について説明します。Learn HTML は CSS に重点を置いていませんが、表固有の CSS プロパティをいくつか取り上げます。CSS の詳細については、CSS を学ぶをご覧ください。

テーブル要素（順序付き）

<table> タグは、すべてのテーブル要素を含むテーブル コンテンツをラップします。<table> の暗黙的な ARIA ロールは table です。支援技術は、この要素がデータを行と列に配置したテーブル構造であることを認識します。テーブルが選択状態を維持している場合、2 次元ナビゲーションがある場合、またはユーザーがセルの順序を並べ替えられる場合は、role="grid" を設定します。grid の行を展開したり折りたたんだりできる場合は、代わりに role="treegrid" を使用します。

<table> の中には、テーブル ヘッダー（<thead>）、テーブル本文（<tbody>）、（必要に応じて）テーブル フッター（<tfoot>）があります。それぞれはテーブル行（<tr>）で構成されています。行にはテーブル ヘッダー（<th>）とテーブルデータ（<td>）のセルが含まれており、それらのセルにすべてのデータが含まれています。DOM では、これらより前に、テーブルのキャプション（<caption>）と列グループ（<colgroup>）という 2 つの追加機能が見つかることがあります。<colgroup> に span 属性があるかどうかによって、ネストされたテーブル列（<col>）要素が含まれることがあります。

テーブルの子は次の順序で並んでいます。

1. <caption> 要素
2. <colgroup> 要素
3. <thead> 要素
4. <tbody> 要素
5. <tfoot> 要素

<table> 要素の子要素（すべて省略可能ですが推奨）について説明し、行、テーブル ヘッダーセル、テーブル データセルについて見ていきます。<colgroup> は最後に説明します。

表のキャプション

テーブルの命名には、セマンティック要素 <caption> を使用することをおすすめします。<caption> は、プログラムで関連付けられたわかりやすいテーブル タイトルを提供します。デフォルトでは、すべてのユーザーに表示され、利用可能になっています。

<caption> 要素は、<table> 要素にネストされた最初の要素である必要があります。含めることで、周囲のテキストを読まなくても、すべてのユーザーがテーブルの目的をすぐに把握できます。また、<table> で aria-label または aria-labelledby を使用して、キャプションとしてアクセス可能な名前を指定することもできます。<caption> 要素には要素固有の属性はありません。

キャプションは表の外に表示されます。キャプションの位置は、非推奨の align 属性を使用するよりも、CSS の caption-side プロパティで設定する方が望ましい方法です。これにより、キャプションを上部と下部に設定できます。inline-start と inline-end を使用した左右の配置は、まだ完全にサポートされていません。デフォルトのブラウザの表示は [Top] です。

データテーブルには、わかりやすい見出しとキャプションを付け、ほぼ説明不要なほど明確にすることが望ましいです。すべてのユーザーが同じ認知能力を持っているわけではないことに留意してください。表が「ポイントを説明している」場合や、解釈が必要な場合は、表の主なポイントや機能を簡単に要約します。要約の配置場所は、その長さと複雑さによって異なります。短い場合は、キャプションの内部テキストとして使用します。長い場合は、キャプションに要約し、表の前の段落に要約を提供して、aria-describedby 属性で 2 つを関連付けます。表を <figure> に入れ、概要を <figcaption> に入れる方法もあります。

データ セクション

テーブルのコンテンツは、0 個以上のテーブル ヘッダー（<thead>）、テーブル本文（<tbody>）、テーブル フッター（<tfoot>）の最大 3 つのセクションで構成されます。これらはすべて省略可能で、それぞれ 0 個以上がサポートされています。

これらの要素は、テーブルのアクセシビリティには影響しませんが、ユーザビリティの面で役立ちます。スタイリング フックを提供します。たとえば、ヘッダーの内容を固定し、<tbody> の内容をスクロールできるようにすることができます。これらの 3 つのコンテナ要素のいずれにもネストされていない行は、暗黙的に <tbody> でラップされます。3 つのロールはすべて、同じ暗黙的なロール rowgroup を共有します。これらの 3 つの要素には、要素固有の属性はありません。

これまでの内容:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

<tfoot> 要素は、アクセシビリティ上の理由から、元々 <thead> の直後、<tbody> の前に配置するように指定されていました。そのため、レガシー コードベースでは、この直感的でないソース順序が見られることがあります。

テーブルの内容

表は表のヘッダー、本文、フッターに分割できますが、表に行、セル、コンテンツが含まれていない場合、これらのいずれも機能しません。各テーブル行 <tr> には、1 つ以上のセルが含まれています。セルがヘッダー セルの場合は、<th> を使用します。それ以外の場合は、<td> を使用します。

通常、ユーザー エージェントのスタイルシートでは、<th> テーブル ヘッダー セル内のコンテンツは中央揃えで太字で表示されます。これらのデフォルト スタイルとすべてのスタイル設定は、個々のセル、行、<table> で使用されていた非推奨の属性ではなく、CSS で制御することをおすすめします。

セル間とセル内のパディング、枠線、テキストの配置を追加する属性がありました。セルのコンテンツとその枠線との間、および隣接するセルの枠線との間のスペースを定義する cellpadding と cellspacing は、それぞれ CSS の border-collapse プロパティと border-spacing プロパティで設定する必要があります。border-collapse: collapse が設定されている場合、Border-spacing は無視されます。border-collapse: separate; が設定されている場合、empty-cells: hide; を使用して空のセルを完全に非表示にできます。テーブルのスタイル設定について詳しくは、テーブル関連の CSS スタイルに関するインタラクティブなスライドをご覧ください。

次の例では、CSS を使用してテーブルと各セルに枠線を追加し、一部の機能をわかりやすくしています。

この例では、キャプション、テーブル ヘッダー、テーブル本文があります。ヘッダーには 3 つのヘッダー <th> セルを含む 1 つの行があり、3 つの列が作成されます。本文には 3 行のデータが含まれています。最初のセルは行のヘッダーセルであるため、<td> ではなく <th> を使用します。

<th> セルには、columnheader または rowheader の暗黙的な ARIA ロールを持つセマンティックな意味があります。列挙型 scope 属性の値に応じて、セルをテーブルセルの列または行のヘッダーとして定義します。scope が明示的に設定されていない場合、ブラウザはデフォルトで col または row になります。セマンティック マークアップを使用しているため、1956 セルには Year と Lou Minious の 2 つのヘッダーがあります。この関連付けは、「1956」が「Lou Minious」の卒業「年」であることを示しています。この例では、テーブル全体が表示されているため、関連付けが視覚的に明らかです。<th> を使用すると、ヘッダーの列または行がスクロールしてビューから外れても、関連付けが維持されます。<th scope="col">Year</th> と <th scope="row">Lou Minious</th> を明示的に設定することもできますが、このようなテーブルでは、列挙されたデフォルト値が機能します。scope の他の値には、複雑なテーブルで役立つ rowgroup と colgroup があります。

セルを結合する

MS Excel、Google スプレッドシート、Numbers と同様に、複数のセルを 1 つのセルに結合できます。これは、HTML の colspan 属性と rowspan 属性を使用して行うことができます。

• colspan は、1 つの行内の隣接する 2 つ以上のセルを結合します。
• rowspan は、結合された行の最初の行のセルに追加されると、行をまたいでセルを結合します。

この例では、テーブル ヘッダーに 2 行が含まれています。最初のヘッダー行には 4 つの列にまたがる 3 つのセルが含まれています。中央のセルには colspan="2" があります。これにより、隣接する 2 つのセルが結合されます。最初と最後のセルには rowspan="2" が含まれます。これにより、セルが直下の隣接する行のセルと結合されます。

テーブル ヘッダーの 2 行目には 2 つのセルがあります。これらは、2 行目の 2 列目と 3 列目のセルです。最初の行の最初と最後の列のセルは 2 行にまたがるため、最初と最後の列のセルは宣言されていません。

scope 属性だけでは設定できない関連付けを持つ複数のヘッダーセルによってセルが定義されている場合は、関連付けられたヘッダーのスペース区切りリストを含む headers 属性を含めます。この例はより複雑な表であるため、scope 属性を使用してヘッダーのスコープを明示的に定義します。さらにわかりやすくするために、各セルに headers 属性を追加しました。

このケースでは headers 属性は必要なかったかもしれませんが、テーブルの複雑さが増すにつれて、これらの属性を覚えておくことが重要になります。ヘッダーやセルが結合されているテーブル、列または行のヘッダーが 3 つ以上のレベルになっているテーブルなど、複雑な構造のテーブルでは、関連するヘッダー セルを明示的に識別する必要があります。このような複雑なテーブルでは、各データセルを対応する各ヘッダーセルに明示的に関連付けます。関連付けられたすべてのヘッダーのスペース区切りの id 値のリストを headers 属性の値として使用します。

headers 属性は <td> 要素でよく見られますが、<th> でも有効です。

ただし、複雑な表構造は、スクリーン リーダーのユーザーだけでなく、すべてのユーザーにとって理解しにくい可能性があります。認知面とスクリーン リーダーのサポートの面から見ると、スコープとヘッダーを追加しなくても、スパンされたセルがほとんどない、またはまったくないシンプルな表の方が理解しやすいです。管理も簡単です。

表のスタイルを設定する

列グループ要素 <colgroup> とその唯一の子孫である空の列要素 <col> という、あまり知られていない 2 つの要素が簡単に説明されています。<colgroup> 要素は、テーブル内の列のグループまたは <col> 要素を定義するために使用されます。

使用する場合、列グループは <table> 内の <caption> の直後、テーブルデータの前にネストする必要があります。複数の列にまたがる場合は、span 属性を使用します。

通常、テーブルのコンテンツ アウトラインの順序は次のようになります。<table> と <caption> は含めるべき 2 つの要素です。

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> と <col> には、テーブルのアクセシビリティに影響するセマンティックな意味はありません。ただし、幅の設定など、CSS を使用して列のスタイルを設定するのに役立ちます。

<td> と <th> の関連スタイルは、<col> スタイルをオーバーライドします。CodePen では、colspan を設定して、テーブルの一部の行を結合しています。nth-child CSS セレクタが <tr> に適用されている場合、結合された行または列によっては、スタイルに影響する可能性があります。

残念ながら、サポートされているプロパティはごく一部です。スタイルはセルに継承されません。<col> を使用してセルをターゲットにする唯一の方法は、:has() 関係セレクタなどの複合セレクタを使用することです。

<table> と <colgroup> の両方に背景色がある場合、<colgroup> の background-color が最上位になります。描画の順序は、テーブル、列グループ、列、行グループ、行の順で、セルは最後かつ最上位に描画されます。テーブルレイヤのスキーマで示されているとおりです。<td> 要素と <th> 要素が <colgroup> 要素または <col> 要素の子孫ではなく、スタイルを継承していません。

テーブルにストライプを適用するには、CSS 構造セレクタが便利です。たとえば、tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} は、テーブルの本文の奇数行ごとに半透明の黒を追加し、<colgroup> で設定された背景効果を透過させます。

デフォルトでは、テーブルはレスポンシブではありません。デフォルトでは、コンテンツに合わせてサイズが設定されます。さまざまなデバイスで表レイアウトのスタイルを効果的に機能させるには、追加の対策が必要です。テーブル要素の CSS display プロパティを変更する場合は、ARIA role 属性を含めます。冗長に聞こえるかもしれませんが、CSS の display プロパティは、一部のブラウザでアクセシビリティ ツリーに影響を与える可能性があります。

データを表示する

表要素には、支援技術が使用するセマンティックな意味があり、ユーザーは迷うことなく行と列を移動できます。<table> 要素はプレゼンテーションに使用しないでください。リストの上に見出しが必要な場合は、見出しとリストを使用します。コンテンツを複数の列に配置する場合は、複数列レイアウトを使用します。コンテンツをグリッドでレイアウトする場合は、CSS グリッドを使用します。

データには表のみを使用します。

このように考えてみてください。会議でデータを表示するためにスプレッドシートが必要な場合は、<table> を使用します。Google スライドや PowerPoint などのプレゼンテーション ソフトウェアで利用できる機能を使用する場合は、説明リストが必要になることがあります。

つまり、表形式のデータを表示しない場合は、<table> を使用しないでください。プレゼンテーションにテーブルを使用する場合は、role="none" を設定します。

多くのデベロッパーはフォームのレイアウトにテーブルを使用していますが、これは不要です。HTML フォームについては知っておく必要があります。

理解度を確認する

表に関する知識をテストします。