| ＨＴＭＬタグ言語で何ができるか（02） | ||||
| ホームページビルダーを使って、表とセルに背景色をつける | ||||
| （１）表に背景色とつけましょう | ||||
| ||||
| 写真（１）は、ホームページビルダーで「列数２」×「行数２」の表作成しました。 | ||||
| 写真（２）は、ホームページビルダーで表に背景色をつけました。 | ||||
|
| ||||
| @<TABLE border="1"> <TR> <TD>兵庫県</TD> <TD>相生市</TD></TR> <TR> <TD>山手町</TD> <TD>２丁目</TD></TR> </TABLE> | ||||
| 参考資料（１） | ||||
| 参考資料（１）は、「列数２」×「行数２」の表のソース（設計）画面です。 （１）背景色をつけていないタグ言語です。 （２）「@<TABLE border="1">」の「TABLE」はテーブル（表）、「borde」は表の罫線の意味です。つまり、表の罫線は「1」という意味です。最大「7」まで使え、大きくなれば太くなります。 | ||||
|
| ||||
| （２）「表に背景色」のソース画面 | ||||
| A<TABLE border="1"
bgcolor="#80ffff"> <TR> <TD>兵庫県</TD> <TD>相生市</TD></TR> <TR> <TD>山手町</TD> <TD>２丁目</TD></TR> </TABLE> | ||||
| 参考資料（２） | ||||
| 参考資料（２）は、写真（２）の表に背景色のソース（設計）画面です。 （１）「A<TABLE border="1" bgcolor="#80ffff">」を見ると、「bgcolor="#80ffff"」が追加されています。 （２）「bgcolor」とは背景色の属性です。「"#80ffff"」は空色です。つまり、「表の背景色に空色をつける」という意味です。 | ||||
|
| ||||
| （３）セルに背景色をつけましょう | ||||
| ||||
| 写真（３）は、ホームページビルダーでセルに背景色をつけました。 | ||||
|
| ||||
| A<TABLE border="1"
bgcolor="#80ffff"> <TR> <TD>兵庫県</TD> <TD>相生市</TD></TR> <TR> <TD>山手町</TD> <TD>２丁目</TD></TR> </TABLE> | ||||
| 参考資料（３） | ||||
| 参考資料（３）は、写真（２）の表に背景色のソース（設計）画面です。 | ||||
|
| ||||
| <TABLE border="1"> <TR> B<TD bgcolor="#ffff80">兵庫県</TD> <TD>相生市</TD></TR> <TR> <TD>山手町</TD> <TD>２丁目</TD></TR> </TABLE> | ||||
| 参考資料（４） | ||||
| 参考資料（４）は、写真（３）のセルに背景色のソース（設計）画面です。 （１）「A<TABLE border="1" bgcolor="#80ffff">」が「<TABLE border="1">」に変更されています。 （２）「B<TD bgcolor="#ffff80">兵庫県</TD>」が追加されています。 （３）「bgcolor」の「bg」とは「background」 （３）つまり、TABLE（表）の背景色を削除して、「<TD></TD>」（左上のセル）に背景色をつけました。 | ||||
|
| ||||
| （４）ソース画面で、背景色をつけてみましょう | ||||
| ||||
| 参考資料（５）は、ソース（設計）画面で、表の背景色をbgcolor="red"（赤）にしました。 写真（４）は、参考資料（５）をホームページビルダーで置換した実行例です。 | ||||
|
| ||||
| ||||
| 参考資料（６）は、ソース（設計）画面で、セルの背景色をbgcolor="pink"（桃）にしました。 （１）写真（５）は、参考資料（６）をホームページビルダーで置換した実行例です。 （２）背景色を表示する@「<BODY>」には何も指示がありません。つまり背景色は「白」となります。 | ||||
|
| ||||
| ||||
| 写真（６） | ||||
| 写真（６）は、参考資料（６）・写真（５）に背景色をつけた画面です。 （１）背景色を表示するA「<BODY>」には「bgcolor="#80ff80"」とあります。 （２）「bgcolor」（背景色）は「="#80ff80"」と指示します。 （３）写真（６）は、A<BODY bgcolor="#80ff80">の実行結果です。 | ||||
|
| ||||
| （５）背景色やフォント色は英語でコントロールしましょう | ||||
| 英語の色見本６４色←クリック |
