再次 div 与表格答案

【问题标题】：once again div vs tables再次 div 与表格
【发布时间】：2021-08-21 00:36:36
【问题描述】：

在我的项目中，我遇到了我们必须创建表（可扩展）的情况。
我已经使用 div 和 spans 实现了。
我的前辈要求 ti 使用 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/
请帮帮我
谢谢:)

【问题讨论】：

我们应该如何提供帮助？看起来像一张桌子，应该是做一张桌子吧……
不知道你在这里问什么。
@Fred：我问的是实现该类型组件的一般偏好（请检查我提供的 JSFiddle 链接）。
啊，我明白了！在这个例子中，我会说表格作为表格是为了显示表格数据。然而这只是我的观点我敢说这是一个永远不会结束的论点！

标签： html css details-tag summary-tag

【解决方案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/

【讨论】：

【解决方案2】：

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

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

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

ps：从我所见，我认为你的老师是对的。您想在类似页面的栅格/表格中显示数据。只需使用表格，它就是为此而生的。

【讨论】：

【解决方案3】：

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

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

印度1004

china13020

巴基斯坦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 将额外的功能分层。好多了。

【讨论】：

一个sw有更多的层次结构，不是需要更多的tds吗？我们可能需要更多的 hide() 函数调用？？
您可以使用<tbody> 元素将表格分成多个部分（这就是您所说的层次结构吗？）。 <th> 元素（而不是 td）将单元格标记为标题。您可以使用脚本来显示/隐藏整个tbody、tr 或tr 元素的整个集合（如果选择器正确，您只需调用hide() 一次）。此外，如有必要，<th> 或 <td> 可以跨越多个行和列（rowspan 和 colspan）属性。