HTML 为什么我们不应该在布局中使用表格

在这篇文章中，我们将讨论表格布局和它的功能。我们将了解为什么表格布局是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布局中使用表格的几个原因 –

当我们在网络浏览器中打开一个HTML文档时，搜索引擎开始阅读HTML文档。它一读到HTML，就开始显示网页的内容。但搜索引擎很难呈现表格布局，因为它必须等待结尾的
标签，正因为如此，呈现带有表格布局的网页需要更多时间。
表格布局妨碍了搜索引擎的优化。当我们创建一个HTML表格时，我们首先要定义一个表格的所有必要元素，如表格行、表格标题和表格数据。如果我们想在表格中添加任何其他的HTML元素，那么根据渲染的过程，它将在最后被渲染。因此，假设我们想添加一个导航栏，那么它将被显示在表格的最后。这将使网页的内容看起来毫无条理。
如果你使用的是HTML4.01，那么你就不能使用表格布局，因为它只允许你使用一个简单的表格来显示表格式的信息。这就是为什么我们大多使用HTML5而不是HTML4的原因。
你不能在表格布局中使用嵌套表，因为这将使表格的维护更加复杂。如果你创建了嵌套表，过了一些日子，你必须对数据进行一些修改，那么你就必须浏览整个数据，这是一个耗时和复杂的过程。
不使用表格进行HTML布局的另一个原因是其灵活性问题。当你创建一个表格时，你必须给它一个指定的宽度，然后在不同宽度的屏幕上加载表格将需要更长的时间。在这种情况下，你的表格在笔记本电脑屏幕上看起来很好，但当你将它加载到不同的设备上，如手机或显示器，它将不会扩展到设备的适当屏幕尺寸。
页面大小在网站布局的选择中起着重要的作用，因为页面大小越小，浏览器渲染页面的时间就越短。在表格布局的情况下，我们必须定义三个元标签，如果没有这些标签，表格将无法正常显示数据。我们也可以添加更多的HTML元素，但必须有这三个标签，这就增加了页面的大小。