その２

ＯＰＥＮ．ＨＴＭＬのタイトル部分等の「表」で作成されている部分が何となく物足りないと感じている方について、
この表の装飾については「タグ」の処理で可能ですのでお試しください。

１　まず「ホームページビルダー」のソース編集画面で「行番号」を表示させる。

　�@　ホームページビルダーのメニューから「ツール」→「オプション」で表示される画面から「ソース編集」
　　　　タブをクリックし、その他の欄にある「ライン数表示」にチェックを入れます。

<TABLE border="7" bordercolorlight="#990000" bordercolordark="#009900" cellpadding="1" cellspacing="1" height="70" width="660">
<TBODY>
<TR>
<TD bgcolor="#E7E7E7" width="24">　</TD>
<TD bgcolor="#C8C8C8" width="24">　</TD>
<TD bgcolor="#969696" width="34">　</TD>
<TD bgcolor="#666666" align="center" style="font-size : 30px;font-weight : bold;color : white;">
        <FONT color="#ff0000">練習２</FONT></TD>
<TD bgcolor="#969696" width="34">　</TD>
<TD bgcolor="#C8C8C8" width="24">　</TD>
<TD bgcolor="#E7E7E7" width="24">　</TD>
</TR>
</TBODY>
</TABLE>

２　「表のタイトル＝table」部分のタグを挿入・訂正する

　�@　「ＯＰＥＮ．ＨＴＭＬ」を「ファイル」→「開く」で表示させ、７０行の当たりに次のタグ表示があることを
　　　確認します。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

　�A　「タグの説明等」

　　�@　border="7"　　「border」タブは表の枠の表示を指定します、「0」で非表示となり、「１以上の数値」
　　　　　　　　　　　　　で幅の指定となります、「５〜７」程度の数値を入力して「ページ編集」で確認して
　　　　　　　　　　　　　下さい。

　　�A　bordercolorlight="#990000"　　、枠の上と左側の色が指定できます。
　　　　　　　　　　　　　ここは手入力となります、カラーコードの見つけ方は、メニューから「編集」→
　　　　　　　　　　　　　「背景/文字色の設定」で「文字」又は「背景」の▼をクリックして使用したい色を
　　　　　　　　　　　　　決定すると、その右側にコード番号が表示されます。

　　�A　bordercolordark="#009900"　　、枠の上と左側の色が指定できます。
　　　　　　　　　　　　　ここは手入力となります、カラーコードの見つけ方は、メニューから「編集」→
　　　　　　　　　　　　　「背景/文字色の設定」で「文字」又は「背景」の▼をクリックして使用したい色を
　　　　　　　　　　　　　決定すると、その右側にコード番号が表示されます。　

　　　　　　注意　「bordercolorlight」・「bordercolordark」に付いては「編集画面」では表示されません、
　　　　　　　　　　必ず「プレビュー」画面で確認して下さい。　


　　�B　cellpadding="1"　　枠線とセルの内容の間の隙間をピクセル単位で指定します、
　　　　　　　　　　　　　　　　「0」は非表示です。　　

　　�C　cellspacing="1"　　内枠の太さを指定します。0 を指定すると、立体感の無い枠線を表示する
　　　　　　　　　　　　　　　　ことができます。　　

　　�D　height="70"　　　　表の高さを指定します、任意の数値に変更して確認して下さい。

　　�E　width="660"　　　表（タイトル部分）全体の横幅の指定です、「ここの表の横幅」については、
　　　　　　　　　　　　　　　<ＴＤ>タグ内の「width="24"」の数値で指定し、無指定の処は、指定数の
　　　　　　　　　　　　　　　残りが配布されます。

　　�F　表内の文字　　　これは「ホームページビルダー」で編集可能ですが、本来はタグとなります。

　　　　　　　　<TD bgcolor="#666666" align="center" style="font-size : 30px;font-weight : bold;color : white;"><FONT 　　　　　　　　　　color="#ff0000">練習２</FONT></TD>

　　　�@　align="center"　これはセル内での文字の表示位置となります、
　　　　　　　　　　　　　　　center：中央表示、left：左端表示（既定値）、right：右端表示となります。

　　　�A　style="font-size : 30px;font-weight : bold;color : white;
　　　　　　　　　　　　　　これは、表の中で「ｽﾀｲﾙｼｰﾄ」の適用の宣言です。
　　　　　　　　　　　　　　「font-size : 30px;」＝は３０ピクセルのサイズと言うことです、この数値を
　　　　　　　　　　　　　　変えると大きさが変化します。

shf48031 スガ

３　表「著作権」・「作成日」等を編集する

�@　作成日等は、８５行当たりにありますので次を確認して下さい。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

<TABLE border="4" bordercolor="#00ff00" cellspacing="3" width="400" hight="70">
<TR>
<TD width="30%" align="left"　>作成日：</TD>
<TD align="right">2004年4月14日</TD>
</TR>
</TABLE>

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

　�@　border="4"　　「0」で非表示となっている場合、「１」以上の数値を指定して下さい、土手（外枠）が
　　　　　　　　　　　　表示されます。

　�A　bordercolor="#00ff00"　bordercplorは土手全体に色づけします、希望する文字色に入れ替えて
　　　　　　　　　　　　下さい。

　�B　cellspacing="3"　内枠(表の罫線です)の太さを指定します。0 を指定すると、立体感の無い枠線を
　　　　　　　　　　　　表示することができます。

　�C　width="400"　表の全体の横幅です、数値はピクセル単位です、任意の数値に変えてみて下さい。

　�D　hight="70"　　表の高さです、数値はピクセル単位です、任意の数値に変えてみて下さい。


　�E　表の中のセルの処理です
　　　　<TD width="30%" align="left"　>作成日：</TD>

　　�@　width="30%"　表全体のうち、このセルの横幅は「３０％」と言う意味です、結果として右側は
　　　　　　　　　　　　　７０％と言うことになります。

　　�A　align="left"　セルの中の文字の表示位置の指定です、「left＝左」・「center=中央」・「right=右」
　　　　　　　　　　　　と言うことになります。　

４　表の中央揃えを外す
　　この「open.html」に付いては全体が中央揃えで桜れています、そこである表について、中央揃えを
　　外したいときは次の方法をとります。

　　直ぐ上の「作成日等」の表を中央揃えを解除する場合は　<ＴＡＢＬＥ>の直ぐ上に</center>、
　　５〜６行下の</TABLE>の直ぐしたに<center>をいれます、これで表は左側に移動します。

５　表示を下げる＝改行キーを入れる

　　標準モードの場合は、画面上のカーソル位置で「エンター」で表示位置が一段下に下がります、
　　また、 タグでは改行させたい場所で<ＢＲ>を入力します。