為什麼你應該避免使用嵌套表

嵌套表緩慢您的網頁

網頁需要快速下載,但嵌套表格可能會減慢過程速度。 不要讓任何人告訴你,更多的人使用寬帶或高速互聯網,所以你不必擔心你的網頁加載速度有多快。 隨著Web上的內容數量的增加,緩慢加載的頁面或網站將比加載速度快的頁面或網站少。 速度非常重要。

什麼是嵌套表格?

嵌套表格是一個HTML表格,裡面有另一個表格。 例如:

<表>

<第1列>
第2列
<第3列>


第1列

<表>

嵌套表格列1
嵌套表格列2



第3列


第1列
第2列
第3列

嵌套表導致頁面下載速度更慢

網頁上的單個表格不會導致頁面下載速度更慢(在合理範圍內)。 但是當你在另一個表中放置一張表時,瀏覽器渲染會變得更加複雜,因此頁面加載速度會更慢。 並且您嵌套在另一個表中的表越多,頁面加載速度越慢。

當您使用表格創建頁面時,請記住,表格內的表格越多,頁面加載速度越慢。 通常情況下,當頁面加載時,瀏覽器從HTML的頂部開始,然後在頁面上順序加載。 但是,對於嵌套表格,它必須先找到表格的結尾,然後才能顯示整個表格。

用於佈局的表格

不應該在你的網頁中使用表格進行佈局 。 他們幾乎總是要求您使用嵌套表格,所以表格佈局網頁的加載速度要比CSS中呈現的設計要慢。

另外,如果您要編寫有效的XHTML,則表格不應該用於佈局。 表格用於表格數據 (如電子表格),而不是用於佈局。 相反,您應該使用CSS進行佈局 -CSS設計渲染速度更快,並幫助您維護有效的XHTML。

設計更快的加載表

如果您設計一個具有多行的表格,如果將每行寫入單獨的表格,它通常可以更快速地加載。 例如,你可以像這樣寫一個表格:




頂行

左欄
右欄

但是,如果您將相同的表格編寫為兩個表格,則它會顯得加載得更快,因為瀏覽器會先渲染第一張,然後渲染第二張,而不是一次渲染整個表格。 訣竅是確保每個表具有相同的寬度和其他樣式(如填充,邊距和邊框)。



頂行





<第1列>


左欄
右欄

將嵌套表轉換為一個表

你可能會覺得所有這些都是很好的信息,但是你有一個表格,它必須嵌套另一個表格。 雖然這可能是正確的,但通常可以通過在表格單元格中使用和屬性將嵌套表格轉換為稍微複雜的單個表格。 例如,在頂部的嵌套表格中,我可以將它轉換為只有colspan屬性的單個表格:

<表>

colspan =“2” >第2列
<第3列>

第1列
嵌套表格列1
嵌套表格列2
第3列

第1列
colspan =“2” >第2欄
第3列

此表還具有使用比嵌套表少的字符的好處,所以它也會因此而更快地下載。