テーブルエレメント

  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>"
  



  目次







  背景色を利用した罫線

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>
  

参考ページ












  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