表格布局在哪(表格布局tablelayout通过什么布局控制表格的行数)

本文主要介绍HTML表格布局实际使用的详细讲解，这是HTML入门学习中的基础知识。有需要的朋友可以参考一下。

表格什么时候用？

现在，表格

表格的直观印象是，它是由多个排列整齐的单元格组成的元素，行和列可以清晰地看到。这个可以和Excel关联。从Excel在数据处理和统计中的地位，可以理解网页中表格的意义。

简单来说，能直观感受到多个元素是以行和列的概念排列时，用表格会让你轻松很多。如caniuse.com中应用表格的例子：
简单来说，当你能直观地感受到多个元素排列成行和列的概念时，使用表格会让你轻松很多。比如caniuse.com中表格的应用:

表格布局计算

使用表格很容易，但是有时每个网格的表格的最终状态可能不是您想要的。比如有的网格有换行符，然后整个表格因为换行符看起来非常难看。尤其是对于用于数据展现的表格，宽度分配是一个非常重要的话题。您可能需要仔细计算表格的总宽度，以便在每列网格中显示数据。

这是因为表格在布局上有自己的特点，会遵循一定的原则，通过计算确定其实际布局。接下来，本文将通过一个实际的表测试示例来讨论表如何计算自己的布局。
初始语句

本文只关注最常见的应用表格的方法，不会列出所有的情况。不同的浏览器对表格的一些概念有不同的解读，但布局计算基本一致(如有不同，另行提及)。

接下来用的测试表格都会以这样的外观呈现（内容取自零之轨迹）：
接下来要用的测试表格都会以这个样子呈现(内容取自零的轨迹):

同时表格会设置border-collapse:collapse；和边框间距:0；。这也是应用表格最常见的方式，Normalize.css使用这部分作为初始化定义。
两种算法

定义于

这两种算法的区别在于表格的宽度布局是否与表格中的数据内容有关。本文将讨论取这两个值时表格的布局计算原理。
自动表格布局-自动

自动表格布局的特点是表格的宽度布局与表格中的所有数据内容相关。它需要在确定最终的宽度布局之前获取所有的表格内容，然后一起显示。

如此看来，要点就是“内容相关”了。如果表格定义了固定宽度（这里是500px），而所有的单元格都不定义宽度（只讨论css定义宽度），会如何呢？来看结果：
这样，重点就是“内容相关性”。如果表格有固定的宽度(这里是500px)，所有单元格都没有宽度(只有css定义宽度)怎么办？看看结果:

上表中空的白色部分写为&；nbsp空网格。经过对比，可以发现以下几点:

第二列和第三列的宽度相同。
第一列的宽度与任何后续列的宽度之比似乎是2:1。
添加边框和内边距，所有列的总宽度等于表格中定义的宽度。

没有为每个单元格定义宽度，因此宽度布局完全由特定的内容数据(文本信息)决定。如何解释这个结果？你可以先直观地推测一下这个逻辑:

第一步，从每一列中选择文字内容最多的一列(理解为不换行时文字所占的最宽宽度)作为“代表”。
第二步，比较各列“代表”的宽度，然后根据它们的宽度比例关系，分配给它们表格的总宽度，包括边框和内边距。

参照上面的逻辑，再来反观一下前面的表格，是不是挺有一些道理？注意，前面说宽度比“似乎”是2:1，这个会是？来看看去掉内边距的版本：
参照上面的逻辑，再回头看前面的表，是不是很有道理？请注意，宽度比“似乎”是2:1。这会是什么？我们来看看去掉内边距的版本:

用前端调试工具具体看一下上面单元格的宽度，你会发现这个表和以前不一样，比例非常接近2:1(是的，因为边框的原因有一点点，但是没有边框，就无法区分列)。

可以看出，在分析宽度比例关系时，会将内容宽度、内边距和边框考虑在内。这也说明，不是衡量字符的数量，而是衡量字符在不换行的状态下所能占据的宽度(这里的2:1来源于汉字等宽)。自然内边距只是用来做一个更漂亮的表:)。

有宽度定义的时候，又会怎样呢？下面是一个部分单元格有宽度定义的表格：
当宽度被定义时会发生什么？下面的表格包含一些具有宽度定义的单元格:

