HTML 中的 Div 布局与表格布局

htmlweb developmentfront end technology更新于 2025/2/7 23:40:17

在 HTML 中，布局定义了网站的基本结构和外观。HTML 布局是一个蓝图，它向我们展示了 HTML 元素在网页中的排列方式。它为您提供了使用简单 HTML 标签创建网页的功能。

DIV 布局

Div 布局是 HTML 中最常见的布局，它基于 <div> 元素。HTML 中的 <div> 元素用于定义文档的某个部分。<div> 标签是一个容器标签，即它既有开始标签，也有结束标签。

我们可以在一个 HTML 文档中定义多个 <div> 元素，每个元素都可以用来显示不同的信息。在 <div> 内部元素中，我们可以使用多个 HTML 元素，例如 paragpraph(<p>)、heading(<h2>)、span(<span>) 等。我们可以将 <div> 标签中的所有 HTML 元素分组，并对其应用 CSS，使其更易于理解和呈现。

示例

以下是 div 布局的示例

<html>
<head>
   <style>
      h2,p {
         border: 2px;
         background-color: lightblue;
         text-align: center;
      }
   </style>
</head>
<body>
   <div>
      <h2>Introduction to Div tag</h2>
      <p>Div tag is the most commonly used tag for creating layout in HTML.</p>
   </div>
</body>
</html>

表格布局

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

<table> 标签也是一个容器标签，也就是说，它既有开始标签，也有结束标签。在 <table> 元素中，我们可以包含多个 HTML 元素，但为了将数据排列到表格中，需要使用三个元标签。第一个是 <tr> 标签，表示表格行，用于在表格中添加新行。

第二个是 <th> 标签，表示表格标题，用于存储表格的标题。最后一个是 <td> 标签，表示表格数据，用于存储表格的信息或数据。

示例

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
<body>
   <table>
      <tr>
         <th>This contains heading of the Table</th>
      </tr>
      <tr>
         <td>This tag contains the data to be shown by the table.</td>
      </tr>
      <tr>
         <p> we can use html elements inside table tag and we can also have multiple table row and table data in a table.</p>
      </tr>
   </table>
</body>
</html>

DIV 与表格布局

以下是 DIV 和表格布局之间的区别 -

页面大小 − 在 Div 布局中，我们有一个

标签，它只包含 HTML 元素，我们可以在一个 CSS 文件中定义它们的样式;而在表格布局中，我们有 th、td、tr 和多个元素，每个元素都有单独的样式，这会增加页面的整体大小。
页面渲染 − 页面渲染是指浏览器显示网页内容所需的时间。在 Div 布局中，浏览器不会查找结束标签;而在表格布局中，浏览器直到到达末尾才会显示页面内容。因此，与 div 布局相比，表格布局的页面渲染速度较慢。
维护 − div 布局让我们能够通过简单地更改 CSS 来轻松修改当前网页的设计，而表格布局很难修改当前设计，因为我们必须更改代码。
一致性 − 在 div 布局中，我们不必遵循任何 HTML 元素模式即可获得网页的一致性，但在表格布局中，如果我们缺少任何元素，例如表格行、表格标题、表格数据，那么整个内容结构都会发生变化，从而失去一致性。
建议 − 强烈建议使用 div 布局构建网页，因为 div 标签内的数据以适当的方式分隔，可以使网页蜘蛛快速运行，而表格布局中额外的 HTML 元素会增加页面的渲染时间。
灵活性 − 灵活性是我们衡量网站性能的重要因素之一。它告诉我们我们的网站是否能够在不同的设备上以相同的方式显示相同的内容。

如果使用表格布局，我们必须为表格提供特定的宽度，这会导致表格不灵活，您只能在与表格宽度匹配的屏幕尺寸下看到内容。但灵活性并非 div 布局的痛点，因为它可以通过 CSS 属性来调整，使其适应不同的屏幕尺寸。