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




≪表のレイアウト≫

           

        ●使用するエレメント

        TABLEエレメント
        TDエレメント
        TRエレメントを使います

        ☆TABLEエレメントで全体でくくって
        開始タグと終了タグで囲みます
        これはIMGタグと同じでBORDER属性で枠の線幅を設定します

        ☆TDエレメントはセルの要素を決めます

        ☆TRエレメントは行の開始と終了を設定します

        ●使用例です
        TABLEエレメントの基本形です

        <TABLE BORDER=”枠線のピクセル数”>

        <TR>
        <TD>セルの要素</TD>
        <TD>セルの要素</TD>
        ・・・
        ・・・
        </TR>

        <TR>
        <TD>セルの要素</TD>
        <TD>セルの要素</TD>
        ・・・
        ・・・
        </TR>
        </TABLE>

        「TR」はTable Rowの略で表の行です
        「TD」はTable Date Cellの略で表データのマス目
        です

        ●応用です
        <TD>エレメントの変わりに<TH>エレメントを使うとそのセル
        の中の文字が太くなります
        つまり
        <TH>強調したいテーブル(表)の要素</TH>となります

        「TH」とはTable Header cell(表の見出しのマ
        ス目)の略です

        (注意)
        TDエレメントのセルの中の文字は左端にありますがTHエレメント
        は中央に来ます

        勿論これらの位置は自由に設定できます

        ●水平方向の位置指定(ALIGN属性)
        「left」「center」「right」
        ●垂直方向の位置指定(VALIGN属性)
        「top」「middle」「bottom」

        ●使用例です

        TDエレメント(ALIGN属性とVALIGN属性)
        <TD ALIGN=”水平方向の位置指定”VALIGN=”垂直
        方向の位置指定”>
        これはセル内のテキストの位置を設定します

        THエレメント(ALIGN属性とVALIGN属性)
        <TH ALIGN=”水平方向の位置指定”VALIGN=”垂直
        方向の位置指定”>
        これはタイトルのセルの中のテキストの意図を設定します

        TRエレメント(ALIGN属性とVALIGN属性)
        <TR ALIGN=”水平方向の位置指定”VALIGN=”垂直
        方向の位置指定”>
        これはセル内のテキストの位置指定を1行に対して行います


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








[TOPに戻る]

[HP講座・索引]