為什麼我們不應該使用表格進行 HTML 佈局?


在本文中,我們將討論表格佈局及其功能。我們將瞭解為什麼表格佈局是 HTML 中使用最少的佈局,以及為什麼在設計網站時不建議使用它。

HTML 中的佈局指定了網站的基本組織和視覺風格。網站的 HTML 佈局充當 HTML 元素放置方式的指南。它使您能夠使用基本的 HTML 標籤構建網站。

表格佈局

由於其複雜性,表格佈局是 HTML 中最不推薦的佈局之一。顧名思義,它基於 <table> 元素。<table> 元素提供了設定資料行和列的功能。

<table> 標籤既是開始標籤又是結束標籤,使其成為一個容器標籤。雖然必須使用三個元標籤才能將資料排列到表格中,但我們可以在一個元素內部使用多個 HTML 元素。

第一個使用 <tr> 標籤向表格新增新行,<tr> 代表“表格行”。第二個是 <th> 標籤,代表表格標題,並存儲表格的標題。最後一個是 <td>,即表格資料,它獲取需要儲存在表格中的資訊。

示例

以下示例建立了一個只有一行的表格。

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
   <body>
      <table>
         <tr>
            <th>This tag defines the heading of the table</th>
         </tr>
         <tr>
            <td>This tag gets the information to be stores in the rows and columns </td>
            <p> HTML components can be used inside table tags, and tables can include number of table rows and table data.</p>
         </tr>
      </table>
   </body>
</html>

示例

以下示例建立了一個有多行的表格:

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
   <body>
      <table style width=40%>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Roll</th>
         </tr>
         <tr>
            <td>Rama</td>
            <td>17</td>
            <td>1001</td>
         </tr>
         <tr>
            <td>Radha</td>
            <td>18</td>
            <td>1002</td>
         </tr>
      </table>
   </body>
</html>

為什麼我們不應該使用表格進行 html 佈局

以下是一些不建議使用表格進行 HTML 佈局的原因:

  • 當我們在網路瀏覽器中開啟 HTML 文件時,搜尋引擎開始讀取 HTML 文件。它在讀取 HTML 時就開始顯示網頁內容。但對於搜尋引擎來說,渲染表格佈局很困難,因為它必須等待結束 </table> 標籤,因此渲染帶有表格佈局的網頁需要更多時間。

  • 表格佈局妨礙了搜尋引擎最佳化。當我們建立 HTML 表格時,首先必須定義表格的所有必要元素,如表格行、表格標題和表格資料。如果我們想在表格中新增任何其他 HTML 元素,那麼根據渲染過程,它將在最後渲染。因此,假設如果我們想新增一個導航欄,它將顯示在表格的末尾。這將使網頁內容看起來雜亂無章。

  • 如果您使用的是 HTML4.01,則不能使用表格佈局,因為它只允許您使用簡單的表格來顯示錶格資訊。這就是我們主要使用 HTML5 而不是 HTML4 的原因。

  • 您不能在表格佈局中使用巢狀表格,因為這會使表格的維護更加複雜。如果您建立了巢狀表格,並且幾天後您必須對資料進行一些更改,那麼您必須遍歷所有資料,這是一個既耗時又複雜的過程。

  • 不使用表格進行 HTML 佈局的另一個原因是其靈活性問題。當您建立表格時,必須為其指定寬度,然後表格在不同寬度的螢幕上載入需要更長的時間。在這種情況下,您的表格在筆記型電腦螢幕上看起來不錯,但當您在不同的裝置(如手機或顯示器)上載入它時,它不會縮放至裝置的相應螢幕尺寸。

  • 頁面大小在選擇網站佈局方面起著重要作用,因為頁面大小越小,瀏覽器渲染頁面所需的時間就越少。在表格佈局的情況下,我們必須定義三個元標籤,如果沒有這些標籤,表格將無法正確顯示資料。我們還可以新增更多 HTML 元素,但這三個必須存在,這總體上增加了頁面大小。

結論

在本文中,我們討論了表格佈局及其屬性。我們簡要討論了表格佈局的許多要點,所有這些要點結合在一起足以證明為什麼表格佈局不是設計網站時推薦使用的 HTML 佈局。在討論所有這些要點時,我們將表格佈局與 Div 佈局進行了比較。

Div 佈局是最常用的 HTML 佈局,並且由於其屬性而被高度推薦。在為您的網站選擇 HTML 佈局時,請記住以上所有要點。作為建議,如果它符合您網站的需求,我們建議您使用 Div 佈局。

更新於: 2023年2月27日

291 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告