*表をつくる [#l3257f76] *色を表現する [#v2a65f6e] 表(テーブル)を作るには、 ''table要素''、''tr要素''、''th要素''、''td要素''を使います。 **色の表現 [#nb409f51] HTMLでは、文字や線の色などを指定できます。 指定するには、色の名前や色の値を使います。 <pre> COLOR(red):<table> COLOR(red):<tr> COLOR(red):<th>COLOR(black):...COLOR(red):</th><th>COLOR(black):...COLOR(red):</th> COLOR(red):</tr> COLOR(red):<tr> COLOR(red):<td>COLOR(black):...COLOR(red):</td><td>COLOR(black):...COLOR(red):</td> COLOR(red):</tr> ... COLOR(red):</table> </pre> ***色の値 [#za529456] 光の三原色である、赤(R)緑(G)青(B)の強さを値であらわします。 16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)を使い、RGBそれぞれを00〜FFまでの256段階で設定することができます。~ blackは#000000、redは#FF0000、whiteは#FFFFFFのように、「#」のあとにRGBの値を設定します。~ --参考:とほほの色入門:色見本 ---http://tohoho.wakusei.ne.jp/wwwcolor.htm ***色の名前 [#l686104d] 代表的な色(16色)には、名前がつけられています。 それぞれの色の名前(そして色の値)は次のとおりです。 |CENTER:|CENTER:||CENTER:|CENTER:||CENTER:|CENTER:||CENTER:|CENTER:|c |色の名前|色の値||色の名前|色の値||色の名前|色の値||色の名前|色の値|h |COLOR(white):BGCOLOR(black):black|#000000||BGCOLOR(gray):gray|#808080||BGCOLOR(silver):silver|#C0C0C0||BGCOLOR(white):white|#FFFFFF| |BGCOLOR(red):red|#FF0000||BGCOLOR(yellow):yellow|#FFFF00||BGCOLOR(lime):lime|#00FF00||BGCOLOR(aqua):aqua|#00FFFF| |COLOR(white):BGCOLOR(blue):blue|#0000FF||BGCOLOR(fuchsia):fuchsia|#FF00FF||COLOR(white):BGCOLOR(maroon):maroon|#800000||COLOR(white):BGCOLOR(olive):olive|#808000| |COLOR(white):BGCOLOR(green):green|#008000||COLOR(white):BGCOLOR(teal):teal|#008080||COLOR(white):BGCOLOR(navy):naby|#000080||COLOR(white):BGCOLOR(purple):purple|#800080| HTMLでは、表全体をtable要素で示します。 table要素の中は、行ごとに表現します。 tr要素は行を示します。 各行には、表のセル(表の中のひとつの項目)をtd要素で示します。 必要な数だけ、td要素を使用します。 **HTMLで色の指定するときの注意 [#v7d78138] HTMLでは、色を指定する要素や属性があります。 しかし、HTMLは文書の構造を示すのが役割です。 COLOR(red):''HTMLで色を指定することは、'' COLOR(red):''現在よく使われているバージョンであるHTML 4.01では推奨されていません。'' 表の見出しになる項目は、th要素を使います。 th要素の内容は、太字で中央揃えで表示されます。 HTML 4.01では、色の指定はCSS(スタイルシート)を使うことが推奨されています。 今回は、古典的な手法として、 HTMLでの色の指定を紹介します。 #ref(table_el.png,nolink,table要素のイメージ); **全体の背景の色を指定する [#a54ae3d3] ページ全体の背景色を設定するには、 body要素に''bgcolor''属性を指定します。 <pre> COLOR(red):<table> COLOR(red):<tr> COLOR(red):<th>COLOR(black):見出し1COLOR(red):</th><th>COLOR(black):見出し2COLOR(red):</th><th>COLOR(black):見出し3COLOR(red):</th> COLOR(red):</tr> COLOR(red):<tr> COLOR(red):<td>COLOR(black):データ1COLOR(red):</td><td>COLOR(black):データ2COLOR(red):</td><td>COLOR(black):データ3COLOR(red):</td> COLOR(red):</tr> COLOR(red):<tr> COLOR(red):<td>COLOR(black):データ4COLOR(red):</td><td>COLOR(black):データ5COLOR(red):</td><td>COLOR(black):データ6COLOR(red):</td> COLOR(red):</tr> COLOR(red):</table> </pre> #pre(novervatim){{ COLOR(red):<body bgcolor="COLOR(blue):色の値COLOR(red):"> ... COLOR(red):</body> }} 背景色を指定するときには、 文字色も設定しておくとよいでしょう。 背景色が文字色と同系列の色になると、文字が見えなくなる可能性があります。 **表の外枠の幅を指定する [#x0dd3ffb] <pre> COLOR(red):<table border="COLOR(blue):枠の幅COLOR(red):">COLOR(black):...COLOR(red):</table> </pre> **全体の文字の色を指定する [#q5834862] ページ全体の文字色を設定するには、 body要素に''text''属性を指定します。 table要素に、 ''border''属性を設定すると、表の外枠の幅を設定できます。 幅に0を設定すると、枠は表示されません。 #pre(novervatim){{ COLOR(red):<body text="COLOR(blue):色の値COLOR(red):"> ... COLOR(red):</body> }} **表の幅を指定する [#dcafa2c2] <pre> COLOR(red):<table width="COLOR(blue):表の幅COLOR(red):">COLOR(black):...COLOR(red):</table> </pre> ページ全体の文字色を変更しますが、 リンク部分の色は変更されません。 全体の色のバランスを考えて、 必要であれば、リンクの色も変更しましょう。 table要素に、 ''width''属性を設定すると表の幅が設定できます。 ピクセル値(画面を構成する点の数)やパーセンテージ(%)で指定します。 ウィンドウの大きさに合わせて表の幅を動かしたい場合は、 パーセンテージを使うとよいでしょう。 #pre(novervatim){{ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>「兵庫太郎の日記」</title> </head> COLOR(red):<body text="COLOR(blue):#0066CCCOLOR(red):" bgcolor="COLOR(blue):#FFFFFFCOLOR(red):"> ... }} <pre> COLOR(red):<table border="COLOR(blue):2COLOR(red):" width="COLOR(blue):80%COLOR(red):">COLOR(black):...COLOR(red):</table> </pre> **全体のリンクの色を指定する [#q5834862] ページ全体のリンクの文字色を設定するには、 body要素に''link''属性、''vlink''属性、''alink''属性を指定します。 **セルの大きさを指定する [#qaa9aa44] <pre> COLOR(red):<th width="COLOR(blue):幅COLOR(red):" height="COLOR(blue):高さCOLOR(red):">COLOR(black):...COLOR(red):</th> COLOR(red):<td width="COLOR(blue):幅COLOR(red):" height="COLOR(blue):高さCOLOR(red):">COLOR(black):...COLOR(red):</td> </pre> #pre(novervatim){{ COLOR(red):<body link="COLOR(blue):色の値COLOR(red):" vlink="COLOR(blue):色の値COLOR(red):" alink="COLOR(blue):色の値COLOR(red):"> ... COLOR(red):</body> }} セルの幅を設定するには、th要素やtd要素に''width''属性を設定します。 また、 セルの高さを設定するには、''height''属性を設定します。 どちらもピクセル値を指定します。 設定すると、そのセルだけでなく、 幅の場合は同じ列のすべてのセルに、 高さの場合は同じ行のすべてのセルに設定が影響します。 それぞれの属性には、次のような意味があります。 注意して設定する必要があります。 -link: まだ見ていないリンク部分の文字色 -vlink: すでに見たリンク部分の文字色 -alink: マウスのボタンを押したときのリンク部分の文字色 <pre> COLOR(red):<table border="2"> COLOR(red):<tr> COLOR(red):<th width="COLOR(blue):50COLOR(red):" height="COLOR(blue):20COLOR(red):">COLOR(black):見出し1COLOR(red):</th><th>COLOR(black):見出し2COLOR(red):</th><th>COLOR(black):見出し3COLOR(red):</th> COLOR(red):</tr> COLOR(red):<tr> COLOR(red):<td>COLOR(black):データ1COLOR(red):</td><td>COLOR(black):データ2COLOR(red):</td><td>COLOR(black):データ3COLOR(red):</td> COLOR(red):</tr> COLOR(red):</table> </pre> **文字の色を指定する [#k921dc21] >COLOR(red):ここで紹介する方法は、あまり薦められない方法です。注意してください。 文字の色を設定するには、 ''font''要素と''color''属性を指定します。 #pre(novervatim){{ COLOR(red):<font color="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</font> }} **セルとセルを連結する [#j7dd7f04] <pre> COLOR(red):<th rowspan="COLOR(blue):縦方向の連結数COLOR(red):">COLOR(black):...COLOR(red):</th> COLOR(red):<th colspan="COLOR(blue):横方向の連結数COLOR(red):">COLOR(black):...COLOR(red):</th> COLOR(red):<td rowspan="COLOR(blue):縦方向の連結数COLOR(red):">COLOR(black):...COLOR(red):</td> COLOR(red):<td colspan="COLOR(blue):横方向の連結数COLOR(red):">COLOR(black):...COLOR(red):</td> </pre> font要素は、文字のさまざまな属性を指定する要素です。 color属性を使うことで、指定した範囲の文字の色を設定することができます。 ''rowspan''属性や''colspan属性''を指定すると、 そのセルから指定した数だけのセルが連結され、 ひとつの大きなセルとしてまとめられます。 **表やセルの背景の色を指定する [#z4716a3d] 表やセルに背景色を設定するには、 table、tr、th、td要素に、''bgcolor''属性を指定します。 連結される位置にある、tdやth要素は入力しません。 #pre(novervatim){{ COLOR(red):<table bgcolor="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</table> COLOR(red):<tr bgcolor="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</tr> COLOR(red):<th bgcolor="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</th> COLOR(red):<td bgcolor="COLOR(blue):色の値COLOR(red):">COLOR(black):...COLOR(red):</td> }} 例えば、次のような表の場合は、 |>|学生|クラス|h |G2031001|兵庫|A| |G2031002|加古川|~| 次のように指定します。 <pre> COLOR(red):<table> COLOR(red):<tr> COLOR(red):<th colspan="COLOR(blue):2COLOR(red):">COLOR(black):学生COLOR(red):</th><th>COLOR(black):クラスCOLOR(red):</th> COLOR(red):</tr> COLOR(red):<tr> COLOR(red):<td>COLOR(black):G2031001COLOR(red):</td><td>COLOR(black):兵庫COLOR(red):</td><td rowspan="COLOR(blue):2COLOR(red):">COLOR(black):ACOLOR(red):</td> COLOR(red):</tr> COLOR(red):<tr> COLOR(red):<td>COLOR(black):G2031002COLOR(red):</td><td>COLOR(black):加古川COLOR(red):</td> COLOR(red):</tr> COLOR(red):</table> </pre> bgcolor属性を使って、背景色を指定します。 table要素の場合は表全体に、 tr要素の場合は行全体に、 thやtd要素の場合はそのセルに、それぞれ背景色が設定されます。 **セルとセルの間隔を指定する [#v18c1ae8] <pre> COLOR(red):<table cellspacing="COLOR(blue):間隔COLOR(red):">COLOR(black):...COLOR(red):</table> </pre> ''cellspacing''属性を使うと、セルとセルの間隔を設定することができます。 同時に、セルと表の外枠との間隔も設定されます。 表全体の枠線を太くするときにも使えるでしょう。 **セルと内容の間隔を指定する [#jb327f48] <pre> COLOR(red):<table cellpadding="COLOR(blue):間隔COLOR(red):">COLOR(black):...COLOR(red):</table> </pre> ''cellpadding''属性を使うと、セルとその内容との間隔を設定することができます。 セルの枠線とセルの中の文字にスペースを作りたいときに、使います。 <pre> COLOR(red):<table cellspacing="COLOR(blue):4COLOR(red):" cellpadding="COLOR(blue):8COLOR(red):">COLOR(black):...COLOR(red):</table> </pre> &br; &navi2(Lecture/InfoDesignB2004/5th,next);進んでください。 ---- #navi2(Lecture/InfoDesignB2004/5th,prev,toc,next) }} |