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