テーブル

docs.scrimba.com

情報の中には、グリッド形式のものがあります。電車の時刻表、価格プラン、リーグテーブル、栄養成分表：いずれも行と列を持ち、その意味は行と列の整列方法にあります。HTMLには、まさにこの種のコンテンツ用の専用要素セットがあり、それを使用することで、画面とページを読み上げるソフトウェアの両方でグリッドを読み取り可能に保ちます。

テーブルの基本

**テーブル**は、スプレッドシートと同じ形状の行と列のグリッドです。4つの要素で構築します。<table>はグリッド全体をラップします。各<tr>は1つの行です（trはtable rowの略）。行の中に、各<td>は1つのデータセルです（tdはtable dataの略）。セルが列または行にラベルを付ける場合は、代わりに<th>を使用します（thはtable headerの略）。ブラウザはそれを太字で中央配置して、データから区別します。

テーブルは列ごとではなく、行ごとに構築します。<table>はコンテナで、各<tr>は行であり、セルはページ全体で表示される順序で行の内側に配置されます。データセルは<td>です。**ヘッダーセル**は<th>です。列要素はありません。列は、すべての行がセルを同じ順序で保つことによって生じる結果であるため、1つの行が順序を外れるとグリッドが整列しなくなります。

<th>と<td>の違いは見た目だけではありません。<th>は、セルが所在する行または列のヘッダーであることをマークします。ブラウザのデフォルトスタイルである太字と中央配置は、その意味の目に見える部分に過ぎません。もう一方の部分は、他のソフトウェアが読取可能な意味です。

テーブルのソースは**行優先**です：一度に1行ずつ書き、各セルの列はその行内の位置によってのみ決定されます。ブラウザはその行ごとのソースを読み取り、それを2次元グリッドに構築し、セルを横切ってカウントして列に一致させます。マークアップで列に名前を付けるものはないため、グリッドは行が一貫している場合にのみ整列します。

<th>対<td>は、スタイリングのためではなく、セマンティックな区別です。<th>（ヘッダーセル）はブラウザと、ページを読むアシスティブテクノロジー（ページを見ることができない人のためにページを読み上げるスクリーンリーダーなどのソフトウェア）に、このセルがその周囲のデータのラベルであることを伝えます。デフォルトの太字と中央配置の見た目は付随的なものです：CSSで取り除いてもヘッダーはまだ「ヘッダー」を意味します。意味は要素に含まれており、その外観には含まれていないからです。それが本当の理由で、他の方法でグリッドを描画する代わりに、本当のテーブルを使用します。

<table>
  <tr>
    <th>曜日</th>
    <th>営業時間</th>
  </tr>
  <tr>
    <td>月曜日</td>
    <td>8:00から18:00</td>
  </tr>
  <tr>
    <td>土曜日</td>
    <td>9:00から14:00</td>
  </tr>
</table>

2つのヘッダーセルが上部にあり、次に2つのデータ行があります。ブラウザはグリッドを描画し、各列をそのコンテンツに合わせてサイズ設定し、2つの<th>セルを太字でレンダリングします。

Junoテーブルの基本 4つの要素がグリッドを作ります：全体を囲む<table>、各行の<tr>、セルの<td>、ヘッダーセルの<th>。ヘッダーセルは太字で中央配置されるため、データと区別できます。一度に1行ずつ構築すれば、列が自動的に整列します。

Junoテーブルの基本<tr>で行ごとにテーブルをレイアウトすると、各行がセルを同じ順序で保つため列が生じます。ヘッダーに<th>、データに<td>を使用し、その選択は意味を持ちます。太字の見た目だけではありません。1つの行のセル数を誤ると、グリッド全体が歪みます。

Junoテーブルの基本 マークアップは行優先なので、列は各行がセルを同じ順序で保つため存在します。注意深くカウントしてください。<th>は、スクリーンリーダーにセルがラベルであることを告げることで、CSSの太字処理では実現できないことを実現します。そのセマンティック分割は、本当のテーブルを使用する理由です。

テーブルの構造化

