once again div vs tables

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和脚本，然后查看您的页面：

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

印度2004年

中国13020

巴基斯坦201

孟加拉国181欧洲+1152

UK215

法国416

德国521

不是很清楚，是吗？现在将其作为<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将额外的功能分层。好多了。