为什么我们不应该使用表格进行 HTML 布局?

htmlweb developmentfront end technology更新于 2025/2/8 1:16:17

在本文中，我们将讨论表格布局及其功能。我们将了解为什么表格布局是 HTML 中使用最少的布局，以及为什么在网站设计中不推荐使用表格布局。

HTML 中的布局指定了网站的基本组织结构和视觉风格。网站的 HTML 布局可以指导 HTML 元素的放置方式。它使您能够使用基本的 HTML 标签来构建网站。

表格布局

由于其复杂性，表格布局是 HTML 中最不推荐的布局之一。顾名思义，它基于 <table> 元素。<table> 元素提供了按行和列设置数据的功能。

<table> 标签既是开始标签，又是结束标签，因此它是一个容器标签。虽然必须使用三个元标记才能将数据排列到表格中，但我们可以在一个元素内使用多个 HTML 元素。

第一个元标记使用 <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 布局的原因 -

当我们在 Web 浏览器中打开 HTML 文档时，搜索引擎会开始读取 HTML 文档。它读取 HTML 后会立即显示网页内容。但是，搜索引擎很难渲染表格布局，因为它必须等待结束的 </table> 标签，因此渲染带有表格布局的网页需要更多时间。
表格布局会妨碍搜索引擎优化。创建表格 HTML 时，我们首先必须定义表格的所有必要元素，例如表格行、表格标题和表格数据。如果我们想在表格中添加任何其他 HTML 元素，那么根据渲染过程，它将在表格末尾渲染。假设我们想添加导航栏，那么它将显示在表格末尾。这会使网页内容看起来杂乱无章。
如果您使用的是 HTML 4.01，则无法使用表格布局，因为它仅允许您使用简单的表格来显示表格信息。这就是我们主要使用 HTML5 而不是 HTML4 的原因。
您不能在表格布局中使用嵌套表格，因为这会使表格的维护更加复杂。如果您创建了嵌套表格，并且几天后需要对数据进行一些更改，那么您必须遍历所有数据，这既耗时又复杂。
不使用表格进行 HTML 布局的另一个原因是其灵活性问题。创建表格时，您必须为其指定宽度，然后表格在不同宽度的屏幕上加载需要更长的时间。在这种情况下，您的表格在笔记本电脑屏幕上看起来不错，但当您将其加载到手机或显示器等不同设备时，它将无法缩放到设备的适当屏幕尺寸。
页面大小在网站布局的选择中起着重要作用，因为页面越小，浏览器渲染页面所需的时间就越短。对于表格布局，我们必须定义三个元标记，如果没有这些标记，表格将无法正确显示数据。我们也可以添加更多 HTML 元素，但这三个元标记是必须的，这会增加页面的整体大小。