HTML編 19/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
テーブルを組む
セルを連結する




セルを連結する

●<TD COLSPAN="n">
「おしながき」はタイトルなのでキャプションではちょっとイマイチです。そこで「おしながき」という文字もセルに入れてしまいたいのですが、横2列のテーブルなのでこのままでは「おしながき」部分の横に空きセルを作らないと、つじつまが合わなくなってしまいます。View
そこでこの段を2列ブチ抜きにしてみましょう。TDタグにオプションでCOLSPANを付けると横方向に連結したセルを作ることができます。パラメータに連結したい数だけ数字を入れます。上下段のセルと、きちんとつじつまが合う数分ることに注意しましょう。この場合2列連結するのでパラメータは「2」になります。
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="2" CELLSPACING="3">
<TR>
<TD
COLSPAN="2">おしながき</TD>
</TR>
<TR>
<TD>●Profile</TD>
<TD>いわゆる自己紹介ってやつです。</TD>
</TR>
<TR>
<TD>●Macintosh</TD>
<TD>私が使ってきた歴代の愛機をご紹介します。</TD>
</TR>
<TR>
<TD>●Travel</TD>
<TD>旅行先で撮った写真を掲載しています。<BR>
まぁ、笑ってやってくださいませ。</TD>
</TR>
<TR>
<TD>●Enquete</TD>
<TD>アンケートにご協力ください。</TD>
</TR>
</TABLE>
</DIV>

</BODY>
</HTML>

●<TD ROWSPAN="n">
同様に縦方向にも連結してみましょう。縦方向に連結する場合はROWSPANを使います。使い方は全く一緒ですし、COLSPANとの併用も可能です。

<TR>
<TD ROWSPAN="2">縦方向に連結</TD>
</TR>

COLSPANとROWSPANを使用した表組の例を作りましたので、下のHTMLと見比べて構造を理解して下さい。セルの連結は少々解りにくいかも知れませんが、仕組み自体は単純です。横列と上下の段の数がちゃんと揃うように指定することだけ気を付ければ、うまくいくはずです。途中で解らなくなってしまう場合は、下の例のように一度数字などを入れてみると解りやすいかも知れません。
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="2" CELLSPACING="3">

<TR>
<TD>A-1</TD>
<TD
COLSPAN="3">A-2・3・4</TD>
<TD>A-5</TD>
<TD
ROWSPAN="2">A/B-6</TD>
</TR>

<TR>
<TD>B-1</TD>
<TD>B-2</TD>
<TD>B-3</TD>
<TD>B-4</TD>
<TD>B-5</TD>
</TR>

<TR>
<TD
COLSPAN="2" ROWSPAN="3">C/D/E-1・2</TD>
<TD>C-3</TD>
<TD>C-4</TD>
<TD>C-5</TD>
<TD>C-6</TD>
</TR>

<TR>
<TD>D-3</TD>
<TD>D-4</TD>
<TD>D-5</TD>
<TD>D-6</TD>
</TR>

<TR>
<TD>E-3</TD>
<TD>E-4</TD>
<TD>E-5</TD>
<TD>E-6</TD>
</TR>

</TABLE>
</DIV>

</BODY>
</HTML>

backindexnext