首頁 > 文章 > web前端 > 為什麼我們不應該使用表格進行HTML佈局？

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

WBOY轉載: 2023-09-04 18:25:06575瀏覽

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

HTML 中的佈局指定了網站的基本組織和視覺風格。網站的 HTML 佈局可作為如何放置 HTML 元素的指南。它使您能夠使用基本 HTML 標籤建立網站。

表格佈局

由於其複雜性，表格佈局是 HTML 中最不建議的佈局之一。顧名思義，它是基於

元素。

元素提供了按行和列設定資料的功能。

標記既充當開始標記又充當結束標記，使其成為容器標記。雖然必須使用三個元標記才能將資料排列到表中，但我們可以在一個元素內使用多個 HTML 元素。

第一個使用

標記向表中新增一行，該標記表示「表格行」。第二個是

標籤，代表表格標題，儲存表格的標題。最後一個是	，即表數據，取得需要儲存在表中的資訊。範例以下範例建立一個包含單行的表格。 <!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 就開始顯示網頁內容。但是搜尋引擎很難渲染表格佈局，因為它必須等待結束

標籤，代表表格標題，儲存表格的標題。最後一個是

，即表數據，取得需要儲存在表中的資訊。

範例

以下範例建立一個包含單行的表格。

<!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 就開始顯示網頁內容。但是搜尋引擎很難渲染表格佈局，因為它必須等待結束

標籤，因此渲染具有表格佈局的網頁需要更多時間。

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

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

您無法在表格佈局中使用巢狀表格，因為這會使表格的維護更加複雜。如果您建立巢狀表，幾天後您必須對資料進行一些更改，那麼您必須遍歷整個數據，這是一個耗時且複雜的過程。

不使用表格進行 HTML 佈局的另一個原因是其靈活性問題。建立表格時，必須為其指定指定的寬度，然後表格在具有不同寬度的螢幕上載入將需要更長的時間。在這種情況下，您的表格在筆記型電腦螢幕上看起來不錯，但是當您將其加載到手機或顯示器等不同設備上時，它不會縮放到設備的適當螢幕尺寸。

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

結論

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

Div 佈局是最常用的 HTML 佈局，並且由於其屬性而強烈建議使用。在為您的網站選擇 HTML 佈局時，請嘗試牢記以上所有要點。作為建議，如果符合您網站的要求，我們建議使用 Div 佈局。

以上是為什麼我們不應該使用表格進行HTML佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 html 搜索引擎

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

看更多