多く使われている３パターンで試してみました。
上から順にテーブルレイアウト、CSSを使ったレイアウト
、display:tableを使ったレイアウトの３つを使っています。
当たり前ですが、同一のレイアウトが可能です。
■1.テーブルレイアウト
<table>や<tr>,<td>タグを使って
画面をテーブルに見立て構成します。
長所：カンタン、古いブラウザでもOK
短所：タグでレイアウトを指定してしまっているので
動的に変わるレイアウトが難しい。
音声ブラウザで正しく読まれない。
全部読み込みが終わるまで表示されない。
例)
<table width="100%" cellspacing="0">
<tr>
<td width="33%"><1</td>
<td width="33%"><2</td>
<td width="34%"><3</td>
</tr>
<tr>
<td colspan="3">4</td>
</tr>
</table>
■2.CSS (float)を使ったレイアウト
<div>や<span>タグなどの、動作に影響のない
タグに対してfloatなどのスタイルを割り当てていく。
長所：レイアウトがスタイルとして分離できて変更等が容易。
読まれた分だけ表示されていくので表示が速い。
動的に変わるレイアウトが行いやすい。
短所：難しい。（float属性の理解が必要）
ブラウザによってレイアウトがずれる。
例)
<div style="width: 100%;">
<div style="float:left; width: 33%;">1</div>
<div style="float:left: width: 33%;">2</div>
<div style="float:left: width: 34%;">3</div>
<div style="float:bottom; width: 100%;">4</div>
</div>
■3.CSS (display:table)を使ったレイアウト
2.同様に<div>や<span>タグを使うのですが
display:tableというスタイルを指定することで
1.のテーブルレイアウトと同じように作成できます。
長所：カンタン。
読まれた分だけ表示されていくので表示が速い。
動的に変わるレイアウトが行いやすい。
短所：新しいブラウザでないと対応していない。
（ＩＥならば８以上）
例)
<div style="display:table; width: 100%; table-layout: fixed;">
<div style="display:table-row;">
<div style="display:table-cell; width: 33%;">1</div>
<div style="display:table-cell; width: 33%;">2</div>
<div style="display:table-cell; width: 34%;">3</div>
</div>
</div>
<div style="display:table; width: 100%; table-layout: fixed;">
<div style="display:table-row;">
<div style="display: table-cell; width: 100%;">4</div>
</div>
</div>
ＣＳＳが実装されてからは<table>タグは使っては
いけないとされてましたが、社内システムとか見た目にあまり
拘らないシステムならいいんじゃないでしょうか。
ここではスマフォアプリを作成していくので
３のdisplay:tableを使ったレイアウトで作成する
つもりです。