テーブルエレメント


  目次



  背景色を利用した罫線




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>
  

参考ページ



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




yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[asp]
claudebot
24/03/29 23:52:44
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube