再次div vs表

在我的項目中，我遇到了一個情況，我們必須創建表（可擴展）。
我已經實現了使用div和跨度。
我的前輩在問TI採用TD實現它，TR
再次div vs表

<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/
請幫我
謝謝:)

來源

2012-09-12 Navaneeth

我們怎麼幫？它看起來像一張桌子，它應該可以做成一張桌子...... –

不確定你在這裏問什麼。 – Fred

@Fred：我在詢問實現該類型組件的普遍偏好（請檢查我提供的JSFiddle鏈接）。 – Navaneeth

是使用表格作爲表格數據而不是通用的<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/

來源

2012-09-12 15:28:03

你例子看起來對我來說，爲理想的應用一個<table>元素。它是表格數據。看到這裏我是從，關閉CSS和腳本來了，再看看你的頁面：

大陸國家人口 GDP ASIA + 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之上的額外功能。好多了。

來源

2012-09-12 12:43:43

sw有更多層次結構，是否需要更多數量的tds？我們可能需要更多的hide（）函數調用？ – Navaneeth

您可以使用''元素將表格拆分成多個部分（這就是您所說的層次結構？）。 ''元素（而不是'td'）將單元格標記爲標題。您可以使用腳本來顯示/隱藏整個'tbody'，'tr'或全部'tr'元素集合（如果您有選擇器，您只需調用'hide（）'一次）。此外，如果需要，「」或「」可以跨多行和多列（「rowspan」和「colspan」）屬性。 –

雖然您可能聽說過表格不能在網站上使用，但這只是表示您不應該使用它們爲您的頁面創建佈局。

如果您必須顯示數據或以某種方式使用柵格，大部分時間表格纔是最好的。如果你想建立一個頁面，使用div的。

如果您有更具體的問題，隨時問！

ps：我認爲你的老師是正確的，從我能看到的。你想要在光柵/表格中顯示數據。只是使用表格，它的意思。

來源

2012-09-12 13:45:33 WhoKnows

回答

相關問題