为什么你应该避免使用嵌套表

嵌套表缓慢您的网页

网页需要快速下载,但嵌套表格可能会减慢过程速度。 不要让任何人告诉你,更多的人使用宽带或高速互联网,所以你不必担心你的网页加载速度有多快。 随着Web上的内容数量的增加,缓慢加载的页面或网站将比加载速度快的页面或网站少。 速度非常重要。

什么是嵌套表格?

嵌套表格是一个HTML表格,里面有另一个表格。 例如:

<表>

<第1列>
第2列
<第3列>


第1列

<表>

嵌套表格列1
嵌套表格列2



第3列


第1列
第2列
第3列

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

网页上的单个表格不会导致页面下载速度更慢(在合理范围内)。 但是当你在另一个表中放置一张表时,浏览器渲染会变得更加复杂,因此页面加载速度会更慢。 并且您嵌套在另一个表中的表越多,页面加载速度越慢。

当您使用表格创建页面时,请记住,表格内的表格越多,页面加载速度越慢。 通常情况下,当页面加载时,浏览器从HTML的顶部开始,然后在页面上顺序加载。 但是,对于嵌套表格,它必须先找到表格的结尾,然后才能显示整个表格。

用于布局的表格

不应该在你的网页中使用表格进行布局 。 他们几乎总是要求您使用嵌套表格,所以表格布局网页的加载速度要比CSS中呈现的设计要慢。

另外,如果您要编写有效的XHTML,则表格不应该用于布局。 表格用于表格数据 (如电子表格),而不是用于布局。 相反,您应该使用CSS进行布局 -CSS设计渲染速度更快,并帮助您维护有效的XHTML。

设计更快的加载表

如果您设计一个具有多行的表格,如果将每行写入单独的表格,它通常可以更快速地加载。 例如,你可以像这样写一个表格:




顶行

左栏
右栏

但是,如果您将相同的表格编写为两个表格,则它会显得加载得更快,因为浏览器会先渲染第一张,然后渲染第二张,而不是一次渲染整个表格。 诀窍是确保每个表具有相同的宽度和其他样式(如填充,边距和边框)。



顶行





<第1列>


左栏
右栏

将嵌套表转换为一个表

你可能会觉得所有这些都是很好的信息,但是你有一个表格,它必须嵌套另一个表格。 虽然这可能是正确的,但通常可以通过在表格单元格中使用和属性将嵌套表格转换为稍微复杂的单个表格。 例如,在顶部的嵌套表格中,我可以将它转换为只有colspan属性的单个表格:

<表>

colspan =“2” >第2列
<第3列>

第1列
嵌套表格列1
嵌套表格列2
第3列

第1列
colspan =“2” >第2栏
第3列

此表还具有使用比嵌套表少的字符的好处,所以它也会因此而更快地下载。