表

表の基本

表は次のようにして書けます。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>

罫線を入れるには，スタイルに td { border: 1px solid; } を指定します。

罫線がやや変になってしまいました。これを防ぐには，さらに table { border-collapse: collapse; } とします。

ブラウザの名前だけ見出し風にしてみましょう。th は table header の意味です。th にも罫線が必要でしょうから td, th { border: 1px solid; } とします。

<table>
  <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; }

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

table { border: 3px solid; }

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

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 を上に書いても下に書いても，実際のキャプションは上に出ます。下に出すためには次のようなスタイルを使います。

caption { caption-side: bottom }

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

参考

• Clear Off the Table | Darkhorse Analytics Blog

奥村 晴彦

Last modified: 2014-07-24 16:31:38+09:00