表組み

表組み

　　　形式：　<TABLE>〜</TABLE>　　　　 罫線なし

　　　　　　　<TABLE BORDER=n>〜</TABLE>　罫線付き

　　　　　　　<TABLE BORDER=n WIDTH="n%">〜</TABLE>　横幅も指定
　　　　　　　　　n≦100（n=100とすると画面の横幅一杯）

　　　　　　　<CAPTION>〜</CAPTION>　　　 表題を付ける

　　　表組構成：　行定義　　<TR>〜</TR>
　　　　　　　　　項目名　　<TH>〜</TH>
　　　　　　　　　データ　　<TD>〜</TD>

　　　セルの縦幅：　<TD ROWSPAN=n>〜</TD>
　　　　　　　　　　<TH ROWSPAN=n>〜</TH>
　　　　　　　　　　　n は縦の列数
　　　　
　　　セルの横幅：　<TD COLSPAN=n>〜</TD>
　　　　　　　　　　<TH COlSPAN=n>〜</TH>
　　　　　　　　　　　n は横のセル数

　　　左右・上下方向の位置揃え：
　　　　　　　　　　<TR ALIGN=x VALIGN=y>〜</TR>
　　　　　　　　　　<TH ALIGN=x VALIGN=y>〜</TH>
　　　　　　　　　　<TD ALIGN=x VALIGN=y>〜</TD>
　　　　　　　　　　　　x＝LEFT, CENTER, RIGHT
　　　　　　　　　　　　　y＝TOP, MIDDLE, BOTTOM

　　　セルの背景色や文字色の指定
　　　　セルの背景色
　　　　　<TH BGCOLOR=....>ヘッダーの内容</TH>
　　　　　<TD BGCOLOR=....>セルのデータ</TD>

　　　　文字色の指定
　　　　　<FONT COLOR=....>文字列</FONT>


　　例
　　　<TABLE BORDER WIDTH="80%">
　　　<CAPTION>1998年3月第２週</CAPTION>
　　　<TR VALIGN="BOTTOM">
　　　<TH ALIGN="CENTER">日</TH><TH ALIGN="CENTER">月</TH>
　　　<TH ALIGN="CENTER">火</TH><TH ALIGN="CENTER">水</TH>
　　　<TH ALIGN="CENTER">木</TH><TH ALIGN="CENTER">金</TH>
　　　<TH ALIGN="CENTER">土</TH>
　　　</TR>
　　　<TR VALIGN="BOTTOM">
　　　<TD ALIGN="RIGHT">8</TD><TD ALIGN="RIGHT">9</TD>
　　　<TD ALIGN="RIGHT">10</TD><TD ALIGN="RIGHT">11</TD>
　　　<TD ALIGN="RIGHT">12</TD<TD ALIGN="RIGHT">13</TD>
　　　<TD ALIGN="RIGHT">14</TD>
　　　</TR>
　　　</TABLE>


　上の例に、第１週（２行目）、第３〜５週（４〜６行目）を追加すれば３月の
　カレンダーになります。ブラウザでの表示は以下のようになります。
　横幅はブラウザ画面の８０％としています。
　また、表題の文字色を紫、ヘッダーのセルの背景色をオレンジとしています。


1998年3月

日
月
火
水
木
金
土


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
28


29
30
31
 
 
 
 




　表組みを利用すると、<HR>　の代用の　”色帯”にできます。
　　<TABLE BORDER=0 WIDTH=80% >
　　<TH BGCOLOR=orange>文字列を入れれば。<:/TH>
　　<TR>
　　<TH BGCOLOR=orange>　　　　<:/TH>
　　</TABLE>
　　とすると、
　　
　　
　　
　　
　　
これはオレンジの色帯です。
　　　　　
　　というような色帯ができます。
　　２行目はスペース（空白文字）を入れています。