Home » ★HTML Living Standard リファレンス

★HTML Living Standard リファレンス

<table> …… テーブル(表)を表す
Internet Explorer
Microsoft Edge
Google Chrome
Safari
Firefox
Opera
広告



<table>タグは、テーブル(表)を表す際に使用します。

基本的なテーブルの構造は、
table要素でテーブル全体を定義して、その子孫のtr要素がテーブルの行を定義します。
tr要素の子孫にth要素td要素を配置してテーブルの各セルを定義します。

必要に応じて、table要素の子孫に
thead要素tbody要素tfoot要素を配置して、
テーブル全体を大まかにテーブルヘッダ、テーブルボディ、テーブルフッタに構造分けします。

必要に応じて、caption要素でテーブルにキャプションを付けたり、
colgroup要素で列をグループ化して、
複雑になりがちなテーブルの構造を分かりやすくします。

要素の順序について

テーブルを作成するのにすべての要素が必須ということではありませんが、
これらの要素を使う場合には、table要素の子孫要素として以下の順序で配置します。

  1. caption要素
  2. colgroup要素
  3. thead要素
  4. tbody要素
  5. tr要素
  6. tfoot要素

■使用例

以下のサンプルは、caption要素でテーブルにキャプションを付け、
thead要素tbody要素
テーブル全体を大まかにテーブルヘッダーとテーブルボディに分けています。
tr要素で水平方向の行を定義して、th要素やtd要素で各セルを定義しています。

HTMLソース

<table>
 <caption>性格と傾向</caption>
 <thead>
  <tr><th>性格</th><th>消極タイプ</th><th>積極タイプ</th></tr>
 </thead>
 <tbody>
  <tr><th>傾向</th><td>受動的な傾向</td><td>能動的な傾向</td></tr>
  <tr><th>長所</th><td>慎重で控えめ</td><td>大胆で軽やか</td></tr>
 </tbody>
</table>

↓↓↓

ブラウザ上の表示

性格と傾向
性格 消極タイプ 積極タイプ
傾向 受動的な傾向 能動的な傾向
長所 慎重で控えめ 大胆で軽やか

■使用例

以下のサンプルは、数独パズルをテーブルで表した使用例です。
このテーブルには特に必要がないためヘッダーがありません。
セルの区切りを見やすくするため、CSSのborderプロパティなどでセル同士の境界線を引いています。

HTMLソース

<style>
 #sudoku { border-collapse: collapse; border: solid thick; }
 #sudoku colgroup, table#sudoku tbody { border: solid medium; }
 #sudoku td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>

<h1>今日の数独</h1>
<table id="sudoku">
 <colgroup><col><col><col>
 <colgroup><col><col><col>
 <colgroup><col><col><col>
 <tbody>
  <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
  <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
  <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
 <tbody>
  <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
  <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
  <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
 <tbody>
  <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
  <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
  <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
</table>

↓↓↓

ブラウザ上の表示

今日の数独

1 3 6 4 7 9
2 9 1
7 6
2 4 3 9 8
5 9 7 1
6 5 2
7
9 8 2 5

■使用例

table要素やtr要素などのテーブルを作成する要素は、初期値ではボーダーなどのスタイルが無く、見づらいものになりがちです。
以下のサンプルは、テーブルを見やすくするためにCSSでボーダーや背景色を指定したものです。

HTMLソース

<style>
 #fruits {border-collapse:collapse; border:solid thick #CC3333;}
 #fruits td {border:solid thin #CC3333; width:100px; text-align:center;}
 #fruits th {border:solid thin #CC3333; width:100px; text-align:center; background-color:#FF6666; color:#ffffff;}
 #fruits tr:nth-child(2n+1) {background-color:#ffcccc;}
 #fruits tr:nth-child(2n+0) {background-color:#ccffcc;}
</style>

<table id="fruits">
 <caption>フルーツ在庫表</caption>
 <thead>
  <tr><th>品名</th><th>在庫</th></tr>
 </thead>
 <tbody>
  <tr><td>みかん</td><td>10箱</td></tr>
  <tr><td>りんご</td><td>20盛</td></tr>
  <tr><td>バナナ</td><td>50房</td></tr>
  <tr><td>メロン</td><td>8個</td></tr>
  <tr><td>すいか</td><td>2玉</td></tr>
  <tr><td>レモン</td><td>20袋</td></tr>
  <tr><td>ライチ</td><td>80個</td></tr>
  <tr><td>キウイ</td><td>50個</td></tr>
  <tr><td>ぶどう</td><td>30房</td></tr>
 </tbody>
</table>

↓↓↓

ブラウザ上の表示

フルーツ在庫表
品名 在庫
みかん 10箱
りんご 20盛
バナナ 50房
メロン 8個
すいか 2玉
レモン 20袋
ライチ 80個
キウイ 50個
ぶどう 30房

テーブルをページレイアウトに使わない

テーブルをページレイアウトを制御する方法として使用してはなりません。
テーブルを誤用すると、表形式のデータを抽出するツールが非常に混乱します。
また、スクリーンリーダーなどのアクセシビリティツールを利用しているユーザーにとって、ページ内を移動するのが困難になる可能性があります。

レイアウトにHTMLのテーブルを使用する代わりに、
CSSグリッドレイアウト、
CSSフレキシブルボックスレイアウト、
CSSマルチコラムレイアウト、
CSS位置決め、
CSSテーブルモデルなど、
さまざまな代替手段があります。

■関連項目

  • <table> …… テーブル(表)を表す
  • <caption> …… テーブルのキャプションを表す
  • <colgroup> …… テーブル内の列グループを表す
  • <col> …… 列グループ内の列を表す
  • <tbody> …… テーブルのデータ本体を表す
  • <thead> …… テーブルのヘッダーを表す
  • <tfoot> …… テーブルのフッターを表す
  • <tr> …… テーブル内の行を表す
  • <td> …… テーブル内のデータセルを表す
  • <th> …… テーブル内のヘッダーセルを表す
広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.