行の順序は人々が読む順序なので、<th>セルで構築した**ヘッダー行**を上部に配置してください。その後、すべての行を同じ長さに保ちます：ヘッダー行に3つのセルがある場合、その下の各<tr>にも3つの<td>セルが必要です。セルが不足している行はグリッドに隙間を残し、列は整列しなくなります。ここで学ぶべき新しいことはなく、既に知っている行に注意を払うだけです。

テーブルが大きくなると、行を**行グループ**に分類して、構造を明確にします。ヘッダー行を<thead>でラップし、データ行を<tbody>でラップし、合計行などのサマリー行を<tfoot>でラップします。これらのグループ自体はレイアウトをあまり変更しませんが、スタイリング、印刷、およびアシスティブソフトウェア用にテーブルの部分をラベル付けします。

<caption>でテーブルにタイトルを付け、それを<table>の最初の子として配置します。グリッドの上部にレンダリングされ、テーブルの横に置くヘッダーとは異なり、マークアップでテーブルに結合されています。

セルが1つ以上の列または行をカバーする必要がある場合は、colspanまたはrowspanを使用します。colspan="2"でセルを2列分の幅にします。rowspan="2"でそれを2行分の高さにします。それがカバーする位置は、そのスペースが既に占有されているため、それらの行から除外されます：

<thead>
  <tr>
    <th rowspan="2">地域</th>
    <th colspan="2">2024年</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
  </tr>
</thead>

「地域」は2つのヘッダー行を埋めます。「2024年」は2つの列を埋め、Q1とQ2は2番目の行でそれの下に配置されます。

行グループは装飾ではありません。<thead>と<tfoot>は、長いテーブルが印刷されるときにすべてのページで繰り返されるように定義されているため、ヘッダーはページ区切りで表示され続けます。また、<tbody>がスクロールしている間、固定ヘッダーまたはフッターを保つことができます。テーブルは複数の<tbody>グループを保持でき、これは単一のグリッドを破損せずに長いデータセットをラベル付きセクションに分割するクリーンな方法です。

colspanとrowspanは**セル結合**（1つのセルが複数の列または行をカバーする）を制御し、これはテーブルが最も頻繁に無音で中断する場所です。すべての行はグリッドの完全な幅を説明する必要があります。colspan="2"を持つセルは2つの列を埋めるため、それが重複する行はそれらの位置を空のままにしておく必要があり、独自のセルを提供しなければなりません。誤ってカウントすると、ブラウザはまだ何かをレンダリングしますが、予定されたグリッドではありません。<caption>はテーブルのアクセシブル名です：アシスティブソフトウェア（ページを読み上げるスクリーンリーダーなどのツール）はリーダーがテーブルに到達したときに発表し、近くのヘッダーが実行できない仕事を実行します。

<table>
  <caption>地域別四半期収益</caption>
  <thead>
    <tr>
      <th>地域</th>
      <th>Q1</th>
      <th>Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>北部</th>
      <td>£12,000</td>
      <td>£15,400</td>
    </tr>
    <tr>
      <th>南部</th>
      <td>£9,800</td>
      <td>£11,200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <td>£21,800</td>
      <td>£26,600</td>
    </tr>
  </tfoot>
</table>

Junoテーブルの構造化 行は上から下へ読むため、<th>セルのヘッダー行で始めてください。その後、すべての行を同じ長さに保ちます：上部に3つのヘッダーがある場合、下の各行に3つの<td>セルが必要です。セルが不足しているのはグリッドの隙間であり、これが初期段階で人々を困惑させるものです。

Junoテーブルの構造化 テーブルが成長するとグループ化します：ヘッダー行の<thead>、データの<tbody>、合計行の<tfoot>、タイトルの最初の子として<caption>を使用します。colspanとrowspanはセルを列または行の全体に拡張しますが、カバーされた位置がそれらの行から削除されることを覚えておいてください。カウントを正しく取得すればグリッドが保たれます。

