SITEMAP [初めてのホームページ講座] [逆引きHTML] [0.ワンポイント] [10.簡単な２段組]

逆引きHTMLリファレンス

0. ワンポイント

0-10. 簡単な２段組

本来の段組実現は <MULTICOL> タグで行うのですが、これをテーブルを使って、簡単に実現してしまう方法を紹介します。（ただし「本来」といっても、W3Cが推奨しているわけではなく、メーカ側の拡張HTMLにすぎませんが・・・）

この２段組は、HTMLの本来の意味合いを逸脱する方法だということは頭に入れておいて下さい。（W3Cも推奨できないとしています・・・私は使ってますが・・・）

１つの大きなテーブルの中に小さなテーブルを並べて、段組を実現します。簡易的な中央の境界線も作れますが、いまいち格好悪いので、イメージを使って代用してしまうのも１つの方法です。

例）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
	<TITLE>２段組</TITLE>
</HEAD>
<BODY>
	<P ALIGN="center"><B>２段組作成方法の一例</B></P>
	<TABLE BORDER=0 WIDTH="80%" ALIGN="center">
	<TR VALIGN="top">
		<TD WIDTH="50%">
		<TABLE BORDER=0>
		<TR><TD>
			<!-- １段目 -->
			２段組を簡単に実現する方法として、テーブルを使用する
			ことが最も早道であり、汎用性が高い方法です。&lt;BR&gt;
			このように、１行のテーブルの中に、１行３列のテーブルを
			ネストするだけで簡単に作成できます。
		</TD></TR>
		</TABLE>
	</TD>
	<TD WIDTH="1">
		<TABLE BORDER=0>
			<!-- ここは中央の境界線 -->
			<TR><TD Bgcolor="#aaaaaa">&nbsp</TD></TR>
			<TR><TD Bgcolor="#aaaaaa">&nbsp</TD></TR>
			<TR><TD Bgcolor="#aaaaaa">&nbsp</TD></TR>
			<TR><TD Bgcolor="#aaaaaa">&nbsp</TD></TR>
			<TR><TD Bgcolor="#aaaaaa">&nbsp</TD></TR>
			<TR><TD Bgcolor="#aaaaaa">&nbsp</TD></TR>
		</TABLE>
	</TD>
	<TD>
		<TABLE BORDER=0>
		<TR><TD>
			<!-- ２段目 -->
			本来のテーブルの意味合いから逸脱する方法で、
			HTMLの使い方に反していることは、頭に入れておきましょう
		</TD></TR>
		</TABLE>
	</TD>
	</TR>
	</TABLE>
</BODY>
</HTML>

[Go To Top]