月下美人
の
   HP講座・実践編(17)




≪表のレイアウト2≫


        ●テーブル(表)の外枠や内部の線の太さ変更

        表の外枠や内分の線を変更する事でより見やすい表になります

        ●使用するタグ
        TABLEエレメントのBORDER属性とCELLSPACING
        属性を使います

        <TABLE BORDER=”周囲の枠線の太さ(ピクセル数)”
         CELLSPACING=”内部の枠線の太さ(ピクセル数)”>
        CELLSPACINGとはCell Spacing(セル間隔)
        の略です

        ●テーブルの大きさの設定方法

        もともと大きさはセルの中身で自動的に決められています
        また配置もテーブルを囲むように設定されたDIVエレメントによっ
        て中央に揃えられています
        これを自由に設計する方法についてお話します

        ●TABLEエレメント(WIDTH属性とHEIGHT属性をつか
        います)
        ここでのWIDTH=テーブルの水平方向の大きさ(これはピクセル
        数、または表示されるウィンドウに対する%です)
        HEIGHT=テーブルの垂直方向のおおきさ(これはピクセル数、
        また表示されるウィンドウに対する%です)

        ●位置設定
        TABLEエレメント(ALIGN属性を使います)
        ALIGN=テーブルの位置(left、center、right
        のいずれかで指定します)

       ●使用例

        <TABLE BORDER=”10” CELLSPACING
        =”4” WIDTH=”60%” HEIGHT=”60%”>

        これは外枠をピクセル数10で少し太くして内部枠線を4としテーブ
        ル(表)サイズを縦横ともに画面全体の60%にします・・という命
        令です

         ●テーブルに表題をつける方法

        ●CAPTIONエレメントを使います

        記入する位置に注意をしてください
        このタグはTRエレメントよりも前に記述してください
        なお、位置はALIGN属性の「top」「bottom」で指定し
        てください

        ○例えば

        <TABLE>
        <CAPTION ALIGN=”top”>コメント</CAPTI
        ON>
        ・・・・・
        ・・・・・
        <TR>
        <TD></TD>
        </TR>
        ・・・・・
        ・・・・・
        </TABLE>

   いかがでしょうか?
        このようになりましたか?

        ●テーブル内の色を変える

        テーブル内のセルは自由に色を着色できます
        設定にはBGCOLOR属性を使います

        ○<TABLE BORDERCOLOR=”テーブルの色指定”>
        これはテーブル全体の色を設定します

        ○<TR BGCOLOR=”行の色指定”>
        これはテーブルの1行の色を設定します

        ○<TD BGCOLOR=”セルの色指定”>あるいは<TH B
        GCOLOR=”セルの色指定”>
        これはセルの色を設定します

   いかがでしょうか?
        このようになりましたか?







[TOPに戻る]

[HP講座・索引]