其对应的html代码是:

在上表中可以找到以下几点:

宽度为5px的单元格实际呈现的宽度为13px，正好是一个汉字的宽度，而同一列中有汉字的单元格则以最小单元格宽度的形式排列文字(所以，换行)。
宽度为200px的单元格实际上以200px的宽度呈现，尽管在同一列中定义了70px的宽度。
对于没有确切宽度定义的第三列，最终得到分配第一列和第二列后表格的所有剩余宽度。

推论是，当既有宽度定义又有没有宽度定义的列时:

如果单元格定义宽度小于其内容的最小排列宽度(与非行排列相反，是在单元格中排列尽可能多的行时单元格所需的宽度)，则单元格所在的列将以最小排列方式呈现内容。
如果同一列中某个单元格的内容宽度小于该列中定义的最大宽度，则该列的实际宽度等于宽度定义。
没有宽度定义的列将首先由表格分配宽度，然后再分配给它们(同样，它们之间的比率取决于内容宽度)。

最前边的没有宽度定义的可以看做情况1，这里有的列有宽度定义，有的又没有，可以看做情况2。下面是情况3，即所有的列都有宽度定义时：
第一列没有宽度定义可以看作情况1，这里有些列有宽度定义，有些没有，可以看作情况2。下面是第三种情况，即所有列都有宽度定义:

对应的html代码:

上表中去掉了内边距，所以可以用宽度明确定义值，这三列的宽度比为2:1:1。还有一个条件是单元格中的内容宽度不超过宽度定义值。经过测试，当内容超过宽度定义值时，IE7及以下版本的行为与其他浏览器不同。

从这个表的例子中，我们可以知道，如果所有的列都有宽度定义，并且这些宽度定义的值之和小于表的宽度，那么在分配了对应于它们的宽度定义的宽度之后，表将继续按它们的宽度比例分配剩余的宽度给它们。

以上是自动表格布局和表格本身定义固定宽度时的三种情况分析。如果表格本身没有定义宽度，那么情况会比较多，会和表格的包含块(细节)有关。如果以后有合适的机会，我们再讨论(所谓文章篇幅有限...).
固定表格布局-固定

固定表格布局的特点是表格的宽度布局与表格中的数据内容无关，只需要接收表格第一行的信息就可以确定并显示最终的宽度布局。

固定表格布局是“内容无关”的，而且它强调“第一行”。请看下面这个表格示例：
固定表格布局是“内容独立”的，它强调“首行”。请参见下表示例:

对应的html代码:

固定表布局的逻辑要简单得多，表述如下:

只取第一行的信息，忽略第一行之后所有单元格的内容，以及第一行的宽度定义
，如果单元格有宽度定义，则先分配需要的宽度，然后将剩余宽度平均分配给没有宽度定义的单元格
第一行单元格的宽度分配将决定表格的宽度布局，第一行之后的内容不会改变布局。

还应该注意，当使用固定表格布局时，必须定义表格元素的宽度。如果未定义宽度(即自动默认值)，浏览器将使用自动表格布局。
闭幕词

实际上有

W3C的文档中提到，表格布局计算(自动表格布局)还没有成为规范。关于W3C对表格布局计算的解释，请参考表格宽度算法。
结论

事实上，对表格布局的计算原理做出如此详细的推断并不太实际。只是在需要解决细节的时候，有这些资料作为参考会有所帮助，虽然这样的机会不多。

但是从这篇文章的内容中，我们可以得到一个有意义的结论:表格定义了宽度，所有的单元格都不定义宽度，所以自动铺设的表格会尽量让你的所有数据不换行。如果换行影响外观，这意味着您必须精简数据或减少边距，而不是尝试自己重新分配宽度。

这次做这种实测和推断，感觉把具体情况细分后会比一次系统完整的表达出来更容易理解。也许是中国的运动？

以上是本文的全部内容，希望对大家的学习有所帮助。更多相关内容请关注AdminJS！

相关建议:

HTML实现网页动态时钟

Html的A标签中href和onclick的用法和优先级的区别

以上是HTML的表格布局细节。更多详情请关注AdminJS的其他相关文章！