Junoテーブルの構造化 グループには本当の重みがあります：<thead>と<tfoot>はテーブルを印刷するときに繰り返され、スクロールするボディを固定することができます。<caption>はスクリーンリーダーが読み出す名前です。結合はサイレントトラップです。すべての行はグリッドの幅全体を埋める必要があるため、カバーされた位置はセルを取得しません。ブラウザは誤ってカウントするのを喜んでレンダリングします。これはまさにそれが見つけにくい理由です。

アクセシブルなテーブル

アクセシブルなテーブルは、スクリーンリーダーを使用してページを**スクリーンリーダー**（ページを読み上げるソフトウェア）で聞く人を含め、誰もが理解できるテーブルです。最も役立つことは、既にツールキットにあります：<td>ではなく、すべてのヘッダーセルに<th>を使用してください。スクリーンリーダーはどのセルがラベルであり、どれがデータであるかをリスナーに伝えることができるため、「£15」のような値は、それが属する列とともに発表されます。すべてのセルが通常の<td>であるテーブルは、数字の平らな壁として読み上げられ、それを基盤にするものはありません。

<th>はセルをヘッダーとしてマークしますが、列ヘッダーと行ヘッダーの両方があるテーブルでは、どちらであるかを説明しません。**スコープ**属性がそれを明示します。scope="col"はヘッダーがその列全体をラベル付けることを示します。scope="row"はそれが行全体をラベル付けることを示します。すべての<th>に追加すると、スクリーンリーダーは、任意のデータセルを正しい列ヘッダーと行ヘッダーとすぐにペアにすることができます。

<th scope="col">月</th>
<th scope="row">降雨量</th>

単純なグリッドの場合、ブラウザはこれらの関連付けを推測できることが多いですが、scopeで明示することで推測が不要になり、追加するコストはほぼありません。

scopeは1レベルの行ヘッダーと列ヘッダーを持つテーブルをカバーしています。複数の列または2層の列ヘッダーにまたがるヘッダーを持つ複雑なテーブルは、データセルがもはや正確に1つの列ヘッダーと1つの行ヘッダーを上に持たないため、scopeであっても曖昧なままです。それらの場合は、セルを**idとheaders**で明示的に関連付けます。各ヘッダーセルにid（その要素の一意の名前）を付け、各データセルのheaders属性に関連するIDをリストしてください：

<th id="q1">Q1</th>
<th id="north">北部</th>
<td headers="north q1">£12,000</td>

データセルは、どのヘッダーがそれを説明しているかを正確に指名し、読む順序で指定し、アルゴリズムが関係を推測する必要はありません。冗長なので、本当に必要なテーブルに保っておいてください。まずscopeに目を向け、ヘッダー構造がscopeでは表現するには複雑すぎない限り、idとheadersにエスカレートしてください。

アクセシビリティはテーブルだけに広がります。Accessibilityチャプターは画像の残りの部分をカバーしています。

Junoアクセシブルなテーブル 最大の成功は追加費用なし：ヘッダーに<th>、データに<td>を使用します。スクリーンリーダーはその分割に頼って、各値を属する列ヘッダーで読み上げます。「£15」は単独ではなく列とともに到着します。スキップするとテーブル全体が散在する数字の壁として着地します。

Junoアクセシブルなテーブル ヘッダーセルにscopeを配置します：列ヘッダーにはscope="col"、行ヘッダーにはscope="row"です。これにより、スクリーンリーダーが各データセルを両軸の正しいヘッダーに結合できます。ブラウザは単純なグリッドを推測できますが、それを述べるのは安価であり、推測を取り除きます。

Junoアクセシブルなテーブルscopeは普通の各方向に1つのヘッダーグリッドを処理します。ヘッダーがスパンされてスタックされ、セルが軸上で複数のヘッダーを持つ場合、ヘッダーのidとデータセルのheadersに切り替えて、手動でそれらを配線します。冗長なので、本当に必要なテーブルに保ち、scopeで残りを実行させます。

テーブルはデータ用で、レイアウトではない

