使用表格嵌套不是網(wǎng)站制作開發(fā)合適的解決方案

2022-05-02 分類：解決方案

網(wǎng)頁需要快速下載，但嵌套表可能會減慢下載速度。很顯然，無論基于何種考慮，使用表格嵌套都不是網(wǎng)站制作開發(fā)合適的解決方案。不要讓說更多的人使用寬帶或高速互聯(lián)網(wǎng)，這樣你就不必?fù)?dān)心你的網(wǎng)頁加載有多快。隨著網(wǎng)站上的內(nèi)容數(shù)量的增加，加載速度慢的頁面，或站點(diǎn)的訪問量將比加載速度快的頁面或站點(diǎn)的訪問量少。所以網(wǎng)站加載速度是非常重要的。接下來，就結(jié)合創(chuàng)新互聯(lián)十幾年的網(wǎng)站設(shè)計(jì)制作經(jīng)驗(yàn)，告訴你遇到多重表格嵌套時(shí)，如何進(jìn)行簡化處理以有效提高網(wǎng)站加載速度。

什么是嵌套表？

嵌套表是一個HTML表，其中包含另一個表。例如：

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>
      <table>
        <tr>
          <td>nested table column 1</td>
          <td>nested table column 2</td>
        </tr>
      </table>
    </td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

嵌套表導(dǎo)致頁面下載速度更慢

網(wǎng)頁上的單個表格不會導(dǎo)致網(wǎng)頁下載速度更慢(在合理范圍內(nèi))。但是，當(dāng)您將一個表放入另一個表中時(shí)，瀏覽器的呈現(xiàn)就會變得更加復(fù)雜，因此頁面加載的速度就會更慢。而且，嵌套在另一個表中的表越多，頁面加載的速度就越慢。在創(chuàng)建包含表的頁面時(shí)，請記住，表中的表越多，頁面加載的速度就越慢。通常，當(dāng)頁面加載時(shí)，瀏覽器從HTML的頂部開始，然后依次向下加載頁面。但是，對于嵌套表，它必須先找到表的末尾，然后才能顯示全部內(nèi)容。

用于布局的表格

您不應(yīng)在網(wǎng)頁中使用表格進(jìn)行布局。它們幾乎總是要求您使用嵌套表，因此表布局Web頁面的加載速度將比CSS中呈現(xiàn)的相同設(shè)計(jì)更慢。此外，如果您正在嘗試編寫有效的XHTML，則根本不應(yīng)將表用于布局。表格用于表格數(shù)據(jù)(如電子表格)，而不是用于布局。相反，您應(yīng)該使用CSS進(jìn)行布局CSS設(shè)計(jì)，以便更快地呈現(xiàn)并幫助您維護(hù)有效的XHTML。

設(shè)計(jì)更快的加載表

如果設(shè)計(jì)包含多行的表，則如果將每行寫為單獨(dú)的表，則通常加載速度會更快。例如，您可以編寫如下表：

<table style="width:100%;">
  <tr>
    <td colspan="2">top row</td>
  </tr>
  <tr>
    <td>left column</td>
    <td>right column</td>
  </tr>
</table>

但是，如果您編寫的表與兩個表相同，那么它的加載速度會更快，因?yàn)闉g覽器將呈現(xiàn)第一個表，然后再呈現(xiàn)第二個表，而不是一次呈現(xiàn)整個表。訣竅是確保每個表具有相同的寬度和其他樣式(如填充、邊距和邊框)。

<table style="width:100%;">
  <tr>
    <td colspan="2">top row</td>
  </tr>
</table>
<table style="width:100%;">
  <tr>
    <td>left column</td>
    <td>right column</td>
  </tr>
</table>
</table>

將嵌套表轉(zhuǎn)換為一個表

您可能覺得所有這些都是很好的信息，但是您有一個表，必須在其中嵌套另一個表。雖然這可能是真的，但通常可以通過使用表單元格上的和屬性將嵌套表轉(zhuǎn)換為稍微復(fù)雜的單個表。例如，在頂部的嵌套表中，我可以將其轉(zhuǎn)換為僅具有colspan屬性的單個表：

<table>
  <tr>
    <th>Column 1</th>
    <th colspan="2">Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>nested table column 1</td>
    <td>nested table column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td colspan="2">Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

與嵌套表相比，該表還具有使用更少字符的優(yōu)點(diǎn)，因此它的下載速度也會更快。

文章名稱：使用表格嵌套不是網(wǎng)站制作開發(fā)合適的解決方案
URL鏈接：http://jinyejixie.com/news11/149111.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站制作、解決方案等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

完整的企業(yè)網(wǎng)站建設(shè)開發(fā)流程解決方案 2022-05-02
北京攝影網(wǎng)站建設(shè)解決方案 2022-05-02
網(wǎng)站建設(shè)行業(yè)存在哪些問題以及解決方案 2022-05-01
我們常見瀏覽器兼容性問題與解決方案？ 2022-05-01
北京網(wǎng)站建設(shè)的解決方案之中小型企業(yè)2 2022-05-01
網(wǎng)站建設(shè)不得不知的托管解決方案 2022-05-01
簡潔的解決方案一給客戶簡單易行的方案 2022-04-29
自然語言處理在創(chuàng)新互聯(lián)的人工智能解決方案中的應(yīng)用 2022-04-27

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

使用表格嵌套不是網(wǎng)站制作開發(fā)合適的解決方案