テーブルもうちょっと応用編
超簡単ＨＴＭＬ基礎

テーブルをうまく応用すると、飾りやレイアウトにも応用できます。特にテーブルを使いこなせるようになると、どんなレイアウトのページ作成も可能になるのではないかと思いますので、色々試してみよう!!　このページは、テーブルちょっと応用編の続きです。
■STEP2-5．テーブルで見出しを飾ってみる
　テーブルちょっと応用編で作ったページをもう少し改良してみます。まずは、見出し「アメリカン・コッカー・スパニエル」をテーブルの中に入れて、文字色とセル背景色を変更してみます。テーブルの背景色をうまく使うことによって、装飾的な効果を出すこともできるようになります。
<HTML>
<HEAD>
<TITLE>テーブルのサンプルページ４</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<BR>
<TABLE BORDER="0" WIDTH="400">
<TR>
<TD BGCOLOR="#0000FF">
<FONT COLOR="#FFFFFF">　アメリカン・コッカー・スパニエル</FONT>
</TD>
 </TR>
<TR>
<TD>
ディズニーのアニメ映画「わんわん物語」の主人公として有名になった犬種。<BR>
大きな垂れ耳と胸・腹部・足の後ろ側にある長い飾り毛がドレスのようでおしゃれで、
ショードッグとして人気がある。イングリッシュ・コッカー・スパニエルをアメリカで
改良してつくられた犬種で、元々は鳥猟犬の仲間。ヤマシギ猟が得意なことから
コッカーと名付けられた。<BR>
 </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>







<TR>...</TR> １行追加

<TD BGCOLOR=
　　　　　"セル背景色">
でセルの背景色を指定．
ここで指定した色は、
　#0000FF ■(青)

<FONT COLOR=
　　　　　　　"文字色">
で文字の色を指定．
　#FFFFFF ■(白)
HTMLサンプルページ15 (sample15.html)
見出しの「アメリカン・コッカー・スパニエル」の文字をテーブルの中に入れ、セル背景色を青色に変更してみました。ちょっとした飾りにも使えそうです。

テーブルの構造を理解しやすくするために、枠線ありのページも作っておきました。見たい方は、下のリンクをクリックしてみて下さい。
　　--->【参考】 枠線あり（BORDER="1"）のページ

HomePage作成支援Top HomePage

■STEP2-6．テーブルに写真を入れてみる
　文字だけのページでは寂しいので、写真を入れてみました。説明文の左側にアメリカン・コッカー・スパニエルの写真 cocker.jpg を入れたセルを挿入しています。見出しを入れたセルは、セル２つ分を COLSPAN="2" で連結しています。
<HTML>
<HEAD>
<TITLE>テーブルのサンプルページ５</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<BR>
<TABLE BORDER="0" WIDTH="400">
<TR>
<TD BGCOLOR="#0000FF" COLSPAN="2">
<FONT COLOR="#FFFFFF">　アメリカン・コッカー・スパニエル</FONT>
</TD>
</TR>
<TR>
<TD VALIGN="top">
<IMG SRC="cocker.jpg">
</TD>
 <TD>
ディズニーのアニメ映画「わんわん物語」の主人公として有名になった犬種。<BR>
大きな垂れ耳と胸・腹部・足の後ろ側にある長い飾り毛がドレスのようでおしゃれで、
ショードッグとして人気がある。イングリッシュ・コッカー・スパニエルをアメリカで
改良してつくられた犬種で、元々は鳥猟犬の仲間。ヤマシギ猟が得意なことから
コッカーと名付けられた。<BR>
 </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>







<TD COLSPAN="2">
で、横に２セルを連結．


<TD>...</TD>
で、セルを挿入して、
その中に写真を表示．

<TD VALIGN=
　　"縦方向の配置">
で、セル内の配置指定．
"top"：セルの一番上

cocker.jpg


<TD ALIGN=
　　"横方向の配置">
で、セル横方向の指定
もできます．
HTMLサンプルページ16 (sample16.html)
"cocker.jpg" を挿入したページです。テーブル全体の横幅を WIDTH="400" で固定しているので、説明文のセルの横幅が小さくなっています。
　　--->【参考】 枠線あり（BORDER="1"）のページ

HomePage作成支援Top HomePage

■STEP2-7．テーブルを下に伸ばす
　コピー＆ペーストで、更にテーブルを下に伸ばしてみました。伸ばしたセルには、別のボルゾイという犬種の写真と説明を記載しています。このように、テーブルをうまく利用すると、ページ全体のレイアウトに応用できそうです。
<HTML>
<HEAD>
<TITLE>テーブルのサンプルページ６</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<BR>
<TABLE BORDER="0" WIDTH="400">
<TR>
<TD BGCOLOR="#0000FF" COLSPAN="2">
<FONT COLOR="#FFFFFF">　アメリカン・コッカー・スパニエル</FONT>
</TD>
</TR>
<TR>
<TD VALIGN="top">
<IMG SRC="cocker.jpg">
</TD>
<TD>
ディズニーのアニメ映画「わんわん物語」の主人公として有名になった犬種。<BR>
大きな垂れ耳と胸・腹部・足の後ろ側にある長い飾り毛がドレスのようでおしゃれで、
ショードッグとして人気がある。イングリッシュ・コッカー・スパニエルをアメリカで
改良してつくられた犬種で、元々は鳥猟犬の仲間。ヤマシギ猟が得意なことから
コッカーと名付けられた。<BR>
 </TD>
</TR>
<TR>
<TD BGCOLOR="#0000FF" COLSPAN="2">
<FONT COLOR="#FFFFFF">　ボルゾイ</FONT>
</TD>
</TR>
<TR>
<TD VALIGN="top">
<IMG SRC="borzoi.jpg">
</TD>
 <TD>
中世の終わり頃に狼・コヨーテや兎猟に活躍した視覚ハウンド。<BR>
非常に背が高く流線型のしなやかな体つき、かなり細長い顔が特徴的。
「ボルゾイ」は、ロシア語で「俊敏・機敏」を意味しているそうです。非常にきゃしゃ
な体つきに見えますが、特に長い距離を追跡して獲物を捕らえる猟を得意として
いたようです。<BR>
 </TD>
 </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
























<TR>...</TR>
を２組挿入して更に２行
追加．





borzoi.jpg
HTMLサンプルページ17 (sample17.html)
横２セルｘ縦４セルのテーブルの中に写真や説明文を入れたサンプルページです。テーブルの枠線を消すと、ページレイアウトに応用できる例としてご覧下さい。取り敢えず、テーブル応用編はここまでにしておきます。
　　--->【参考】 枠線あり（BORDER="1"）のページ

HomePage作成支援Top HomePage
Prev.
テーブルちょっと応用編		 Next
フレーム基礎編
Copyright(C) 2001 T.Kaze/Family Page Hiroshima