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

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

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

テーブルは、必要に応じてテーブルヘッダ、テーブルボディ、テーブルフッタに構造分けします。 table要素の子孫にthead要素、tbody要素、tfoot要素を配置します。 さらにtbody要素の子孫にtr要素を配置して、 tr要素の子孫にth要素やtd要素を配置します。

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

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

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

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

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

■使用例

以下のサンプルは、簡単なテーブル（表）を作成しています。 caption要素でテーブルにキャプションを付け、 thead要素とtbody要素でテーブル全体を大まかにヘッダーとボディに分けています。

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

Sponsors