tableタグやformタグを使っているとき、改行されてしまってレイアウトが思うようにいかなかった経験はありませんか？
たとえば、幅が100のテーブルを２つ横に並べたいのに、次のようなタグにしてもうまくいきません。
<html><body><table width="100"><tr><td>左のテーブル</td></tr></table> <table width="100"><tr><td>右のテーブル</td></tr></table></body></html>
実際にはテーブルの間に改行がなくても下のようになります
これは、TableやFormが
ブロック要素であるからです。
いきなり、
要素という言葉を使ってしまいましたが、HTMLタグの＜＞に囲まれた部分（エレメント）が 要素です
<body>だったらBody要素 <table>ならTable要素ということです。
HTMLにはたくさんの要素がありますが、body要素の下（子）になる要素は大きく２つに分けられます
先ほどでた
ブロック要素ともうひとつが
インライン要素になります
ブロック要素は、四角の箱（幅は親要素一杯）の範囲に広がる物だとイメージしてもらえばわかりやすいかも。
なので、ブロック要素は普通には横には並べられません。
インライン要素は、何もしなくても横に並べることができます。
| 主なブロック要素 |
主なインライン要素 |
H1
H2
H3
H4
H5
H6
UL
OL
DIR
MENU
PRE
XMP
LISTING
DL
DIV
CENTER
NOSCRIPT
NOFRAMES
BLOCKQUOTE
FORM
ISINDEX
HR
TABLE
FIELDSET
ADDRESS |
A
IMG
BR
TT
I
B
U
SUB
SUP
SPAN
S
STRIKE
BIG
SMALLM
STRONG
DFN
CODE
SAMP
KBD
CITE
SELECT
TEXTAREA
LABEL
BUTTON
APPLET
OBJECT
FONT
BASEFONT
SCRIPT
MAP
Q
BDO
IFRAME |
簡単に言ってしまうと、ブロック要素は、左右に並べられない、インライン要素は並べられるという違いです。
では、ブロック要素を並べるにはどうすればよいでしょう？
上述の例のようにbody要素の下にtable要素を二つ別々に並べたのでは、どちらも幅は親要素（Body要素）一杯＝ウィンドウ一杯になるので、普通には横には並びません。
１．Tableタグを親要素に使う。
以前から良く使われていた方法です。テーブルで枠を作りその中にブロック要素を入れる方法です。
widthやheight,セルの数を調整することで柔軟にレイアウトが作れます。
親枠をborder=0にすると、枠線が見えないので綺麗に見えます。
ソース
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td><table width="100" border="1"><tr><td>左のテーブル</td></tr></table></td>
<td><table width="100" border="1"><tr><td>右のテーブル</td></tr></table></td>
</tr>
</table>
↓実際の表示
しかし、最近はあまり好まれない傾向があるようです。
２．スタイルシートのFloatをつかう
レイアウトは、スタイルシートで決めるというHTMLの流れにそって、比較的増えてきた方法です。
スタイルシートのfloatを使えばブロック要素を回り込ませることができます。
これを使い、左右に並べることができます。
ソース
<span style="float:left;width:100px;"><table width="100" border="1" align="right"><tr><td>左のテーブル</td></tr></table></span>
<span><table width="100" border="1" align="left"><tr><td>右のテーブル</td></tr></table> </span>
<span style="clear:left;">ここで回り込み解除</span>
↓実際の表示
ここで回り込み解除
＊スタイルシートのFloatを使用する場合は、Widthの設定が重要になってきます。
かならず、Widｔｈの設定をするようにしてください。
また、ブラウザによって表示が異なったり、バグもまだまだあるようです。
参考になるサイト
The Web KANZAKIさん 文書の骨格となる基本要素 -- ごく簡単なHTMLの説明
CSSバグリスト＠CSSバグ辞典スレッド
Public CSS