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 = "void" | "above" | "below" | "hsides" | "lhs" | "rhs" | "vsides" | "box" | "border"
rules = "none" | "groups" | "rows" | "cols" | "all"

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

<table border="2">
	...frame="all" rules="all" は暗黙的に指定されたことになる。
	   即ち、テーブルの四方及び全てのセルに罫羅線が表示される。
	   罫羅線幅は2ピクセル。
</table>
123
a(a, 1)(a, 2)(a, 3)
b(b, 1)(b, 2)(b, 3)
<table frame="hsides" rules="groups" border="4">
	...テーブルの上端と下端、
	   及び列グループ間、行グループ間だけに罫羅線が表示される。
	   幅は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>
123 いろ
a(a, 1)(a, 2)(a, 3) (a, い)(a, ろ)
b(b, 1)(b, 2)(b, 3) (b, い)(b, ろ)
A(A, 1)(A, 2)(A, 3) (A, い)(A, ろ)
B(B, 1)(B, 2)(B, 3) (B, い)(B, ろ)
<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>
10進数 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
2進数 0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111
16進数 0 1 2 3 4 5 6 7 8 9 a b c d e f

例えば、二進数 '1110' の十六進表示は 'e'。

基数十六の4バイト浮動小数点数の例
符号基数 仮数
ビット数 1 bits7 bits24 bits
形式 +/- = 0/1イクセス表現 固定小数点数
14.75 = 1110.1100 = E.C = 0.EC×16^1 0100 0001 1110 1100 0000 0000 0000 0000
31.625 = 1 1111. 1010= 1f.a = 0.1fa×16^2 0100 0010 1111 1101 0000 0000 0000 0000
- 0.00796507890625 = - 0.01fa = - 0.1fa×16^(-1) 1011 1111 0001 1111 1010 0000 0000 0000

セル周辺の間隔の指定

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>
(0,0)(0,1)(0,2)
(1,0)(1,1)(1,2)
(2,0)(2,1)(2,2)

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>
(0,0)(0,1)(0,2)
(1,0)(1,1)(1,2)
(2,0)(2,1)(2,2)

datapagesize 属性

datapagesize = CDATA

Copyright © 2001, SUGAI, Manabu. All rights reserved. 著作権は放棄していません。
SEO [PR] ”š‘¬!–³—¿ƒuƒƒO –³—¿ƒz[ƒ€ƒy[ƒWŠJÝ –³—¿ƒ‰ƒCƒu•ú‘—