トップHTML & CSS >  TABLE

TABLE

1.デフォルトの罫線

Tableタグのデフォルトの罫線は境界の幅boderの値を1にしたとき、下のように表示される。

表現意味
\d任意の数値([0-9]と同じ)
\D\d以外の文字([^0-9]と同じ)
\w英数文字([A-Za-z0-9_]と同じ)
\W\w以外の文字
\sスペース(\f\r\n\t\v)

このときのソースを下に示す。

罫線は全体の枠および各セルに引かれる。 罫線の太さは 1 に設定しているが、罫線と罫線の間に隙間があるため、二重に(または太く)表示される。 この隙間を無くし、隣り合った罫線を重ねるには、 次のようにテーブルのスタイルに border-collapse: collapse; を追加すればよい。

このとき、次のように表示される。

表現意味
\d任意の数値([0-9]と同じ)
\D\d以外の文字([^0-9]と同じ)
\w英数文字([A-Za-z0-9_]と同じ)
\W\w以外の文字
\sスペース(\f\r\n\t\v)

2.罫線のスタイルを自由に変える

罫線の種類(実線、破線など)、太さ、色を自由に変えるには、CSSを使う。 タグに直接記述するときは、次のようにする。

border-collapse: collapse;はセル毎の罫線を重ねるときに指定する。 boder属性として色#aaa、太さ1px、実線(solid)を指定している。

このときの表示は次のようになる。

表現意味
\d任意の数値([0-9]と同じ)
\D\d以外の文字([^0-9]と同じ)
\w英数文字([A-Za-z0-9_]と同じ)
\W\w以外の文字
\sスペース(\f\r\n\t\v)

このような場合、通常はヘッダファイルに次のように記述するか、外部ファイルを用いる。

同じクラス名を他のタグで使わない場合にはタグ名を省略して、次のように書くことができる。

ボディの記述は次のようになる。

罫線の色は赤(red)にした。

表現意味
\d任意の数値([0-9]と同じ)
\D\d以外の文字([^0-9]と同じ)
\w英数文字([A-Za-z0-9_]と同じ)
\W\w以外の文字
\sスペース(\f\r\n\t\v)

本ホームページはこのページを含め、大半のページでスタイルファイルとして all.css を取り込んでいるため、 このページで独自に指定していないことは、all.css に従う。 従って、この all.css を取ると、表の表示も少し異なる。

3.テーブルにスクロールバーを付ける

大きなテーブルの場合、divタグでくくると、スクロールバーを付けることができる。

テーブルでプログラムのソースコードの表示を行った例を下に示す。 ここでは、下に示すようなスタイルを用いている。スクロールバーを付けるポイントは overflow: auto である。

    div.src { 
	margin-left: 10px; 
	background-color: #f0ffff; 
	overflow: auto;
    }

    td.src {
	color: blue; 
	font-size: 18px; 
  	font-family: "MS 明朝", consolas;
	line-height: 110%; 
	text-align: right; 
	vertical-align: top;
    }

    textarea.src {
	margin-top: 0px; 
	border-width: 0px; 
	font-size: 18px; 
  	font-family: "MS 明朝", consolas;
	line-height: 110%; 
	overflow: hidden;
    }

このスタイルファイルを用いて、次のように記述すると、その下に示す結果が得られる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

ソースコードのそれぞれの行の先頭に直接、行番号を付ければ、divタグも tableタグもいらない。 textareaタグで括るだけでよい。 しかし、そうすると、コピー&ペーストで行番号抜きのソースコードだけを取り出すことが出来なくなる。

上のようにすれば、行番号とプログラムコードが分離しているので、コピー&ペーストでプログラムコードだけを取り出すことができる。

文字フォント、サイズ、ラインハイトを合わせていても、IEの場合、行番号とソースコードに微妙なずれが起きる。 このズレはフォントのサイズにも依存する。上ではフォントサイズを 18px としているが、この前後でいくつかのサイズで試みたが、 もっとずれが大きくなった。FireFoxでは、ズレは起きない。

JavaScriptを使えば、見栄えのよいソースコードの表示が可能であるが、この程度のことにはスクリプトは使わない方が無難であろう。

ソースコードに不規則な形でタブコードが含まれている場合、textareaタグによる表示では、表示が凸凹する。

行番号付けとタブ展開(スペースコードに置き換え)をバックグラウンドで自動的に行うことも可能であるが、 もし、このソフトにバグがあり、気付くのが遅れると、被害が大きくなるリスクがある。

自動変換するとした場合、現在、編集作業中のただ一つのファイルだけを対象とすべきであろう。 編集中は書き込み禁止であろうからこれはできないだろう。

プログラムソースにタブコードが含まれていたり、行番号の修正がいることが見つかったときは、ポップアップウインドウに表示するまでが自動であり、 それをコピーし、htmlファイルの然るべき場所に張り付けるのは手作業とするのが妥当であろう。