Question

在我的项目中，我遇到过必须创建表格（可扩展）的情况我已经实现了使用div和span 我的大四学生正在使用td，tr

来要求实现它

<div class="header"><div class="colLabel" style="width: 24%;">continent</div><div class="colLabel" style="width: 24%;">country</div><div class="colLabel" style="width: 24%;">population</div><div class="colLabel" style="width: 24%;">gdp</div></div>

我的实施是http://jsfiddle.net/agasthyanavaneeth/eLf5K/6/embedded/result/
请帮帮我谢谢:)）

Answer 1

是使用表格表格数据而不是通用<div>。您还可以使用新的HTML5代码：<details>和<summary>

然后执行以下操作：

<details>
   <summary>Continent name</summary>
    <p>Country, population and gdp content here</p>
</details>

http://html5doctor.com/the-details-and-summary-elements/

Answer 2

虽然您可能听说过表格不能在网站上使用...但这只是意味着您不应该使用它们来为您的网页创建布局。

如果你必须显示数据，或以某种方式使用栅格，大多数情况下表是最好的。如果要构建页面，请使用div。

如果您有更具体的问题，请随时提问！

ps：我认为你的老师是对的，从我能看到的。您希望在栅格/表格中显示数据。只是使用表格，它意味着它。

Answer 3

您的示例看起来像<table>元素的理想应用程序。这是表格数据。要查看我的来源，请关闭CSS和脚本，然后查看您的页面：

大陆   国家   人口   国内生产总值   亚洲+ 26826

india1004

china13020

pakisthan201

孟加拉国181欧洲+ 1152

UK215

France416

Germany521

现在还不是很清楚，是吗？现在将其显示为<table>：

continent | country    | population | gdp
-----------------------------------------
asia      | india      | 100        | 4
          | china      | 130        | 20
          | pakistan   | 20         | 1
          | bangladesh | 18         | 1
-----------------------------------------
europe    | UK         | 2          | 15
          | france     | 1          | 16
          | germany    | 2          | 21

数据更有意义，您可以使用CSS和javascript将额外功能分层。好多了。

再次div vs表

3 个答案: