<table>よりもレイアウトは優れていますか？

Question

ページをレイアウトするとき、<table>の代替手段は何ですか？テーブルをレイアウトしようとするとテーブルがうまくいかないことを私は様々な場所で読んだことがあります。何をにするといいですか？私は使ってますか？ <div>？

<table align="center" width="100%" height="250"> 
    <tr> 
    <td align="left" width="25%"><?php require_once("page1.php"); ?></td> 
    <td align="left" width="25%"><?php require_once("page2.php"); ?></td> 
    <td align="left" width="25%"><?php require_once("page3.php"); ?></td> 
    <td align="left" width="25%"><?php require_once("page4.php"); ?></td> 
    </tr> 
</table> 

Answer 1

チェックアウトcss grid system：セマンティック、テーブルレスレイアウトで

、あなたはこのようなものになります投稿そのコード：

HTML：

<div class="wrapper"> 
    <div><?php require_once("page1.php");?></div> 
    <div><?php require_once("page1.php");?></div> 
    <div><?php require_once("page1.php");?></div> 
    <div><?php require_once("page1.php");?></div> 
</div> 

CSS：

.wrapper { overflow-y:auto;} 
.wrapper div { float:left;width:25%;} 

を

Answer 2

CSSを使用してみてください。これは、より高速で信頼性の高い方法です。 A List Apartにこのトピックに関する良い記事があります。

Answer 3

ありますか<table>よりも優れたレイアウトですか？

質問：テーブルよりレイアウトが悪いですか？

<div class="container"> 
    <div><?php require_once("page1.php"); ?></div> 
    <div><?php require_once("page2.php"); ?></div> 
    <div><?php require_once("page3.php"); ?></div> 
    <div><?php require_once("page4.php"); ?></div> 
</div> 

.container { width: 100%; overflow: hidden; } 
.container > div { float: left; width: 25%; } 

demoを参照してください。

コンテナの上のoverflow: hidden;トリックに注意してください。これは、内側のdivにfloat: left;があるためです。 floatを使用する場合、コンテナーはコンテンツのサイズを認識しません。 divはドキュメントの通常の流れから取り出されるからです。

レイアウトの目的ではなく、表形式のコンテンツ用の表のみを使用してください。

レンダリングテーブルは、レンダリングdivよりも処理速度が遅いです。テーブルの柔軟性も低くなります。また、テーブルは意味的に正しいものでもありません。

CSSを使用して、表示ロジックから分離CSS保管してください：

もう一つは（まあ...のdivは本当にsementicはありませんが、ちょっとそれはテーブルを打ちます）。

Answer 4

<div> 
<ul> 
    <li><?php require_once("page1.php");?></li> 
    <li><?php require_once("page1.php");?></li> 
    <li><?php require_once("page1.php");?></li> 
    <li><?php require_once("page1.php");?></li> 
</ul> 
</div>