Text1 | Text2 | Text3 | Text4 |
Text5 | Text6 | Text7 | Text8 |
<TABLE BORDER>
<TR>
<TH>Text1</TH>
<TD>Text2</TD>
<TD>Text3</TD>
<TD>Text4</TD>
</TR>
<TR>
<TH>Text5</TH>
<TD>Text6</TD>
<TH>Text7</TH>
<TD>Text8</TD>
</TR>
</TABLE>
このように大きく、TABLEタグで括ります。BORDERは書かないと罫線なしになります。
一行は TR タグで括られ、その中に THタグ (見出し用。文字が強調される)と TDタグで要素を記入します。
|
TextA |
TextB |
Text2 |
Text3 |
Text4 |
Text6 |
Text7 |
Text8 |
<TABLE BORDER=10>
<TR>
<TD></TD>
<TH COLSPAN=3>TextA</TH>
</TR>
<TR>
<TH ROWSPAN=2>TextB</TH>
<TD>Text2</TD>
<TD>Text3</TD>
<TD>Text4</TD>
</TR>
<TR>
<TD>Text6</TD>
<TH>Text7</TH>
<TD>Text8</TD>
</TR>
</TABLE>
BORDERに数値を指定する事でこのように枠の太さを変える事ができます。そして複数の枠にまたがるものは、横方向が COLSPAN、縦方向が ROWSPAN で指定します。一行目は空のTDタグを使って左上の枠の領域を確保しています。
うんちく |
長い文章をかくとブラウザは適当に表示してくれるけど、一つの列はある程度で改行して数行に渡って書いて欲しい時ってあるよね。 |
真ん中に表示して欲しい時とか |
下に表示して欲しい時とか |
<TABLE BORDER WIDTH=500>
<TR>
<TH WIDTH=70>うんちく</TH>
<TD WIDTH=230>長い文章をかくとブラウザは適当に表示してくれるけど、一つの列はある程度で改行して数行に渡って書いて欲しい時ってあるよね。</TD>
<TD WIDTH=100 ALIGN=CENTER>真ん中に表示して欲しい時とか</TD>
<TD WIDTH=100 VALIGN=BOTTOM>下に表示して欲しい時とか</TD>
</TR>
</TABLE>
このようにWIDTHで長さを指定する事ができます。思ったように表示されない時は長さを指定してやるといいでしょう。
まとめていってみよっ |
|
左 |
中 |
右 |
上 |
左上 |
真ん中上 |
右詰上 |
中 |
左 |
中 |
右 |
下 |
左下 |
真ん中下 |
右下 |
<TABLE BORDER>
<TR>
<TH COLSPAN=4 ALIGN=CENTER>まとめていってみよっ</TH>
</TR>
<TR >
<TH WIDTH=50><br><br></TH>
<TH WIDTH=150 ALIGN=CENTER>左</TH>
<TH WIDTH=150 ALIGN=CENTER>中</TH>
<TH WIDTH=150 ALIGN=CENTER>右</TH>
</TR>
<TR >
<TH HEIGHT=50 VALIGN=MIDDLE>上;</TH>
<TD ALIGN=LEFT VALIGN=TOP>左上</TD>
<TD ALIGN=CENTER VALIGN=TOP>真ん中上</TD>
<TD ALIGN=RIGHT VALIGN=TOP>右詰上</TD>
</TR>
<TR >
<TH HEIGHT=50 VALIGN=MIDDLE>中;</TH>
<TD ALIGN=LEFT VALIGN=MIDDLE>左</TD>
<TD ALIGN=CENTER VALIGN=MIDDLE>中</TD>
<TD ALIGN=RIGHT VALIGN=MIDDLE>右</TD>
</TR>
<TR>
<TH HEIGHT=50 VALIGN=MIDDLE>下;</TH>
<TD ALIGN=LEFT VALIGN=BOTTOM>左下</TD>
<TD ALIGN=CENTER VALIGN=BOTTOM>真ん中下</TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>右下</TD>
</TR>
</TABLE>
説明の必要は無いでしょう。見比べてください。
Text1 | Text2 | Text3 | Text4 |
Text5 | Text6 | Text7 | Text8 |
<TABLE BORDER>
<TR BGCOLOR="#80FF80">
<TH>Text1</TH>
<TD>Text2</TD>
<TD>Text3</TD>
<TD>Text4</TD>
</TR>
<TR>
<TH BGCOLOR="#C0C0FF">Text5</TH>
<TD>Text6</TD>
<TH>Text7</TH>
<TD>Text8</TD>
</TR>
</TABLE>
色をつけるときはこのようにします。[色の指定]
<HR>
これが基本形ですね。
<HR ALIGN=LEFT WIDTH=300>
<HR ALIGN=CENTER WIDTH=300>
<HR ALIGN=RIGHT WIDTH=300>
これが長さを変えたり、左、真ん中、右にした場合。
<HR SIZE=1>
<HR SIZE=5>
<HR SIZE=10>
太さも変えられます。


Last modified: Sat Sep 5 11:14:24 JST 1998