ウェブサイト作成

<table> テーブル(表)

<table>には使ってない人も多いかと思いますが、いくつかの便利な要素があります。これらを効果的に使ってきれいな表を作りましょう。

テーブル(表)で使用する要素

table

まず<table>に関連するタグを見てみましょう。

  • <talbe>
  • <caption>
  • <tr>
  • <th>
  • <td>
  • <thead>
  • <tfoot>
  • <tbody>
  • <col>
  • <colgroup>

普段使ってないタグや見たことないタグがあるかもしれません。
これらのタグを使うことで、きれいなソースを書くことができ、音声ブラウザを使う人にとって内容を捉えやすくなります。

テーブル(表)の定義

<table>

<table>~</table>でテーブル(表)を作ります。
子要素として <caption>、<col>、<colgroup>、<thead>、<tbody>、<tfoot>、もしくは直接<tr>が入ります。

<caption>

<caption> ~</caption>でテーブルのキャプション(タイトル)を記述します。<table>の直後に一回だけ記述できます。

<tr>

<tr>~</tr>で行を作ります。
子要素として<td>、<th>が入ります 。

<td>

<td>~</td>でセルを作ります。テーブルのセルの内容を記述します。

<th>

<th>~</th>でヘッダーセルを作ります。テーブルのヘッダ部分のセルの内容を記述します。

行のグループ化

テーブルの行をグループ化する要素としてthead要素、tfoot要素、tbody要素があります。表が長い場合にtbody要素にだけスクロールを提供することができます。
また、印刷した際に表が複数ページになる場合、全てのページに表のヘッダとフッタを表示します。

<thead>

<thead>~</thead>でテーブルの行をヘッダ、フッタ、ボディに分ける際のヘッダを記述します。
子要素として<tr>が入ります。

<tfoot>

<tfoot>~</tfoot>でテーブルの行をヘッダ、フッタ、ボディに分ける際のフッタを記述します。
<thead>、<tfoot>、<tbody>の順に記載しますが、表示される順番は<thead>、<tbody>、<tfoot>なので注意してください。
子要素として<tr>が入ります。

<tbody>

<tbody>~</tbody>でテーブルの行をヘッダ、フッタ、ボディに分ける際のボディを記述します。
子要素として<tr>が入ります。

列のグループ化

テーブルの列をグループ化する要素としてcol要素、colgrouop要素があります。

<col>

<col>空要素です。

<colgroup>

<colgroup>~</colgroup>テーブルの列に対してグループ化することができます。
子要素として<col>を入れることができます。

テーブル(表)サンプル

簡単な行のグループ化の使用例です。属性の使い方は別のページに書こうと思います。

成績表
教科 点数
合計 160
国語 30
数学 90
英語 40

<table cellspacing="0" summary="2008年1学期後期テストの成績表">
 <caption>成績表</caption>
 <thead>
  <tr>
   <th scope="row" abbr="教科">教科</th>
   <th scope="row" abbr="点数">点数</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>合計</td>
   <td>160</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>国語</td>
   <td>30</td>
  </tr>
  <tr>
   <td>数学</td>
   <td>90</td>
  </tr>
  <tr>
   <td>英語</td>
   <td>40</td>
  </tr>
 </tbody>
</table>

テーブル(表)で使用する要素の順番

要素の順番は決まっています。特にtfoot要素とtbody要素を間違えないようにしましょう。

  1. caption
  2. col、colgroup
  3. thead
  4. tfoot
  5. tbody