完全なページを塗りつぶすテーブルを作る方法

Question

ページ全体（幅：100％、高さ：100％）を塗りつぶす次のような流体レイアウトを作成したいと思います。

+----+----+----+----+ 
| | | | | 
+----+----+----| | 
| | | | | 
+----+----+----| | 
| | | | | 
+----+----+----+----+ 

は、各セルの内部Iは、divの幅がボルドを四捨五入し、細胞間のCELLSPACINGを持っていると思いますしたいと思います。各セルは固定サイズである必要があります（オーバーフロー：非表示）。

これを行う最善の方法に関するお考えですか？

（更新）

私はテーブルをやってみましたが、その中のTDとdiv要素が一定の割合の高さとオーバーフローが隠されていた場合にも比例して成長している行および/またはセルの高さを制御することはできません。

私はまた、9個のdivsを左に浮かべて1個のdivを右に浮かべてみました。マージンやパディングが設定されていない場合はうまく動作します。パディングとマージンが設定されると（パーセンテージで）、幅と高さを（パーセント単位で）補正します。いいえ、整列しているようだ。

私はこの2つのうちどれをさらに発展させるべきですか？

Answer 1

<style> 
    html, body, table { width:100%; height:100%; } 
    td { width:25%; height:33%; } 
    div.round { width:100%; height:100%; background:blue; border-radius:5px; overflow:hidden; } 
</style> 


<table> 
    <tr> 
     <td><div class="round"></div></td> 
     <td><div class="round"></div></td> 
     <td><div class="round"></div></td> 
     <td rowspan="3"><div class="round"></div></td> 
    </tr> 
    <tr> 
     <td><div class="round"></div></td> 
     <td><div class="round"></div></td> 
     <td><div class="round"></div></td> 
    </tr> 
    <tr> 
     <td><div class="round"></div></td> 
     <td><div class="round"></div></td> 
     <td><div class="round"></div></td> 
    </tr> 
</table>