table 要素の見栄え調整属性

since: 31st/Aug./2001; last modified: 16th/Sep./2001

table 要素には見栄えを調整する属性が定義されています。ここで指定できることはスタイルシートでより詳細に指定できることなので、必要がなければ使わないほうが良いでしょう。但し、クロスブラウザの点で、使う必要があるかもしれません。

テーブルの表示幅

width = Length

• 当該テーブルを表示する幅を指定します。
• 許される値は、単位なしの数字でピクセル数、パーセントつきの数字で表示可能領域のパーセント値

<table width="300">
	...幅300ピクセルのテーブル
</table>
<table width="60%">
	...表示可能幅の 60% の幅を持つテーブル
</table>

テーブルの罫羅線

border = Pixels

• テーブル周囲とセル間の罫羅線の太さを単位なしの数字で指定します。
• 数字はピクセルの大きさと解釈されます。
• 表の外枠で表示する部分は frame 属性で指定します。
• セル間で表示する部分は rules 属性で指定します。
• border 属性しか指定されていない場合は、外枠の四方全てと、全てのセル間に罫羅線が表示されます。

frame = "void" | "above" | "below" | "hsides" | "lhs" | "rhs" | "vsides" | "box" | "border"

• 表を囲む外枠の、どの部分を表示させるかを指定する。
• void: 外枠なし。
• above: 上端のみ。
• below: 下端のみ。
• hsides: 上端と下端のみ。
• vsides: 左右両端のみ。
• lhs: 左端のみ。
• rhs: 右端のみ。
• box: 周囲すべて。
• border: 周囲すべて。初期値。

rules = "none" | "groups" | "rows" | "cols" | "all"

• 表中のセルの間の、どの罫線が出現するかを指定する。罫線の見掛けはブラウザに依存する。
• none: 初期値。罫線なし。
• groups: 罫線は、行グループ (thead、 tfoot、tbody) の間、及び列グループ (colgroup) の間のみに出現する。
• rows: 行間のみ。
• cols: 列間のみ。
• all: すべての行間・列間。初期値。

border 属性しか与えない場合は、自動的に frame="all" rules="all" が指定されたものと解釈されます。

<table border="2">
	...frame="all" rules="all" は暗黙的に指定されたことになる。
	   即ち、テーブルの四方及び全てのセルに罫羅線が表示される。
	   罫羅線幅は２ピクセル。
</table>

<table frame="hsides" rules="groups" border="4">
	...テーブルの上端と下端、
	   及び列グループ間、行グループ間だけに罫羅線が表示される。
	   幅は４ピクセル
</table>

<table summary="frame, rules属性の例"
       border="2"
       frame="hsides" rules="groups">
<colgroup span="1" />
<colgroup span="3" />
<colgroup span="2" />
<thead>
<tr>
<th></th>
<th>1</th><th>2</th><th>3</th>
<th>い</th><th>ろ</th>
</tr>
</thead>
<tbody>
<tr>
<th>a</th>
<td>(a, 1)</td><td>(a, 2)</td><td>(a, 3)</td>
<td>(a, い)</td><td>(a, ろ)</td>
</tr>
<tr>
<th>b</th>
<td>(b, 1)</td><td>(b, 2)</td><td>(b, 3)</td>
<td>(b, い)</td><td>(b, ろ)</td>
</tr>
</tbody>
<tbody>
<tr>
<th>A</th>
<td>(A, 1)</td><td>(A, 2)</td><td>(A, 3)</td>
<td>(A, い)</td><td>(A, ろ)</td>
</tr>
<tr>
<th>B</th>
<td>(B, 1)</td><td>(B, 2)</td><td>(B, 3)</td>
<td>(B, い)</td><td>(B, ろ)</td>
</tr>
</tbody>
</table>

<table summary="2進数と16進数" border="1">
<tr>
  <th abbr="Decilmal" scopr="col">10進数</th>
  <td>00</td>  <td>01</td>  <td>02</td>  <td>03</td>
  <td>04</td>  <td>05</td>  <td>06</td>  <td>07</td>
  <td>08</td>  <td>09</td>  <td>10</td>  <td>11</td>
  <td>12</td>  <td>13</td>  <td>14</td>  <td>15</td>
</tr>
<tr>
  <th abbr="Binary" scopr="col">2進数</th>
  <td>0000</td>  <td>0001</td>  <td>0010</td>  <td>0011</td>
  <td>0100</td>  <td>0101</td>  <td>0110</td>  <td>0111</td>
  <td>1000</td>  <td>1001</td>  <td>1010</td>  <td>1011</td>
  <td>1100</td>  <td>1101</td>  <td>1110</td>  <td>1111</td>
</tr>
<tr>
  <th abbr="Hexadecilmal" scopr="col">16進数</th>
  <td>0</td>  <td>1</td>  <td>2</td>  <td>3</td>
  <td>4</td>  <td>5</td>  <td>6</td>  <td>7</td>
  <td>8</td>  <td>9</td>  <td>a</td>  <td>b</td>
  <td>c</td>  <td>d</td>  <td>e</td>  <td>f</td>
</tr>
</table>

セル周辺の間隔の指定

cellpadding = Length

• セルの内容と枠線の表示されるべき位置との間隔を指定します。
• 許される値は、ピクセル数かパーセント値です。

cellspacing = Length

• セル同士の間隔を指定します。
• 許される値は、ピクセル数かパーセント値です。

cellpadding 属性の例

次の例では、セル周囲の罫羅線と内容の間隔を 10 ピクセルに指定してあります。サポートしているブラウザでは、セルが膨らんでいるはずです。同時に border 属性を指定してありますが、本質ではありません。

<table cellpadding="10" border="1"
       summary="cellpadding属性の例">
<tr>
<td>(0,0)</td><td>(0,1)</td><td>(0,2)</td>
</tr>
<tr>
<td>(1,0)</td><td>(1,1)</td><td>(1,2)</td>
</tr>
<tr>
<td>(2,0)</td><td>(2,1)</td><td>(2,2)</td>
</tr>
</table>

cellspacing 属性の例

次の例では、セル同士の間隔を 10 ピクセルに指定してあります。サポートしているブラウザでは、セル同士が離れているはずです。同時に border 属性を指定してありますが、本質ではありません。

<table cellspacing="10" border="1"
       summary="cellspacing属性の例">
<tr>
<td>(0,0)</td><td>(0,1)</td><td>(0,2)</td>
</tr>
<tr>
<td>(1,0)</td><td>(1,1)</td><td>(1,2)</td>
</tr>
<tr>
<td>(2,0)</td><td>(2,1)</td><td>(2,2)</td>
</tr>
</table>

datapagesize 属性

datapagesize = CDATA

• HTML 4 DTD で登場した。
• 将来拡張予定で、属性名を予約してあるだけで、詳細な定義はない。
• スクリプトでの操作を想定されている。
• 属性としての詳細不明。御教示ください。