要約

コンテンツをグリッド状にレイアウトするには、テーブル要素ではなくCSSスタイルを使用します。

テクニック

• 表形式以外のコンテンツには、CSSグリッド、フレックス、テーブル、および同様の代替レイアウトを使用します。[[WCAG-1.3.1]]

例

<table role="presentation">
   <tr>
      <td>
         <ul>
            …
         </ul>
      </td>
      <td>
         <ul>
            …
         </ul>
      </td>
   </tr>
</table>

HTML:
<div class="grid">
   <ul>
      …
   </ul>
   <ul>
      …
   </ul>
</div>

CSS:
.grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

HTML:
<div class="flex">
   <ul>
      …
   </ul>
   <ul>
      …
   </ul>
</div>

CSS:
.flex {
   display: flex;
   justify-content: space-evenly;
}

HTML:
<div class="table" role="presentation">
   <div class="row">
      <ul class="cell">
         …
      </ul>
      <ul class="cell">
         …
      </ul>
   </div>
</div>

CSS:
.table {
   display: table;
   width: 100vw;
}
.row {
   display: table-row;
}
.cell {
   display: table-cell;
   width: 50vw;
}

よくある質問

レイアウトテーブルの使用が違反になったのはいつですか？

元々、HTML5仕様には競合するものが２つありました。W3C版ではレイアウト用のテーブルを使用しないことを推奨しており、WHATWG版ではその使用を違反としていました。

W3C版のHTMLは現在廃止されており、EPUB3では参照されなくなったため、表形式のデータをレイアウトする場合を除いてテーブルを使用するのは無効となりました。

このように指針が分かれた結果、古い電子出版物にはレイアウト用のテーブルがあるかもしれません。これらのテーブルは、アクセシブルなレイアウトの要件に従う必要があります（つまり、セマンティックタグは使用しません）。

新しいコンテンツではレイアウト用のテーブルは使用できません。

解説

現在は、様々なCSSレイアウトモデルがサポートされているので、純粋に体裁を整える目的でテーブルを使用することは、もはや正当化されません。

現在のHTML仕様では、レイアウト用のテーブル使用は明確に禁止されています。

テーブルをレイアウト補助として使用しないでください。歴史的に、一部のウェブ製作者は、ページレイアウトを制御する方法として HTMLのテーブルを誤用してきました。この使用法は、不適切です。

レイアウトにテーブルを使用することは、支援技術のユーザーにとって常に問題でした。テーブルマークアップの使用は視覚的な読者には透過的ですが、支援技術のユーザーにはテーブル読み取りモードを強いることになります。これらのユーザーがコンテンツを読むためにはセルと行を移動しなければならないことをコンテンツ製作者がほとんど考慮せず、論理的に読みやすいレイアウトを保証していないことがよくありました。支援技術のユーザーはしばしば、レイアウトを論理的にたどるには、列を下に読むか、行を横切って読むかを推測しなければなりませんでした。

関連リンク

• MDN — <table>: テーブル要素
• HTML — table要素