HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<table>
テーブル（Table）要素。表形式のデータを構造化して表示するための要素です。
info
概要
<table> 要素は、行と列を持つ二次元の表形式データを定義します。表の構成要素として、<caption> (表のタイトル)、<thead> (ヘッダー部分)、<tbody> (本体部分)、<tfoot> (フッター部分)、<tr> (行)、<th> (ヘッダーセル)、<td> (データセル)などがあります。
データの表示のために使い、レイアウト目的で使うべきではありません。
play_circle
デモ (静的表示)
HTML (Source)
<table>
<caption>製品の在庫状況</caption>
<thead>
<tr>
<th>製品名</th>
<th>価格</th>
<th>在庫</th>
</tr>
</thead>
<tbody>
<tr>
<td>A商品</td>
<td>1000円</td>
<td>○</td>
</tr>
</tbody>
</table>
Preview (Result)
| 製品名 | 価格 | 在庫 |
|---|---|---|
| A商品 | 1000円 | ○ |
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| summary (非推奨) | 表の内容の要約を提供します。非推奨。現在は <caption> または関連付けられたテキストで代替します。 |
| border (非推奨) | 表の周囲に境界線を引くかどうか（1または空文字）を指定します。非推奨。現在はCSSで指定します。
|
colspan (<th>, <td>) |
セルが結合する列の数を指定します。 |
rowspan (<th>, <td>) |
セルが結合する行の数を指定します。 |
headers (<td>) |
データセルに関連付けられるヘッダーセル（<th>）の id をスペース区切りで指定します。アクセシビリティ向上に役立ちます。 |
scope (<th>) |
ヘッダーが適用されるセルの範囲を指定します (例: col, row, colgroup, rowgroup)。 |
code
実用例
1. 行と列の結合（`colspan`, `rowspan`）
<table border="1">
<tr>
<th rowspan="2">カテゴリ</th> <!-- 2行結合 -->
<th colspan="2">詳細</th> <!-- 2列結合 -->
</tr>
<tr>
<td>項目A</td>
<td>項目B</td>
</tr>
</table>
2. セクション構造を持つ表 (thead, tbody, tfoot)
<table>
<caption>月別売上</caption>
<thead>
<tr><th>月</th><th>売上</th></tr>
</thead>
<tbody>
<tr><td>1月</td><td>1000</td></tr>
<tr><td>2月</td><td>1200</td></tr>
</tbody>
<tfoot>
<tr><td>合計</td><td>2200</td></tr>
</tfoot>
</table>
lightbulb
知っておくべき重要事項
design_services
セマンティックな構造の重要性
表を単なるレイアウト目的で使用するのではなく、真の表データに使用し、適切な構造化要素 (
表を単なるレイアウト目的で使用するのではなく、真の表データに使用し、適切な構造化要素 (
<thead>, <tbody>, <th>, <caption>) を使用することが、検索エンジンとアクセシビリティの両方にとって極めて重要です。
accessibility_new
アクセシビリティ
すべての表には
すべての表には
<caption> を含めて、表の目的を明確にしましょう。また、データとヘッダーを正しく関連付けるために、<th> 要素と scope 属性を適切に使用することが推奨されます。複雑な表では headers 属性の利用も検討してください。