表の書式

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