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慢。表也不太灵活。表也没有语义正确。（嗯...... div并不是真正的sementic但是它比桌子还要好）

另一件事：

请使用CSS并将CSS与显示逻辑分开。

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>

是否有比<table> </table>更好的布局

4 个答案: