實際表比。格表

這實際表比。格表

<table> 
    <tr> 
     <td>Hello</td> 
     <td>World</td> 
    </tr> 
</table>

可以用這張做到：

<div> 
    <div style="display: table-row;"> 
     <div style="display: table-cell;">Hello</div> 
     <div style="display: table-cell;">World</div> 
    </div> 
</div>

現在，有沒有在性能方面這兩者之間有什麼區別和/或渲染速度或他們是一樣的？

來源

2010-04-11 Ben

表使佈局成爲可能，divs使它不可能。表格使可讀，易於理解的代碼。 Divs需要大量的駭客和詭計，這些都不太容易理解，即使如此，結果也如此充滿了不必要的行爲。 – Anderson 2013-07-09 11:32:23

如果你用DATA填充這個表格？是的，使用表格。您是否在使用它來佈局您的網站？ ***請勿*** **使用表格**！ Div是用於網站內容/佈局的，表格是一個陳舊的元素，其唯一目的就是很好地排列數字/數據。 – Mike 2014-02-03 18:10:40

使用div模擬數據表在語義上是不正確的，而且通常與呈現即時的性能無關。瓶頸來自JavaScript或超長頁面，嵌入了大量元素，通常在過去的時間裏有100個用於創建佈局的嵌套表格。

使用表格來表達他們的意思，以及div的意思。顯示錶行和單元格屬性將利用div佈局，然後爲數據表示創建表格。將它們看作與您可以在報紙或雜誌中找到的相同的佈局列和行。

性能方面你有幾個與DIV例如多個字節，哈哈:)

來源

2010-04-11 17:21:53

以及您如何評價響應能力？因爲除了添加水平滾動條 – PirateApp 2018-01-01 14:26:42

該表不會被渲染，直到其所有的標記已被下載。雖然個人divs會在他們的標記被下載後立即呈現。我想總的時間會是一樣的，但分區會給人一種更好的表現和更快的響應感。

來源

2010-04-11 17:17:22 Midhat

如果'table-layout'設置爲'fixed'，則不是這樣。 – Thomas 2010-04-11 17:26:38

傳統代碼我猜，即使是Google這樣的網站佈局的最小變化也很難。人們說 - 如果有效，不要改變它。 – 2010-04-11 17:31:03

這是依賴於瀏覽器。 Firefox會逐漸呈現表格，但IE不會。 http://blogs.msdn.com/ie/archive/2005/02/10/370721.aspx – Dor 2010-04-11 18:03:09

你真的不應該擔心表格渲染的性能。即使有一個，直到有數百（數千？）個表才能顯示，您將不會注意到它。使用你覺得更舒適的東西。

來源

2010-04-11 17:18:07 mingos

有很多關於這個的討論和div表通常會佔據上風，因爲它的樣式靈活性。這裏有一個鏈接 - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

來源

2010-04-11 17:20:25 Hanseh

你的兩個鏈接都指向同一頁面。 – Mikt25 2014-02-27 17:10:41

在第一個例子中，我不會擔心表現，但更多關於語義。如果是表格數據，請使用<table>。如果它只是表示佈局元素的塊元素，請使用<div>。

如果你確實真的擔心性能，那麼答案仍然取決於所使用的客戶端。衆所周知，MSIE在表格渲染中速度較慢。你至少應該在不同的瀏覽器中測試自己。

如果這種擔心是由大數據引起的，那麼我會考慮引入您即將顯示的數據的分頁/過濾。

來源

2010-04-11 17:21:43 BalusC

如果您展示表格數據，那麼你應該使用一個表 - 它和相關的元素，擁有所有必要的語義代表數據表。一團糟都沒有。

來源

2010-04-11 17:25:38

我想提一提，如果你使用一個表結構，而不是股利不是用戶可容納CMD（或Windows ALT）從表中選擇數據的某個區域進行復制。這些數據也很容易粘貼到Excel和其他類似的工作簿程序中。

來源

