Tableタグの書式2007年06月29日 08時29分46秒

HtmlにおけるTableタグの色に関する設定項目では、以下のように複雑である。
・テーブル ┬境界色
<table> ├背景色
</table> └ボーダーサイズ
・行    ┬境界色
<tr>  ├背景色
</tr> └ボーダーサイズ
・セル  ┬境界色    ※見出しのセルの場合はtd⇒thに変わる。
<td> ├背景色
</td>└ボーダーサイズ
これらの属性は、タグ内で、以下のように設定される。
・境界色:bordercolor="色"
・背景色:bgcolor="色"
・ボーダーサイズ:border="ドット数"
セルの結合にも注意しなければならない。
・縦のセルの結合:<td rowspan=2>値</td> ※rowspan数は結合個数
・横のセルの結合:<td colspan=2>値</td> ※colspan数は結合個数
しかも、画面の背景色との組み合わせで、色を考慮しなければならない。
このサイトでは、背景色を紺色にして、文字色薄黄色にしてあるので、この
条件に対するTableの設定値の雛形を決めておけばあれこれ悩む必要が無くなる。
以下は、Tableタグのサンプル
 ※PREタグでテキストを書いて見たが、IEでは<>を認識するので大文字化した。
   または<、>に変換する必要がある。
 ※PREタグ内の文字色が設定できかったが、PREタグで指定できた。
 ⇒○:<pre>
      <font color="white"> ※白のほうが見やすい。
      ・・・・
      </font>
    </pre>
 ※PREタグ内の背景色が設定できない。⇒仕様上無理のようだ。
   ※PREタグのフォントがみっともない(MS 明朝?)ので修正。
 ⇒○:スタイルシートで設定する。「MS ゴシック」がいいようだ。
  <style type="text/css">
    <!--
    PRE{font-family:"MS ゴシック";font-size="12pt";}
    -->
  </style>

<table border=4 width=250 align=center>
  <caption>【テーブルの例】</caption><br>
  <tr bgcolor="#cccccc"><br>
  <th><br></th><th>列-A</th><th>列-B</th><th>列-C</th><br>
  </tr><br>
  <tr align=center>
 <td>行-1</td><td>A1</td><td>B1</td><br>
 <td rowspan=2>C1-C2</td></tr><br>
 <tr align=center>
 <td>行-2</td><td>A2</td><td>B2</td></tr>
 <tr align=center><td>行-3</td><td>A3</td><br>
 <td colspan=2>A3-B3</td></tr><br>
</table><br>

【テーブルの例】

列-A 列-B 列-C
行-1 A1 B1 C1-C2
行-2 A2 B2
行-3 A3 A3-B3
■本題に戻る。 テーブルの雛形
【テーブルの例】

列-A 列-B 列-C
行-1 A1 B1 C1-C2
行-2 A2 B2
行-3 A3 A3-B3
【ルール】

<table border="1" cellspacing="0"bordercolor="cyan">
 <caption>【テーブルの例】</caption>
 <tr bgcolor="#000000">
  <th><br></th>
  <th>列-A</th>
  <th>列-B</th>
  <th>列-C</th>
 </tr>
 <tr>
  <td>行-1</td>
  <td>A1</td>
  <td>B1</td>
  <td rowspan=2>C1-C2</td>
 </tr>
 <tr>
  <td>行-2</td>
  <td>A2</td>
  <td>B2</td>
 </tr>
 <tr>
  <td>行-3</td>
  <td>A3</td>
  <td colspan=2>A3-B3</td>
 </tr>
</table>

①<table border="1" cellspacing="0"bordercolor="cyan">
 ⇒境界線は二重にならないようシアン色で統一する。
②<tr bgcolor="#000000"><th>....</th></tr>
 ⇒見出し部分は黒色とする。
■枠線が太いのが気にかかる。
IE専用ではあるが、枠の色を以下の属性で指定可能。
・bordercolordark "色" ←外枠の右と下の枠線、内枠の左と上の線の色
・bordercolorlight "色" ←外枠の左と上の枠線、内枠の右と下の枠線の色
あいうえおかきくけこ
さしすせそたちつてと
これを利用して、何れかを背景に近い色に設定すると、以下のような表になる。
<table border="1" cellspacing="0" bordercolordark="black" bordercolorlight="white">
あいうえおかきくけこ
さしすせそたちつてと
通常の指定(下表)との比較をすると見やすい事が判る。
<table border="1" cellspacing="0" bordercolor="white">
あいうえおかきくけこ
さしすせそたちつてと
しかし、FireFoxで表示すると上の表も下の表と同じ太い線になる。
※汎用的に使える枠線を細くする方法を探す。
・固定:border="1",bordercolor="white"
・cellpadding=n 枠線とセルの内容の間の隙間をピクセル単位で指定。
・cellspacing=n 内枠の太さを指定。0 は立体感の無い枠線を表示。
cellspacingcelladding結果
未指定2同じ
未指定0同じ
2未指定同じ
0未指定同じ
22同じ
00同じ
あいうえおかきくけこ
さしすせそたちつてと
だめ.....

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※なお、送られたコメントはブログの管理者が確認するまで公開されません。

名前:
メールアドレス:
URL:
コメント:

トラックバック

このエントリのトラックバックURL: http://kiyoeri.asablo.jp/blog/2007/06/29/1613417/tb

※なお、送られたトラックバックはブログの管理者が確認するまで公開されません。