有沒有比<table>更好的佈局？

在佈置頁面時，<table>有哪些替代方法？我已經在各種地方看過表格不適合嘗試佈置頁面。我用什麼應該？ <div>？有沒有比<table>更好的佈局？

<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>

來源

2011-12-26 Marissa Levy

檢出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%;}

來源

2011-12-26 23:29:13

完成！向.wrapper添加了overflow-y auto – 2011-12-26 23:44:14

更好的是讓這個'hidden'。 – PeeHaa 2011-12-26 23:44:51

嘗試使用CSS--它更快，更可靠。在A List Apart上有關於此主題的好文章。

來源

2011-12-26 23:28:24 fuzzy

Is there比<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慢。表格也不太靈活。表格在語義上也不正確。（嗯... div的是不是真的sementic但嘿它打敗表）

另一件事：

請使用CSS，讓你的CSS從顯示邏輯分離。

來源

2011-12-26 23:32:21 PeeHaa

<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>

來源

2011-12-26 23:40:51

爲什麼額外的div？ – PeeHaa 2011-12-26 23:42:03

有沒有比<table>更好的佈局？

回答

相關問題