2013-03-11 14:45:56 deweydb

只是在我的表現題目扔兩美分。對於小型（例如100行以下）的表格，使用DIV不會在性能方面產生太大的差異。

如果要生成很長的數據集，在另一方面，你倒手絕對應該使用傳統的HTML表格。

簡要說明：

這一切都從我公司的項目中，我寫了一個Javascript類以程序上生成基於SQL的數據（這是一個報告各種模塊），我的表催生。無論如何，我喜歡DIV，所以我寫它是基於DIV的，就像OP示例一樣。

經過一些可怕的表現後（特別是在IE8中），我決定使用表格重新編寫它，因爲它總體上是非常簡單的表格數據。無論出於何種原因，表格都是Chrome中我的計算機上的兩倍。 Safari也是如此。這就是說，由於我無法提供我的工作代碼，所以我寫了一個小小的基準測試工具，讓您可以嘗試其中一種方法。你會發現他們幾乎完全相同，只有一個人用造型來模仿桌子的標準行爲，而另一個只是一張老式的桌子。

唯一真正的區別是正在生成的元素的類型，所以這是我可以在時間增量中解釋的唯一的事情。我確定它會因瀏覽器而異，但在我看來，表格元素更快。

<script type="text/javascript"> 
var time_start = new Date().getTime(); 
var NUM_ROWS = 5000; 
var NUM_CELLS = 8; 
var OLD_STYLE = 1; // toggle 0/1, true/false 
if(OLD_STYLE) 
{ 
    var table = document.createElement('table'); 
    document.body.appendChild(table); 
    for(var a = 0; a < NUM_ROWS; a++) 
    { 
     var row = document.createElement('tr'); 
     for(var b = 0; b < NUM_CELLS; b++) 
     { 
      var cell = document.createElement('td'); 
      cell.innerHTML = 'cell'; 
      row.appendChild(cell); 
     } 
     table.appendChild(row); 
    } 
} 
else 
{ 
    var table = document.createElement('div'); 
    document.body.appendChild(table); 
    for(var a = 0; a < NUM_ROWS; a++) 
    { 
     var row = document.createElement('div'); 
     row.setAttribute('style','display: table-row; padding: 2px;') 
     for(var b = 0; b < NUM_CELLS; b++) 
     { 
      var cell = document.createElement('div'); 
      cell.setAttribute('style','display: table-cell; padding: 2px'); 
      cell.innerHTML = 'cell'; 
      row.appendChild(cell); 
     } 
     table.appendChild(row); 
    } 
} 
var dt = (new Date().getTime() - time_start)/1000; 
console.log(dt + ' seconds'); 
</script>

來源

2014-01-16 19:59:49

之外，沒有一個表元素是遠程響應的，原因可能是'setAttribute'調用。你可以做一個測試，注入HTML？另外請注意，您正在測量創建速度，而不是渲染速度。 – 2014-01-16 20:03:58

您是否有理由相信「注入」HTML會比直接操作DOM更快？另外，你會注意到，我添加了節點，所以你可以說它測量了創建和渲染？ – 2014-01-17 00:16:14

「我附加節點，我做他們」 - 這會大大減慢事情。相反，您應該先建立表格，然後_將其追加到文檔中。否則，每次影響文檔的更改都會導致瀏覽器重新計算佈局_again_。如果您先構建表/人造表，然後在文檔完成後將其追加到文檔，那麼時間差是多少？ – 2014-01-17 05:53:10

在我看來，使用div的是造型以及基於瀏覽器的大小布局的唯一原因。如果沒有損壞，請不要修復它。儘管使用CSS，但Div比較容易。

表：優點 - 你可以得到一個非常複雜的佈局，你想如何。更可靠。有時使用複雜的css樣式會使情況變得有點奇怪。對負責任的網站不利。

Divs：可以根據瀏覽器輸入進行調整，更靈活，更方便。

來源

2015-12-15 21:26:07 Bodhi1

實際表比。格表

回答

相關問題