テーブル

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

このセクションでは、表を構成するすべての要素と、表形式のデータの表示時に考慮すべきユーザー補助機能とユーザビリティ機能について説明します。HTML の学習は基本的に 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> 要素には要素固有の属性はありません。

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

データテーブルには、明確なヘッダーとキャプションを含め、ほとんど説明不要なほどシンプルにする必要があります。すべてのユーザーの認知能力が同じであるとは限りません。表が「主張」している場合や、解釈が必要な場合は、表の主なポイントや機能を簡単に要約します。要約の配置場所は、要約の長さと複雑さによって異なります。簡潔な場合は、字幕の内部テキストとして使用します。長い場合は、キャプションで要約し、表の前の段落に要約を記載します。この 2 つを aria-describedby 属性で関連付けます。表を <figure> に配置し、概要を <figcaption> に配置することもできます。

データのセクション化

テーブルの内容は、テーブルのヘッダー（<thead>）、テーブルの本文（<tbody>）、テーブルのフッター（<tfoot>）の 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 で制御するのが最適です。

セル間やセル内のパディング、枠線、テキストの配置を追加する属性がありました。セルのパディングとセルの間隔は、セルのコンテンツとその境界線の間、および隣接するセルの境界線の間にスペースを定義します。これらは、それぞれ 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> セルには意味的な意味があり、暗黙的な ARIA ロールは columnheader または rowheader です。列挙型の scope 属性の値に応じて、テーブルセルの列または行のヘッダーとしてセルを定義します。scope が明示的に設定されていない場合、ブラウザはデフォルトで col または row になります。セマンティック マークアップを使用しているため、1956 セルには「年」と「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 属性は、1 つの行内の隣接するセルを 2 つ以上結合するために使用します。rowspan 属性は、行全体のセルのマージに使用され、最上行のセル上に配置されます。

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

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

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

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

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

ただし、複雑なテーブル構造は、スクリーン リーダーのユーザーだけでなく、すべてのユーザーにとって理解しづらい場合があります。認知的観点とスクリーン リーダーのサポートの観点から、範囲とヘッダーを追加しなくても、セルの範囲が少ない、またはセルの範囲がないシンプルな表の方が理解しやすいです。管理も簡単です。

表のスタイル設定

簡単に説明した比較的わかりにくい要素が 2 つあります。列グループの <colgroup> 要素と、その唯一の子孫である空の <col> 列要素です。<colgroup> 要素は、表内の列のグループ（<col> 要素）を定義するために使用されます。

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

テーブルのコンテンツの概要の順序は通常次のとおりです。<table> と <caption> は含める必要がある 2 つの要素です。

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

<colgroup> も <col> も、テーブルのユーザー補助の向上に役立つという点でセマンティックな意味はありませんが、CSS で列の幅を設定するなど、列のスタイル設定を限定的に行うことができます。

<col> スタイルは、そのスタイルをオーバーライドする <td> スタイルまたは <th> スタイルがない限り、列にスタイルを適用します。たとえば、<colspan> を使用してテーブルの一部の行のセルのみを結合した場合、tr > *:nth-child(8) などのセレクタ（すべての行の 8 番目の子を選択するセレクタ）で 8 番目の列全体がハイライト表示されるかどうかはわかりません。また、結合された行または列のセルによっては、9 番目と 10 番目の列のセルもハイライト表示される可能性があります。

残念ながら、サポートされているプロパティはごく一部で、スタイルはセルに継承されません。また、ターゲティング セルで <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 表示プロパティを変更する場合は、ARIA role 属性を含めます。冗長に思えるかもしれませんが、CSS display プロパティは、一部のブラウザのユーザー補助ツリーに影響する可能性があります。

データの表示

表要素には意味的な意味があり、支援技術によって使用され、行や列を「迷子」にならずに移動できるようにします。<table> 要素は表示には使用しないでください。リストの上にヘッダーが必要な場合は、ヘッダーとリストを使用します。コンテンツを複数の列にレイアウトする場合は、マルチ列レイアウトを使用します。コンテンツをグリッドに配置する場合は、CSS グリッドを使用します。データにのみテーブルを使用します。たとえば、会議でデータを提示するためにスプレッドシートが必要な場合は、<table> を使用します。Keynote や PowerPoint などのプレゼンテーション ソフトウェアで利用できる機能を使用したい場合は、説明リストが必要になる可能性があります。

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

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

理解度を確認する

テーブルに関する知識をテストします。