テーブル基礎編
超簡単ＨＴＭＬ基礎

大抵のホームページでは、テーブル（表）を利用しています。このテーブルの利用方法・・・単にマス目の表だけではなく色々と応用できます。まず基本的なテーブル関連タグの使い方から・・。　このページは、ＨＴＭＬ基礎の基礎 後編の続きです。
■STEP1-7．テーブルを使う （基本タグのみ）
　愛犬のプロフィールの部分をテーブル（表）で表示させてみます。ここでは、テーブルの基本タグ<TABLE>・・・</TABLE>、<TR>・・・</TR>、<TD>・・・</TD>のみを挿入してみました。　ＨＴＭＬが複雑になると理解し難くなるので、文字サイズと色指定は解除しています。勿論、テーブルのセルの中では文字サイズ・色指定なども可能ですし、長い文章や画像などを入れることもできるので色々試してみましょう！
<HTML>
<HEAD>
<TITLE>ＨＴＭＬサンプルページ７</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" BACKGROUND="back.gif">
<CENTER>
<H2>「ロン」のページへようこそ！</H2>
<FONT COLOR="red"><B>我が家の愛犬「ロン」です。</B></FONT><BR>
<HR>
<IMG SRC="image.jpg"><BR>
<BR>
<TABLE BORDER="1">
<TR>
<TD>犬種</TD>
<TD><A HREF="link.html">アメリカンコッカースパニエル</A></TD>
</TR>
<TR>
<TD>生年月</TD>
<TD>平成１０年１２月</TD>
</TR>
<TR>
<TD>好きな食べ物</TD>
<TD>ドッグフード</TD>
</TR>
<TR>
<TD>将来の夢</TD>
<TD>りっぱな犬になること</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>










....テーブルの始まり
　....１行目の始まり
　　　....１列目セルの内容
　　　....２列目セルの内容
　....１行目の終わり
　....２行目の始まり
　　　....１列目セルの内容
　　　....２列目セルの内容
　....２行目の終わり

　・・・（以下続く）・・・






....テーブルの終わり
HTMLサンプルページ7 (sample07.html)
愛犬ロンのプロフィールの部分をテーブルにしてみました。ＨＴＭＬが複雑になると理解し難くなるので、文字サイズ・色指定は解除しています。ちょっと味気ない感じになったかも？

HomePage作成支援Top HomePage

■STEP1-8．ちょっとテーブルを修正する
　少しだけテーブルを修正してみます。セルとセルの間隔を指定したり、複数のセルを横または縦に連結することもできます。
<HTML>
<HEAD>
<TITLE>ＨＴＭＬサンプルページ８</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" BACKGROUND="back.gif">
<CENTER>
<H2>「ロン」のページへようこそ！</H2>
<FONT COLOR="red"><B>我が家の愛犬「ロン」です。</B></FONT><BR>
<HR>
<IMG SRC="image.jpg"><BR>
<BR>
<TABLE BORDER="1" CELLSPACING="0">
<TR>
<TD COLSPAN="2">プロフィール</TD>
</TR>
<TR>
<TD>犬種</TD>
<TD><A HREF="link.html">アメリカンコッカースパニエル</A></TD>
</TR>
<TR>
<TD>生年月</TD>
<TD>平成１０年１２月</TD>
</TR>
<TR>
<TD>好きな食べ物</TD>
<TD>ドッグフード</TD>
</TR>
<TR>
<TD>将来の夢</TD>
<TD>りっぱな犬になること</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>






<TABLE ...
CELLSPACING="セル間の幅">
でセルとセルの間隔を指定でき
ます．

<TR>...</TR> １行新たに追加

<TD COLSPAN="セル連結数">
で複数セルを横方向に連結して
１セルにすることができます．


ちなみに、
<TD ROWSPAN="セル連結数">
で縦方向にセルを連結できます．
HTMLサンプルページ8 (sample08.html)
テーブルの一番上に１行追加して、セルとセルの間隔を0にしてみました。

HomePage作成支援Top HomePage

■STEP1-9．テーブルに色をつけてみる
　今度は、テーブルに色をつけてみます。テーブルでは、セル毎に背景色を指定することが可能です。また、テーブルの枠線に色をつけることもできます。
<HTML>
<HEAD>
<TITLE>ＨＴＭＬサンプルページ９</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" BACKGROUND="back.gif">
<CENTER>
<H2>「ロン」のページへようこそ！</H2>
<FONT COLOR="red"><B>我が家の愛犬「ロン」です。</B></FONT><BR>
<HR>
<IMG SRC="image.jpg"><BR>
<BR>
<TABLE BGCOLOR="#FFFFF0" BORDER="1" BORDERCOLOR="#FFE4E1"
CELLSPACING="0">
<TR>
<TD BGCOLOR="#FFE4E1" COLSPAN="2">プロフィール</TD>
</TR>
<TR>
<TD>犬種</TD>
<TD><A HREF="link.html">アメリカンコッカースパニエル</A></TD>
</TR>
<TR>
<TD>生年月</TD>
<TD>平成１０年１２月</TD>
</TR>
<TR>
<TD>好きな食べ物</TD>
<TD>ドッグフード</TD>
</TR>
<TR>
<TD>将来の夢</TD>
<TD>りっぱな犬になること</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>






<TABLE ...
　BGCOLOR="背景色">
でテーブル全体の背景色を指定．

<TABLE ...
　BORDERCOLOR="枠線色">
でテーブルの枠線に色を指定．

<TD BGCOLOR="セル背景色">
でセルの背景色を指定．


ちなみに、
<TR BGCOLOR="行背景色">
で行（複数セル）の背景色を指定．


ここで指定した色は、
　#FFFFF0　■
　#FFE4E1　■
HTMLサンプルページ9 (sample09.html)
セルと枠線に色をつけてみました。テーブルの基礎については、ここまでにしておきます。

HomePage作成支援Top HomePage
Prev.
ＨＴＭＬ基礎の基礎 後編		 Next
テーブルちょっと応用編
Copyright(C) 1999-2000 T.Kaze/Family Page Hiroshima