HTML編 21/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
テーブルを組む
表組に色を付ける
表組とセルの大きさを指定する
セルの中の文字を改行させない




表組に色を付ける

●<TABLE BGCOLOR="n"><TR・TD・TH BGCOLOR="n">
テーブル全体に色を付けたい場合はTABLEタグのオプションとして、列に付けたい場合はTRに、セルに付けたい場合はTDもしくはTHにBGCOLORを加えれば、それぞれに着色が可能です。TABLEタグに表全体の指定をしておいて、セルだけ個別に指定することも可能です。パラメータに色を指定します。(カラーチャート参照)

<TABLE BGCOLOR="n">
<TR BGCOLOR="n">
<TH BGCOLOR="n">テキスト</TH>
<TD BGCOLOR="n">テキスト</TD>
</TR>
</TABLE>

もちろんセル内の文字にも<FONT COLOR="n">で色を付けられるので、かなりカラフルな表組を作ることが出来ます。View
テーブル全体を白(#ffffff)に、「おしながき」のセルを緑色(#009933)に、文字を白にしました。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
<H2 ALIGN="center">ようこそ!</H2>
<HR SIZE="5" WIDTH="321">
<DIV ALIGN="center">
<!--★★タイトルの部分★★-->
<FONT SIZE="7" COLOR="#009900" FACE="Times New,Times,Times Roman"><B><I>Kimura's Room</I></B></FONT><BR>
<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
<TABLE
BGCOLOR="#ffffff" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>
<TH
BGCOLOR="#009933" COLSPAN="2"><FONT COLOR="#ffffff">おしながき</FONT></TH>
</TR>
<TR>
<TD>●Profile</TD>
<TD><FONT SIZE="2">いわゆる自己紹介ってやつです。</FONT></TD>
</TR>
<TR>
<TD>●Macintosh</TD>
<TD><FONT SIZE="2">私が使ってきた歴代の愛機をご紹介します。</FONT></TD>
</TR>
<TR>
<TD VALIGN="top">●Travel</TD>
<TD><FONT SIZE="2">旅行先で撮った写真を掲載しています。<BR>
まぁ、笑ってやってくださいませ。</FONT></TD>
</TR>
<TR>
<TD>●Enquete</TD>
<TD><FONT SIZE="2">アンケートにご協力ください。</FONT></TD>
</TR>
</TABLE>
</DIV>

</BODY>
</HTML>




表組とセルの大きさを指定する

●<TABLE WIDTH="n" HEIGHT="n"><TD WIDTH="n" HEIGHT="n">
先ほども書きましたが、テーブルの大きさは何も指定しない場合、中に入っている物の大きさに合わせようとします。なので、文字を入れる場合文字数以上の大きさにはなりません。これを自由な大きさに変えるにはWIDTHとHEIGHTオプションを使います。WIDTHのパラメータには横幅を、HEIGHTには縦幅をピクセル、もしくはブラウザの幅に対しての%で指定します。
TABLEタグにこのオプションを付ければテーブル全体の大きさが、TD・THに付ければセルの大きさが指定できます。

<TABLE WIDTH="n" HEIGHT="n">
<TR>
<TD WIDTH="n" HEIGHT="n">〜</TD>
<TH WIDTH="n" HEIGHT="n">〜</TH>
</TR>
</TABLE>

ただし、この指定はセルの中に入る物によって変わったりしますので、あくまで目安的な使い方にとどめておいた方が無難です。実際、そうそう指定通りにはならないケースが多いです。中に1ピクセルの透明GIF画像を入れて、キッチリ寸法を決めてレイアウトする方法は後ほどやります。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
<H2 ALIGN="center">ようこそ!</H2>
<HR SIZE="5" WIDTH="321">
<DIV ALIGN="center">
<!--★★タイトルの部分★★-->
<FONT SIZE="7" COLOR="#009900" FACE="Times New,Times,Times Roman"><B><I>Kimura's Room</I></B></FONT><BR>
<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
<TABLE BORDER="3"
WIDTH="80%" HEIGHT="200">
<CAPTION ALIGN="top">幅80%、高さ200ピクセルの表</CAPTION>
<TR>
<TD
WIDTH="50%" HEIGHT="20%">幅50%、高さ20%</TD>
<TD
WIDTH="30%">幅30%</TD>
<TD
WIDTH="20%">幅20%</TD>
</TR>
<TR>
<TD
WIDTH="50%" HEIGHT="80%">幅50%、高さ80%</TD>
<TD
WIDTH="30%">幅30%</TD>
<TD
WIDTH="20%">幅20%</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>




セルの中の文字を改行させない

●<TD・TH NOWRAP>
テーブルやセルのサイズを固定した場合など、中に入っている文字数が多い場合、途中で自動的に改行されます。途中で改行させたくない場合は<TD>タグにオプションでNOWRAPを入れます。ブラウザのウインドウ幅を超える場合はスクロールすることになります。

<TD NOWRAP>長いテキストを改行させない</TD>
<TH NOWRAP>長いテキストを改行させない</TH>
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
<H2 ALIGN="center">ようこそ!</H2>
<HR SIZE="5" WIDTH="321">
<DIV ALIGN="center">
<!--★★タイトルの部分★★-->
<FONT SIZE="7" COLOR="#009900" FACE="Times New,Times,Times Roman"><B><I>Kimura's Room</I></B></FONT><BR>
<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->

<TABLE BORDER="3" CELLPADDING="0" CELLSPACING="0">
<CAPTION ALIGN="top">サイズ指定なしのテーブル</CAPTION>
<TR>
<TD>テーブルの中に、ブラウザの幅を超えてしまうような長いテキストを挿入すると、ブラウザの幅を超えた時点で、文字は自動的に改行されます。これはサイズ指定していないテーブルです。</TD>
<TD>1行目2つ目のセル</TD>
</TR>
</TABLE>

<TABLE BORDER="3" CELLPADDING="0" CELLSPACING="0" WIDTH="50%">
<CAPTION ALIGN="top">左右50%のテーブル</CAPTION>
<TR>
<TD>サイズを指定したテーブルの中に長いテキストを挿入した場合も同様です。指定のの幅を超えた時点で、文字は自動的に改行されます。これはサイズを50%にしたテーブルです。</TD>
<TD>1行目2つ目のセル</TD>
</TR>
</TABLE>

<TABLE BORDER="3" CELLPADDING="0" CELLSPACING="0" WIDTH="50%">
<CAPTION ALIGN="top">左右50%のテーブル</CAPTION>
<TR>
<TD
NOWRAP>サイズを指定したテーブルでも、NOWRAPを挿入することで改行されずに表示されます。ブラウザの幅を超えたら、当然スクロールする事になります。こちらのセルを無理矢理伸ばしているので、右のセルが1文字ずつ改行されてしまいました。このような場合は右のセルにNOWRAPを入れて、こちらは改行するべきですね(笑)。</TD>
<TD>1行目2つ目のセル</TD>
</TR>
</TABLE>

</DIV>
</BODY>
</HTML>

今作ってる「おしながき」の表組はもともとサイズが小さいので、NOWRAPの指定が無くても大丈夫だと思いますが、左側セルの●Profileなどの文字列は絶対に改行されたくないので、念のためNOWRAPの指定を入れておきました。

backindexnext