表

table要素による表のスタイルに関連する特性をいくつか示す。

caption-side特性

表に付けるキャプション(caption要素)の位置を指定する。 指定できる値は以下のどれか。

caption-sideをtopに指定する例を以下に示す。

<table style="caption-side: top;">
 <tr><th>品物</th><th>単価</th></tr>
 <tr><td>りんご</td><th>150</th></tr>
 <tr><td>みかん</td><th>30</th></tr>
 <caption>単価表</caption>
</table>

というHTML文書は以下のようにレンダリングされる。

品物単価
りんご150
みかん30
単価表

(caption要素がtable要素の末尾に書かれているが実際には 上に来ている)

border-collapse特性

table要素、あるいは内部の行(tr)、見出し(th)、セル(td) にボーダーを付けたときに、隣接したものを縮訳するかを決める。

たとえば、CSSで

table, tr, td {border: 1px solid}

と定義したうえで、

<table>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>a</td><td>b</td><td>c</td></tr>
</table>

のようなtableを作ると、以下のようになる。

123
abc

隣接した border-collapse を collapse にする。

table, tr, td {border: 1px solid; border-collapse: collapse}

としておくと、同じHTML文書が以下のようになる。

123
abc
border-spacing特性

隣接した枠の間隔を指定する。値を1つ指定すると全ての間隔が、 2つ指定すると、1つ目の値が左右に隣り合ったものの間隔、2つ目の値が 上下に隣り合ったものの間隔を決める。

empty-cells特性

内容を持たないセルの表示をどうすべきかを決定する。

通常table要素で中味のないセルはその枠も表示されない。 この挙動の場合

table, tr, td {border: 1px solid}

というCSSの場合は

<table>
 <tr><td></td><td>4月</td><td>5月</td></tr>
 <tr><td>2009</td><td>5</td><td>4</td></tr>
 <tr><td>2010</td><td>5</td><td>4</td></tr>
 <tr><td>2011</td><td>4</td><td>4</td></tr>
</table>

というHTML文書が

4月5月
200954
201054
201144

のようになり、空セルの周囲の枠がない状態となるが、

table, tr, td {border: 1px solid; empty-cells: show}

とした場合は同じHTML文書が

4月5月
200954
201054
201144

のようにレンダリングされる。

speak-header特性

読み上げソフトを使う場合に表ヘッダ(th)の内容を 毎回読むか、最初の一度だけ読むかを決定する。

yuuji@koeki-u.ac.jp