<table> 要素は、子要素によってタイトル、グリッドを形成する列と行、セルの構成を持つ表形式のデータを表します。各セルは重複することなくそのグリッドをカバーしていなくてはいけません。
基本的に、ページレイアウトのために<table> 要素を使用することはできません。レイアウトを制御する方法として<table> 要素を使用する場合は、role="presentation"の属性でレイアウトのために使用されていることを明示しなくてはいけません。また、border 属性に空の文字列または1を指定することで、レイアウトのために使用されていないことを明確に示すことができます。
やむを得ずレイアウトのために<table> 要素を使用する場合は、レイアウトのためであることを明示することが奨励されています。ただしブラウザや検索エンジンが、単にレイアウトのために使用されたものであるかどうかを正確に判断するかはわかりません。
| 指定内容 | 表示 |
|---|---|
role="presentation" を指定する
|
おそらくレイアウトのためのテーブル |
border="0" を指定する（非準拠の値）
|
|
cellspacing="0" と cellpadding="0" を指定する（非準拠の属性）
|
|
caption、thead、thなどの要素を使う
|
おそらくレイアウトのためのテーブルではない |
td、thにheadersとscopeの属性を使う
|
|
border 属性に"0"以外の値を指定する
|
|
| CSSによって線幅のあるボーダーが明示的に指定されている | |
summary 属性を使用する
|
好ましくない（レイアウトのためのテーブル、非レイアウトのテーブルの両方にこの属性が使用されてきたことが多いため） |
- カテゴリー
- フロー・コンテンツ、パルパブル・コンテンツ
- 配置場所
- フロー・コンテンツが置ける場所。
- 内容
- 以下の順に配置。
必要に応じて
<caption> 要素、 0個以上の<colgroup> 要素、 必要に応じて<thead> 要素、 必要に応じて<tfoot> 要素、 0個以上の<tbody> 要素、 0個以上の<tbody> 要素または1つ以上の<tr> 要素、 必要に応じて<tfoot> 要素（ただしスクリプトサポート要素と合わせて1つのみ）。 - 属性
-
border="0|1"- 値に空の文字列または1を指定して、レイアウトのために使用されていないことを明確に示すことができます。0を指定した場合はレイアウトテーブルであると解釈される可能性があります（非準拠）。
参考：W3C / 4.9 Tabular data › border attribute — HTML5
- グローバル属性
accesskey,autocapitalize,autofocus,class,contenteditable,data-*,dir,draggable,enterkeyhint,hidden,id,inputmode,is,itemid,itemprop,itemref,itemscope,itemtype,lang,nonce,spellcheck,style,tabindex,title,translate
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5 › table</title>
</head>
<body>
<h1>HTML5 › table</h1>
<p>テーブルの使用について最良のオプションはもちろん、レイアウト方法のための記述を書くよりも、何の説明も必要とされないようにテーブルを調整することです。</p>
<table>
<caption>参加者一覧</caption>
<thead>
<tr>
<th>名前</th>
<th>性別</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<tr>
<th>さとう いちろう</th>
<td>男</td>
<td>81</td>
</tr>
<tr>
<th>すずき じろう</th>
<td>男</td>
<td>64</td>
</tr>
<tr>
<th>やまだ さくら</th>
<td>女</td>
<td>72</td>
</tr>
</tbody>
</table>
</body>
</html>