テーブルエレメント

IE が補完するエレメント

<TABLE>

<TH>A</TH>
<TH>B</TH>

<TR>
<TD>A</TD><TD>B</TD>
</TR>
<TR>
<TD>A</TD><TD>B</TD>
</TR>

</TABLE>

上記定義は以下のようになります

<TABLE>
<TBODY>
<TR>
<TH>A</TH>
<TH>B</TH>
<TR>
<TD>A</TD>
<TD>B</TD></TR>
<TR>
<TD>A</TD>
<TD>B</TD></TR></TBODY></TABLE>

<TBODY>と</TBODY> が補完されています
<TH>に対して<TR>が補完されていますが、</TR> が補完されません
<TH>のみの場合は補完されるので、これはバグかもしれません

よって、アプリケーションでデータをバインドする場合、以下のような骨格になります
( 赤い部分は省略可能 )

Dim i,strData

' テーブルエレメントの開始
strData = strData & "<TABLE><TBODY>"
' タイトルデータ
strData = strData & "<TR>"		' この行は省略可
strData = strData & "<TH>"
strData = strData & "A"
strData = strData & "</TH>"
strData = strData & "<TH>"
strData = strData & "B"
strData = strData & "</TH>"
strData = strData & "</TR>"	' この行は省略可
For i = 1 to 10
	' 行データ
	strData = strData & "<TR>"
	strData = strData & "<TD>"
	strData = strData & "A"
	strData = strData & "</TD>"
	strData = strData & "<TD>"
	strData = strData & "B"
	strData = strData & "</TD>"
	strData = strData & "</TR>"
Next
strData = strData & "</TBODY></TABLE>"

目次

セルに依存しない罫線
列を固定幅に設定
指定高さ内でスクロール
IE が補完するエレメント

背景色を利用した罫線

border 指定の罫線は、いろいろ見栄えの調整が面倒です。
テーブルの背景色を罫線として使用ると、簡単で単純な solid 形式の罫線を引く事ができます

但しIE の問題点として、印刷時にこの罫線を反映させるには、ブラウザの設定が必要です。
IE : 詳細設定で「背景の色と印刷イメージを印刷する」にチェックする必要があります

( ※ よって、TH、TD の背景色の設定は必須です )
( ※ 線幅は cellspacing で決定します )

A	B
A	B
A

<TABLE
	style='background-color:black'
	cellspacing=1
>
<TH style='background-color:silver'>A</TH>
<TH style='background-color:silver'>B</TH>

<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD>
</TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'></TD>
</TR>

</TABLE>

列を固定幅に設定

table-layout:fixed で幅を固定にし、それぞれのセルの幅を指定するとその幅で必ず表示されます
( ※ word-wrap は IE のみ有効です )

↓実装

A	B
漢字漢字漢字漢字漢字漢字漢字	\\\\\\\\\\\\\\\\\\\\\\\\\\\\
A	B

↓画像

IE の場合	IE 以外

<TABLE
	style='
		background-color:black;
		table-layout:fixed;
		width:200px;
	'
	cellspacing=1
>
<TH style='background-color:silver;width:100px'>A</TH>
<TH style='background-color:silver;width:100px'>B</TH>

<TR>
<TD style='
	background-color:white;
	word-wrap:break-word;
	vertical-align:top;
	'
>漢字漢字漢字漢字漢字漢字漢字</TD>
<TD style='
	background-color:white;
	word-wrap:break-word;
	vertical-align:top;
	'
>\\\\\\\\\\\\\\\\\\\\\\\\\\\\</TD>
</TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD>
</TR>

</TABLE>

nowrap を TD に設定すると以下のようになります
( IE 以外では、overflow:hidden を指定する必要があります )

↓実装

A	B
漢字漢字漢字漢字漢字漢字漢字	\\\\\\\\\\\\\\\\\\\\\\\\\\\\
A	B

しかし、これでは情報が欠落するので( IE では前述の word-wrap で解決している )
nowrap を指定しないで、DIV 要素追加して見えない部分をスクロールさせます
※ IE では、逆にスクロールは無視されますので、word-wrap をセットしておきます

↓実装

A	B
漢字漢字漢字漢字漢字漢字漢字	\\\\\\\\\\\\\\\\\\\\\\\\\\\\
A	B

↓画像

IE の場合	IE 以外

<TABLE
	style='
		background-color:black;
		table-layout:fixed;
		width:200px;
	'
	cellspacing=1
>
<TH style='background-color:silver;width:100px'>A</TH>
<TH style='background-color:silver;width:100px'>B</TH>

<TR>
<TD style='
	background-color:white;
	word-wrap:break-word;
	overflow:hidden;
	'
><div style='overflow:auto'>漢字漢字漢字漢字漢字漢字漢字</div></TD>
<TD style='
	background-color:white;
	word-wrap:break-word;
	overflow:hidden;
	'
><div style='overflow:auto'>\\\\\\\\\\\\\\\\\\\\\\\\\\\\</div></TD>
</TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD>
</TR>

</TABLE>

↓実装

A	B
漢字漢字漢字漢字漢字漢字漢字	\\\\\\\\\\\\\\\\\\\\\\\\\\\\
A	B

指定高さ内でスクロール

A	B
A	B
A	B
A	B
A	B
A	B
A	B

<DIV style='overflow:auto;width:100px;height:100px'>
<TABLE
	style='background-color:black'
	cellspacing=1
>
<TH style='background-color:silver'>A</TH>
<TH style='background-color:silver'>B</TH>

<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD></TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD></TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD></TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD></TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD></TR>
<TR>
<TD style='background-color:white'>A</TD>
<TD style='background-color:white'>B</TD></TR>

</TABLE>
</DIV>