HTML CSS で3個の画像を横並びに3個並べる方法

簡単なようで思うようにいかないことが、HTML CSS で3個の画像を横並びに3個並べることです。

単純に、以下のように画像を並べてみると

以下のように下に並んでしまいますね。。

画像を横並びに配列する方法を調べてみました。

style属性を利用して、float:leftで画像を横並びに

簡単に出来そうなところで、CSSで styleを float:left を指定します。

以下のように並びました。

ただ、この方法は、自由度があまりないです。

 tableタグを使って横一列に画像を配置

おすすめなのは、以下のように、tableタグを使う方法です。

table width="800"
td width="33%"

のようにすると、横幅の全体の長さと一個一個の画像の幅をパーセントで指定できます。

以下のように画像が横並びに並びました。

この方法は多少面倒ですが、自由度が高いのでおすすめです。