表の基本

表は次のようにして書けます。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>
IE73.81%
Firefox18.43%
Safari6.14%

罫線を入れるのは 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>
IE73.81%
Firefox18.43%
Safari6.14%

罫線が二重になってしまいましたが,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>
IE73.81%
Firefox18.43%
Safari6.14%

ブラウザの名前だけ見出し風にしてみましょう。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>
IE73.81%
Firefox18.43%
Safari6.14%

罫線と中身との間隔が少し狭いでしょうか。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>
IE73.81%
Firefox18.43%
Safari6.14%

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

td, th { padding: 0.2em 0.7em }
IE73.81%
Firefox18.43%
Safari6.14%

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

th { text-align: left }
td { text-align: right }
IE73.81%
Firefox18.43%
Safari6.14%

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

table { border-collapse: collapse }
IE73.81%
Firefox18.43%
Safari6.14%

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

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>
IE73.81%
Firefox18.43%
Safari6.14%

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

th { background-color: #FFC } /* light yellow */
td { background-color: #CFF } /* light cyan   */
IE73.81%
Firefox18.43%
Safari6.14%

この一つの表のデザインをスタイルシートにそのまま書き込むと,別のデザインの表も作りたくなったときに困ります。そこで,この表のデザインに対して,たとえば 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>
ブラウザのシェア
IE73.81%
Firefox18.43%
Safari6.14%

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

caption { caption-side: bottom }
ブラウザのシェア(2008年4-6月
IE73.81%
Firefox18.43%
Safari6.14%

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


奥村晴彦

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