<table> …… テーブル（表）を表す

<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要素で各セルを定義しています。

<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プロパティなどでセル同士の境界線を引いています。

<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>

■使用例

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

<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>

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

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

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

■関連項目

Sponsors