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>）要素を含めることができます。
このテーブルの子は次の順序で表示されます。
<caption>要素<colgroup>要素<thead>要素<tbody>要素<tfoot>要素
<table>要素については行、表の見出しのセル、見出しのセル、行、
テーブルデータセルです。<colgroup> については最後に説明します。
表の説明
ネイティブのセマンティック要素であるため、<caption> が推奨されます。
を使用して、テーブルに名前を付けることができます。<caption> は、プログラムによって関連付けられたわかりやすいテーブルタイトルを提供します。内容
デフォルトですべてのユーザーに表示されます。
<caption> 要素は、<table> 要素にネストする最初の要素にする必要があります。含めることで、すべてのユーザーが
前後のテキストを読まなくても、すぐにテーブルで使用できます。または、aria-label または aria-labelledby を使用します。
これを <table> に指定して、キャプションとしてアクセス可能な名前を指定します。<caption> 要素には要素固有の属性はありません。
説明が表の外側に表示されます。キャプションの場所は、CSS の caption-side プロパティで設定できます。このプロパティは、
非推奨の align 属性を使用するよりもおすすめの方法です。これにより、キャプションを上下に設定できます。左側と右側
inline-start と inline-end を使用した横配置は、まだ完全にはサポートされていません。[上] は、ブラウザのデフォルトのプレゼンテーションです。
できれば、データテーブルには明確なヘッダーとキャプションがあり、ほぼ一目瞭然になるだけのシンプルなものにします。注意点として
すべてのユーザーが同じ認知能力を持っているわけではありません。表が「論点を述べている」場合、または解釈が必要な場合は、
表の主なポイントまたは機能の簡単な要約。要約をどこに置くかは、その長さと複雑さによって異なります。
短い場合は、キャプションの内部テキストとして使用します。長い場合は字幕に要約し、
段落し、これら 2 つを aria-describedby と関連付けます。
属性です。テーブルを <figure> に配置し、サマリーを <figcaption> に配置することもできます。
データのセクショニング
表のコンテンツは最大 3 つのセクションで構成されます。1 つ以上の表のヘッダー（<thead>）、表の本文（<tbody>）、
およびテーブルのフッター（<tfoot>）。すべて省略可能で、それぞれ 1 つ以上を選択できます。
これらの要素は、テーブルのアクセシビリティを低下させるものではありませんが、ユーザビリティの点では有用です。提供されるサービス
紹介しましたたとえば、ヘッダーのコンテンツは固定できます。
一方、<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> テーブル ヘッダーセルのコンテンツが中央に配置され、太字で表示されます。これらのデフォルトスタイルは
とすべてのスタイル設定を、個々のセルで使用できた非推奨の属性ではなく、CSS で制御することをおすすめします。
行、さらには <table> までクエリを実行できます。
セル間やセル内のパディング、枠線、テキストの配置に関する属性もありました。Cellpadding と cellpacing、
セルのコンテンツとその境界の間のスペース、および隣接するセルの境界の間のスペースを定義する、
CSS の border-expand および border-spacing 準拠
プロパティを使用します。border-collapse: collapse が設定されている場合、Border-spacing は無効になります。border-collapse: separate; の場合
を設定した場合、empty-cells: hide; を使用すると空のセルを完全に非表示にできます。表のスタイル設定について詳しくは、
表関連の CSS スタイルを紹介するインタラクティブなスライド資料。
この例では、表の枠線と各セルに CSS を追加し、一部の機能をより明確にしています。
この例では、キャプション、テーブル ヘッダー、テーブル本文があります。このヘッダーの行には 3 つのヘッダー <th> セルが含まれています。
3 つの列が作成されます本文には 3 行のデータが含まれます。最初のセルは行のヘッダーセルであるため、<td> ではなく <th> を使用します。
<th> セルはセマンティックな意味を持ち、暗黙的に columnheader の ARIA ロールを持ちます。
または rowheader. を使用します。表のセルの列または行のヘッダーとしてセルを定義します。
列挙された scope 属性の値に応じて異なります。scope が明示的に設定されていない場合、ブラウザはデフォルトで col または row に設定されます。
セマンティック マークアップを使用しているため、1956 セルには Year と Lou Minious の 2 つのヘッダーがあります。この関連付けから「1956」がは
「年」「Lou Minious」の卒業式でしたこの例では、テーブル全体を見ると、関連付けが視覚的にはっきりと見て取れます。
<th> を使用すると、ヘッダー列または行がビューの外にスクロールされた場合でも関連付けが行われます。また、kubectl の「get」コマンドや
<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 行にわたるため、最初または最後の列のセルが宣言されていません。
1 つのセルが、scope 属性だけでは設定できない関連付けを含む複数のヘッダーセルで定義されている場合は、次のようになります。
headers 属性には、関連するヘッダーのスペース区切りリストを指定します。この例はより複雑なテーブルであるため、明示的に
scope 属性を使用してヘッダーの範囲を指定します。さらに明確にするために、各セルに headers 属性を追加しました。
このような単純なユースケースでは、headers 属性は必要なかったかもしれませんが、次のようにツールバーに含めることが重要です。
テーブルが複雑になってきます複雑な構造の表（見出しやセルが結合されている表や、他の部分と結合されている表など）
列ヘッダーまたは行ヘッダーのレベルが 2 つを超える場合は、関連するヘッダー セルを明示的に識別する必要があります。このような複雑なテーブルでは、
各データセルを対応する各ヘッダー セルに関連付ける。関連するすべてのヘッダーの id 値をスペースで区切ったリスト
headers 属性の値として使用できます。
headers 属性は <td> 要素でより一般的に見られますが、<th> でも有効です。
とはいえ、表の構造が複雑であると、スクリーン リーダーのユーザーだけでなく、すべてのユーザーが理解しづらくなることがあります。認知的 スクリーン リーダーのサポートに関しては、範囲やヘッダーを追加しなくても、スパンセルがほとんどまたはまったくないシンプルな表の方が、 できます。また、管理も簡単です。
表のスタイル設定
簡単に説明したように、比較的あいまいな要素が 2 つあります。列グループ <colgroup> と要素です。
その唯一の子孫である空の <col> 列要素です。「
<colgroup> 要素は、テーブル内の列のグループまたは <col> 要素を定義するために使用されます。
使用する場合は、<table> 内で、<caption> の直後かつ任意のテーブルデータの前に、列グループをネストする必要があります。
複数の列にまたがっている場合は、span 属性を使用します。
通常、表のコンテンツの概要順序は次のとおりです。<table> と <caption> は、
次の要素を含める必要があります。
<table>
<caption>Table Caption</caption>
<colgroup>
<col/>
</colgroup>
<thead>...
<colgroup> も <col> も、テーブルのアクセシビリティを改善するという意味的な意味を持ちませんが、
を使用すると、CSS による列の幅の設定など、限定的な列のスタイル設定を利用できます。
<col> スタイルは、スタイルをオーバーライドする <td> または <th> スタイルがない限り、列のスタイル設定を行います。たとえば
<colspan> は、表の一部の行のセルを結合するのに使用しますが、すべての行のセルは結合しません。tr > *:nth-child(8) などのセレクタでは、
これにより、各行の 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> に設定された背景エフェクトをすべて透過できるようにします。
デフォルトでは、テーブルは応答しません。デフォルトでは、コンテンツに応じてサイズが変更されます。テーブルを取得するには追加の measure が必要です
レイアウトのスタイル設定を拡張し、さまざまなデバイスで効果的に機能するようにしました。表要素の CSS 表示プロパティを変更する場合は、
ARIA role 属性を含める。冗長に思えるかもしれませんが、一部のブラウザでは、CSS の display プロパティがユーザー補助ツリーに影響する可能性があります。
データの提示
テーブル要素には、支援技術が行と列を移動できるようにするセマンティックな意味を持つ
「道に迷う」ことはありません<table> 要素は表示には使用しないでください。リスト上の見出しが必要な場合は、ヘッダーを使用します。
およびリストです。コンテンツを多数の列にレイアウトする場合は、複数列レイアウトを使用します。
コンテンツをグリッド内にレイアウトする場合は、CSS グリッドを使用します。データにはテーブルのみを使用します。次のように考えてください。データを会議でプレゼンテーションするためにスプレッドシートが必要な場合は、<table> を使用します。
Keynote や PowerPoint などのプレゼンテーション ソフトウェアの機能を使用する場合は、説明リストが必要になります。
テーブルの列の並べ替えは JavaScript の機能ですが、ヘッダーをマークアップして、列が並べ替え可能であることをユーザーに知らせることは HTML の機能です。
昇順、降順、または並べ替えなしを示すアイコンを使用して、テーブルの列を並べ替えることができることをユーザーに伝えます。現在並べ替えられている列は、
並べ替えの方向を列挙した aria-sort 属性が含まれている。
<caption> は、aria-live と
動的に更新され、スクリーン リーダーのユーザーに表示されるスパンです。この列はヘッダーのコンテンツをクリックして並べ替えることができるため、ヘッダーのコンテンツは <button> にする必要があります。
表形式データを提示しない場合は、<table> を使用しないでください。プレゼンテーションにテーブルを使用する場合は、role="none" を設定します。
多くのデベロッパーはフォームのレイアウトにテーブルを使用しますが、その必要はありません。ただし、HTML フォームについて理解しておく必要があるので、これについては次で説明します。
理解度をチェックする
テーブルに関する知識をテストします。
見出しとなるセルのマークアップに使用する要素は、次のうちどれですか。
<header><caption><th>表を使ったレイアウトが適している可能性が高いのは、次のうちどの情報ですか。
<dl> 向けです。<ul> 向けです。