最佳實踐：表，Div，列表或某種組合...？

我有一個簡單的數據表少於100行。我目前一直在一系列嵌套的DIV中顯示數據。每行都有一個容器div，嵌套的div表示其中的數據列。（這是從我最早的編碼日起，當沒有像div這樣的東西時）的反應。最佳實踐：表，Div，列表或某種組合...？

第一列數據被格式化爲圖像鏈接，而另外兩列是文本。

返回使用表格有意義嗎？

另外，作爲一個實驗，我曾想過使用嵌套UL。包含所有行的UL和每行的單獨水平UL。

作爲進一步的筆記/問題，我有另一個數據塊可能導致數千行。在這種情況下，這些數據是否會導致「最佳實踐」的不同答案？

2011-10-24 w s

瀏覽器處理大量的行數，如果你把表格元素以正確的順序'

' – DefyGravity

實際上，你可以使用任何你想要的容器。最佳做法是將這些元素用於他們的用途。如果您正在顯示錶格數據，請務必使用表格！有很棒的插件可以更好地爲用戶提供體驗，而且閱讀和複製/粘貼非常簡單。

我總是問自己的問題是，如果這些數據最好顯示在Word或Excel文件中。如果是Excel，那麼它就是一張桌子。如果Word，它是div的。

如果您使用成千上萬的行，您可能希望爲用戶提供排序，過濾和提供更多信息以幫助實現可用性的控制。我會使用一個包含tablesorter，hovertable和tableFilter等jQuery插件的表來幫助簡化這一過程。

來源

2011-10-24 15:11:29 Whetstone

+11

+ 1如果是Excel，那麼它就是一張桌子。如果Word，它是div's.' – DefyGravity

我標記爲'正確'的答案，因爲我也喜歡這個比喻。 –

在這種情況下，表格是好的。表格用於顯示錶格數據，如db中的一行。儘管如此，您應該避免使用表格進行頁面佈局......

至於有成千上萬行，您可能需要查看分頁。我不認爲有更好的「最佳做法」

來源

2011-10-24 15:11:00 JackWink

+1分頁 – DefyGravity

如果我需要以表格的方式顯示數據，我主要使用<table>元素。顯示1000行或更多行時，您應該考慮用戶友好性。 jqGrid插件是很好的解決方案，並具有分頁，排序，搜索等功能。

來源

2011-10-24 15:17:18

列表是用於列表，表格用於表格數據，divs用於佈局。所以，如果你想要走最佳做法的路線;我想你應該在這裏使用一張桌子。

這就是說;使用div而不是表格並不是那麼糟糕。如果你已經使用div而不是表格，我不會擔心重寫。有一點需要注意的是你正在清理你的浮動列divs。例如：

<div class="row"> 
    <div class="column" style="float:left;"><!-- Some stuff --></div> 
    <div class="column" style="float:left;"><!-- Some stuff --></div> 
    <div class="column" style="float:left;"><!-- Some stuff --></div> 
    <div style="clear:both;"><!-- Leave empty --></div> 
</div>

你應該避免的是相反的（使用表div的地方，應使用）。

此外，即使您可能能夠使用列表元素獲得某種表結構，但這不是您想要去的路線。我以前從來沒有這樣做......說實話，我看過數百個例子，我認爲我從來沒有見過任何人將它們用於這樣的目的。我想這裏最好的理由是你爲什麼？因爲我從來沒有見過它，所以我沒有任何方便的例子說明你爲什麼不應該這樣做。但對我來說，這類似於告訴某人拿着扳手時不要用管子鬆動螺栓。我的意思是肯定....也許導管能夠把工作做好，但扳手就在那裏......

來源

2011-10-24 15:20:51 Dave

我很欣賞你用你的方式添加代碼作爲例子。我的代碼與您的示例類似，不同的是「row」類清除了浮動。 –

添加清除不應改變事物的外觀。這樣做可以避免在css浮動屬性處理不當的情況下出現在IE7中的浮動錯誤，並轉到文檔的其他部分。例如，製作這樣的表格;沒有清晰的div可能會導致表格中的元素浮動 - 即使您不希望它們。 – Dave

最佳實踐：表，Div，列表或某種組合...？

回答

相關問題