HTMLで書いてみよう！
（テーブル編）
テーブル編では、テーブルについてより詳しい説明をします。



・テーブルの大きさを変更してみます。 
    <TABLE BGCOLOR="#FFCCB3" ><TR><TD>
<TABLE BORDER=1 WIDTH="50" HEIGHT="50"><TR><TD>50</TD></TR></TABLE>
<TABLE BORDER=1 WIDTH="75" HEIGHT="75"><TR><TD>75</TD></TR></TABLE>
<TABLE BORDER=1 WIDTH="100" HEIGHT="100"><TR><TD>100</TD></TR></TABLE>
    ★WINDOW全体に対する割合で指定する場合は"??%"とします。


    結果は以下のようにになります

    50
    75
    100




・テーブルの外枠の太さを変更してみます。 
    <TABLE BORDER=0><TR><TD>外枠の太さ０です。</TD></TR></TABLE>
<TABLE BORDER=1><TR><TD>外枠の太さ１です。</TD></TR></TABLE>
<TABLE BORDER=5><TR><TD>外枠の太さ５です。</TD></TR></TABLE>
<TABLE BORDER=10><TR><TD>外枠の太さ１０です。</TD></TR></TABLE>


    結果は以下のようにになります

    外枠の太さ０です。
    外枠の太さ１です。
    外枠の太さ５です。
    外枠の太さ１０です。


    ・テーブルの中枠の太さを変更してみます。 
    <TABLE BORDER=1 CELLSPACING=1><TR><TD>中枠の太さ１です。</TD>
<TD>　</TD></TR><TR><TD>　</TD><TD>　</TD></TR></TABLE>
<TABLE BORDER=1 CELLSPACING=5><TR><TD>中枠の太さ５です。</TD>
<TD>　</TD></TR><TR><TD>　</TD><TD>　</TD></TR></TABLE>
<TABLE BORDER=1 CELLSPACING=10><TR><TD>中枠の太さ１０です。</TD>
<TD>　</TD></TR><TR><TD>　</TD><TD>　</TD></TR></TABLE>


    結果は以下のようにになります

    中枠の太さ１です。 　
    　　
    中枠の太さ５です。 　
    　　
    中枠の太さ１０です。 　
    　　




・テーブルのセルパディングを変更してみます。 
    <TABLE BORDER=1 CELLPADDING=1><TR><TD>セルパディング１です。</TD></TR></TABLE>
<TABLE BORDER=1 CELLPADDING=5><TR><TD>セルパディング５です。</TD></TR></TABLE>
<TABLE BORDER=1 CELLPADDING=10><TR><TD>セルパディング１０です。</TD></TR></TABLE>


    結果は以下のようにになります

    セルパディング１です。
    セルパディング５です。
    セルパディング１０です。




・テーブルの中の配置を変更してみます。 
    <TABLE BORDER=1>
<TR>
<TD ALIGN="left" VALIGN="top" WIDTH="100" HEIGHT="100">左・上</TD>
<TD ALIGN="center" VALIGN="top" WIDTH="100" HEIGHT="100">中・上</TD>
<TD ALIGN="right" VALIGN="top" WIDTH="100" HEIGHT="100">右・上</TD>
</TR><TR>
<TD ALIGN="left" VALIGN="middle" WIDTH="100" HEIGHT="100">左・中</TD>
<TD ALIGN="center" VALIGN="middle" WIDTH="100" HEIGHT="100">中・中</TD>
<TD ALIGN="right" VALIGN="middle" WIDTH="100" HEIGHT="100">右・中</TD>
</TR><TR>
<TD ALIGN="left" VALIGN="bottom" WIDTH="100" HEIGHT="100">左・下</TD>
<TD ALIGN="center" VALIGN="bottom" WIDTH="100" HEIGHT="100">中・下</TD>
<TD ALIGN="right" VALIGN="bottom" WIDTH="100" HEIGHT="100">右・下</TD>
</TR>
</TABLE>
    ★<TR>タグにも指定できます。


    結果は以下のようにになります

    左・上 中・上 右・上
    左・中 中・中 右・中
    左・下 中・下 右・下




・複数行にわたるセル 
    <TABLE BORDER=1>
<TR><TH ROWSPAN=5>長いセル</TH>
<TD>普通のセル１</TD></TR>
<TR><TD>普通のセル２</TD></TR>
<TR><TD>普通のセル３</TD></TR>
<TR><TD>普通のセル４</TD></TR>
<TR><TD>普通のセル５</TD></TR>
</TABLE>
    ★<TH>はヘッダーという意味です。<TD>にも指定できます。


    結果は以下のようにになります

    長いセル 普通のセル１
    普通のセル２
    普通のセル３
    普通のセル４
    普通のセル５




・複数列にわたるセル 
    <TABLE BORDER=1>
<TR><TH COLSPAN=5>長いセル</TH></TR>
<TR><TD>普通のセル１</TD>
<TD>普通のセル２</TD>
<TD>普通のセル３</TD>
<TD>普通のセル４</TD>
<TD>普通のセル５</TD></TR>
</TABLE>


    結果は以下のようにになります

    長いセル
    普通のセル１ 普通のセル２ 普通のセル３ 普通のセル４ 普通のセル５




・背景色、背景画像を変更してみます。 
    <TABLE BODER=1><TR>
<TD BGCOLOR="#FFCCCC" WIDTH="100" HEIGHT="100">赤系</TD>
<TD BGCOLOR="#CCFFCC" WIDTH="100" HEIGHT="100">緑系</TD>
<TD BGCOLOR="#CCCCFF" WIDTH="100" HEIGHT="100">青系</TD>
<TD BACKGROUND="hana.jpg" WIDTH="100" HEIGHT="100">
<FONT COLOR="#FFFFFF">画像</FONT></TD>
</TR></TABLE>


    結果は以下のようにになります

    赤系 緑系 青系 画像




ホームページへ戻る