表をつくる色を表現する表(テーブル)を作るには、 table要素、tr要素、th要素、td要素を使います。色の表現HTMLでは、文字や線の色などを指定できます。 指定するには、色の名前や色の値を使います。<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> ...</table> /pre> 色の値光の三原色である、赤(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の値を設定します。
色の名前代表的な色(16色)には、名前がつけられています。 それぞれの色の名前(そして色の値)は次のとおりです。
HTMLで色の指定するときの注意HTMLでは、色を指定する要素や属性があります。 しかし、HTMLは文書の構造を示すのが役割です。 HTMLで色を指定することは、 現在よく使われているバージョンであるHTML 4.01では推奨されていません。 表の見出しになる項目は、th要素を使います。 th要素の内容は、太字で中央揃えで表示されます。 HTML 4.01では、色の指定はCSS(スタイルシート)を使うことが推奨されています。 今回は、古典的な手法として、 HTMLでの色の指定を紹介します。#ref(): File not found: "table_el.png" at page "Lecture/InfoDesignB2004/5th/color" 全体の背景の色を指定するページ全体の背景色を設定するには、 body要素にbgcolor属性を指定します。<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></table> /pre> #spanend #spanadd <body bgcolor="色の値"> #spanend ... #spanadd </body> #spanend #spanadd背景色を指定するときには、 文字色も設定しておくとよいでしょう。 背景色が文字色と同系列の色になると、文字が見えなくなる可能性があります。 表の外枠の幅を指定する<table border="枠の幅">...</table> /pre> 全体の文字の色を指定するページ全体の文字色を設定するには、 body要素にtext属性を指定します。 table要素に、 border属性を設定すると、表の外枠の幅を設定できます。 幅に0を設定すると、枠は表示されません。#spanend #spanadd <body text="色の値"> #spanend ... #spanadd </body> #spanend #spanadd 表の幅を指定する<table width="表の幅">...</table> /pre> ページ全体の文字色を変更しますが、 リンク部分の色は変更されません。 全体の色のバランスを考えて、 必要であれば、リンクの色も変更しましょう。 table要素に、 width属性を設定すると表の幅が設定できます。 ピクセル値(画面を構成する点の数)やパーセンテージ(%)で指定します。 ウィンドウの大きさに合わせて表の幅を動かしたい場合は、 パーセンテージを使うとよいでしょう。#spanend #spanadd <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" #spanend "http://www.w3.org/TR/html4/loose.dtd"> #spanadd <html lang="ja"> #spanend #spanadd <head> #spanend #spanadd <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> #spanend #spanadd <title>「兵庫太郎の日記」</title> #spanend #spanadd </head> #spanend #spanadd <body text="#0066CC" bgcolor="#FFFFFF"> #spanend #spanadd ... #spanend #spanadd <table border="2" width="80%">...</table> /pre> 全体のリンクの色を指定するページ全体のリンクの文字色を設定するには、 body要素にlink属性、vlink属性、alink属性を指定します。セルの大きさを指定する<th width="幅" height="高さ">...</th> <td width="幅" height="高さ">...</td> /pre> #spanend #spanadd <body link="色の値" vlink="色の値" alink="色の値"> #spanend ... #spanadd </body> #spanend #spanaddセルの幅を設定するには、th要素やtd要素にwidth属性を設定します。 また、 セルの高さを設定するには、height属性を設定します。 どちらもピクセル値を指定します。 設定すると、そのセルだけでなく、 幅の場合は同じ列のすべてのセルに、 高さの場合は同じ行のすべてのセルに設定が影響します。 それぞれの属性には、次のような意味があります。 注意して設定する必要があります。
<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></table> /pre> 文字の色を指定する文字の色を設定するには、 font要素とcolor属性を指定します。 #spanend #spanadd <font color="色の値">...</font> #spanend #spanadd セルとセルを連結する<th rowspan="縦方向の連結数">...</th> <th colspan="横方向の連結数">...</th> <td rowspan="縦方向の連結数">...</td> <td colspan="横方向の連結数">...</td> /pre> font要素は、文字のさまざまな属性を指定する要素です。 color属性を使うことで、指定した範囲の文字の色を設定することができます。 rowspan属性やcolspan属性を指定すると、 そのセルから指定した数だけのセルが連結され、 ひとつの大きなセルとしてまとめられます。表やセルの背景の色を指定する表やセルに背景色を設定するには、 table、tr、th、td要素に、bgcolor属性を指定します。 連結される位置にある、tdやth要素は入力しません。#spanend #spanadd <table bgcolor="色の値">...</table> #spanend #spanadd <tr bgcolor="色の値">...</tr> #spanend #spanadd <th bgcolor="色の値">...</th> #spanend #spanadd <td bgcolor="色の値">...</td> #spanend #spanadd例えば、次のような表の場合は、
<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></table> /pre> bgcolor属性を使って、背景色を指定します。 table要素の場合は表全体に、 tr要素の場合は行全体に、 thやtd要素の場合はそのセルに、それぞれ背景色が設定されます。セルとセルの間隔を指定する<table cellspacing="間隔">...</table> /pre> cellspacing属性を使うと、セルとセルの間隔を設定することができます。 同時に、セルと表の外枠との間隔も設定されます。 表全体の枠線を太くするときにも使えるでしょう。セルと内容の間隔を指定する<table cellpadding="間隔">...</table> /pre> cellpadding属性を使うと、セルとその内容との間隔を設定することができます。 セルの枠線とセルの中の文字にスペースを作りたいときに、使います。<table cellspacing="4" cellpadding="8">...</table> /pre> 次へ進んでください。 }} |