表

表の基本

表は次のようにして書けます。tr は table row，td は table data の意味です。tbody は省略できます（HTMLとXHTMLで同じ文書構造にするためには必要のようです：ここ参照）。

<table>
  <tbody>
    <tr><td>IE</td><td>73.81%</td></tr>
    <tr><td>Firefox</td><td>18.43%</td></tr>
    <tr><td>Safari</td><td>6.14%</td></tr>
  </tbody>
</table>

罫線を入れるのは border="幅" です。幅の単位はピクセルです（以下同様）。

<table border="1">
  <tbody>
    <tr><td>IE</td><td>73.81%</td></tr>
    <tr><td>Firefox</td><td>18.43%</td></tr>
    <tr><td>Safari</td><td>6.14%</td></tr>
  </tbody>
</table>

罫線が二重になってしまいましたが，cellspacing="幅" で二重線の間隔が設定できます。これをゼロにすれば一本の線になります。

<table border="1" cellspacing="0">
  <tbody>
    <tr><td>IE</td><td>73.81%</td></tr>
    <tr><td>Firefox</td><td>18.43%</td></tr>
    <tr><td>Safari</td><td>6.14%</td></tr>
  </tbody>
</table>

ブラウザの名前だけ見出し風にしてみましょう。th は table header の意味です。

<table border="1" cellspacing="0">
  <tbody>
    <tr><th>IE</th><td>73.81%</td></tr>
    <tr><th>Firefox</th><td>18.43%</td></tr>
    <tr><th>Safari</th><td>6.14%</td></tr>
  </tbody>
</table>

罫線と中身との間隔が少し狭いでしょうか。cellpadding="幅" で調節できます。

<table border="1" cellspacing="0" cellpadding="5">
  <tbody>
    <tr><th>IE</th><td>73.81%</td></tr>
    <tr><th>Firefox</th><td>18.43%</td></tr>
    <tr><th>Safari</th><td>6.14%</td></tr>
  </tbody>
</table>

このような外観はスタイルシートで変更したほうがいいでしょう。td と th の上下のパディングを全角0.2文字分，左右のパディングを全角0.7文字分にするには次のように設定します。

td, th { padding: 0.2em 0.7em }

さらに th は左詰め，td は右詰めにしてみましょう。

th { text-align: left }
td { text-align: right }

ところで，cellspacing="0" で結合した罫線は少し太めです。スタイルシートを使うなら，border-collapse を指定すれば線が1本になります。

table { border-collapse: collapse }

外枠だけ太線にしてみましょう。

table { border: 3px solid black }

<table border="1">
  <tbody>
    <tr><th>IE</th><td>73.81%</td></tr>
    <tr><th>Firefox</th><td>18.43%</td></tr>
    <tr><th>Safari</th><td>6.14%</td></tr>
  </tbody>
</table>

色も指定してみましょう。

th { background-color: #FFC } /* light yellow */
td { background-color: #CFF } /* light cyan   */

この一つの表のデザインをスタイルシートにそのまま書き込むと，別のデザインの表も作りたくなったときに困ります。そこで，この表のデザインに対して，たとえば hoge という名前を付け，それに対してのスタイルを定義します。さきほどと違って，中の線は灰色にしました。

table.hoge {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 3px solid black;
}
table.hoge td {
  text-align: right;
  padding: 0.2em 0.7em;
  border: 1px solid gray;
  background-color: #CFF;
}
table.hoge th {
  text-align: left;
  padding: 0.2em 0.7em;
  border: 1px solid gray;
  background-color: #FFC;
}

そうすれば，次のように class="hoge" と指定するだけで，このデザインの表が作れます。 ついでに caption でキャプションを付けました。

<table class="hoge">
  <caption>ブラウザのシェア</caption>
  <tbody>
    <tr><th>IE</th><td>73.81%</td></tr>
    <tr><th>Firefox</th><td>18.43%</td></tr>
    <tr><th>Safari</th><td>6.14%</td></tr>
  </tbody>
</table>

caption を上に書いても下に書いても，実際のキャプションは上に出ます。 下に出すためには次のようなスタイルを使います（IEはIE7でも対応していません。代わりに <caption align="bottom"> とします）。

caption { caption-side: bottom }

表はキャプションを上に，図はキャプションを下に付けるのが一般的です。

奥村晴彦

Last modified: 2010-04-24 17:50:35