CSSがレイアウトを処理できる前の時代、人々はテーブルからページレイアウト全体を構築していました：メニューを左に、コンテンツを右に配置する<table>です。視覚的には機能するため、古いページと一部のメールテンプレートにまだ表示されます。コピーしないでください。テーブルは**表形式データ**用です。行と列のグリッドに属する情報です。ページの部分を配置することは、CSSの仕事です。データを保持する代わりに物を配置するのにテーブルを使用すると、スクリーンリーダーを使用している人はページを読みにくくなり、後で調整しにくくなります。

規則は短いです：<table>は「このコンテンツは関連データのグリッドです」を意味します。情報が本当に行と列を持つときに使用します：スケジュール、比較、結果セット。ページをレイアウトするのに使用しないでください。データではないものを整列させるのに使用しないでください。CSSグリッドとフレックスボックスは適切にレイアウトを実行し、画面サイズに適応し、HTMLが配置ではなくコンテンツを説明するようにしておきます。

列を取得するのにテーブルに手を伸ばすことは、古典的な誤用です。コンテンツがナビゲーションバーまたはページ全体に広がるフォームの場合、表形式データではなく、正しく見えるようにできますが、テーブルは間違ったツールです。

レイアウトにテーブルを使用すると、ページを読むアシスティブソフトウェア（ページを読み上げるスクリーンリーダーなどのツール）にデータではないデータ構造を提供します。スクリーンリーダーは、ユーザーがセルごとに移動できるテーブルをその寸法で発表し、すべての地域がグリッド内の関連値であるかのようにレイアウトスキャフォールディングを処理します。結果は、本来はヘッダー、サイドバー、記事である「テーブル、4列、10行」のようなアナウンスです。

また、読取順序の問題もあります。アシスティブソフトウェアと検索エンジンは、画面に表示される順序ではなく、HTMLに表示される要素の順序である**ソース順**でページを読みます。レイアウトテーブルはソース順序を視覚グリッドと一致させるように強制します。リスナーにとって最初に来るべきコンテンツ（メイン記事）は、視覚列がその必要があるため、ナビゲーション列の後に終了する可能性があります。CSSレイアウトはそのカップリングを破ります：ソースに重要なコンテンツを早く保ち、画面のどこにでも配置できます。データのテーブルを保ち、読取順序はあなたが制御します。

1つのグレーエリアはHTMLメールです。古いメールクライアントはまだ信頼性の高いCSSレイアウトを欠いており、テーブルベースの構造は一般的です。これはその媒体の制約であり、ウェブに戻すパターンではありません。

<!-- 誤り：サイドバーを記事の横に配置するために使用されるテーブル -->
<table>
  <tr>
    <td><nav>...</nav></td>
    <td><article>...</article></td>
  </tr>
</table>

<!-- 正しい：実際の要素で、CSSが列を処理 -->
<nav>...</nav>
<article>...</article>

これは、What is HTMLに記載されている構造とプレゼンテーション分離と同じです：HTMLの構造、CSSのレイアウト。意味別に要素を選択する場合は、Semantic HTMLを参照してください。

Junoテーブルはデータ用で、レイアウトではない テーブルは、グリッド、関連する値の行と列に属するデータ用です。古いサイトがそのように使用していても、ページを配置するためではありません。ページの部分を配置するのはCSSの仕事であり、それをテーブルに折りたたむとページが読み上げられにくく、変更しにくくなります。

Junoテーブルはデータ用で、レイアウトではない コンテンツが本当にデータのグリッドである場合にのみ<table>を使用します：スケジュール、比較、結果リスト。ページをレイアウトするか、データ以外を整列させるには、CSSグリッドまたはフレックスボックスに手を伸ばし、画面に適応し、HTMLがコンテンツのままにします。レイアウト義務に押し込められたテーブルは古典的な間違ったツールです。

Junoテーブルはデータ用で、レイアウトではない レイアウトテーブルはスクリーンリーダーを誤解させます：データグリッドを聞き、意味のない行と列を読み上げます。また、ソース順序が実際に読むアシスティブテクノロジーと検索エンジンである場合に、ソース順序を視覚グリッドに固定します。データのテーブルを保ち、CSSが物を配置させ、読取順序はあなたの制御下にあります。HTMLメールは唯一の例外です。クライアントが過去に立ち往生しているためだけです。