使用表格嵌套不是网站制作开发合适的解决方案

2019-01-29 13:54:34

网站建设网站设计网站建设公司

网页需要快速下载，但嵌套表可能会减慢下载速度。很显然，无论基于何种考虑，使用表格嵌套都不是网站制作开发合适的解决方案。不要让说更多的人使用宽带或高速互联网，这样你就不必担心你的网页加载有多快。随着网站上的内容数量的增加，加载速度慢的页面，或站点的访问量将比加载速度快的页面或站点的访问量少。所以网站加载速度是非常重要的。接下来，就结合引航博景十几年的网站设计制作经验，告诉你遇到多重表格嵌套时，如何进行简化处理以有效提高网站加载速度。

什么是嵌套表？

嵌套表是一个HTML表，其中包含另一个表。例如：

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>
      <table>
        <tr>
          <td>nested table column 1</td>
          <td>nested table column 2</td>
        </tr>
      </table>
    </td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

嵌套表导致页面下载速度更慢

网页上的单个表格不会导致网页下载速度更慢(在合理范围内)。但是，当您将一个表放入另一个表中时，浏览器的呈现就会变得更加复杂，因此页面加载的速度就会更慢。而且，嵌套在另一个表中的表越多，页面加载的速度就越慢。在创建包含表的页面时，请记住，表中的表越多，页面加载的速度就越慢。通常，当页面加载时，浏览器从HTML的顶部开始，然后依次向下加载页面。但是，对于嵌套表，它必须先找到表的末尾，然后才能显示全部内容。

用于布局的表格

您不应在网页中使用表格进行布局。它们几乎总是要求您使用嵌套表，因此表布局Web页面的加载速度将比CSS中呈现的相同设计更慢。此外，如果您正在尝试编写有效的XHTML，则根本不应将表用于布局。表格用于表格数据(如电子表格)，而不是用于布局。相反，您应该使用CSS进行布局CSS设计，以便更快地呈现并帮助您维护有效的XHTML。

设计更快的加载表

如果设计包含多行的表，则如果将每行写为单独的表，则通常加载速度会更快。例如，您可以编写如下表：

<table style="width:100%;">
  <tr>
    <td colspan="2">top row</td>
  </tr>
  <tr>
    <td>left column</td>
    <td>right column</td>
  </tr>
</table>

但是，如果您编写的表与两个表相同，那么它的加载速度会更快，因为浏览器将呈现第一个表，然后再呈现第二个表，而不是一次呈现整个表。诀窍是确保每个表具有相同的宽度和其他样式(如填充、边距和边框)。

<table style="width:100%;">
  <tr>
    <td colspan="2">top row</td>
  </tr>
</table>
<table style="width:100%;">
  <tr>
    <td>left column</td>
    <td>right column</td>
  </tr>
</table>
</table>

将嵌套表转换为一个表

您可能觉得所有这些都是很好的信息，但是您有一个表，必须在其中嵌套另一个表。虽然这可能是真的，但通常可以通过使用表单元格上的和属性将嵌套表转换为稍微复杂的单个表。例如，在顶部的嵌套表中，我可以将其转换为仅具有colspan属性的单个表：

<table>
  <tr>
    <th>Column 1</th>
    <th colspan="2">Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>nested table column 1</td>
    <td>nested table column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td colspan="2">Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

与嵌套表相比，该表还具有使用更少字符的优点，因此它的下载速度也会更快。

上一篇 | 浏览环境变化让网站设计已经不再有绝对的标准宽度

下一篇 | 从事网站设计许多年不妨认真看下其本质属性