为什么我们不应该使用表格进行 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 布局。