目前，表格一般不再用于网页的整体布局。然而，当面对一些特定的设计时，例如表单输入和数据呈现，表单可能是最合适的选择。

表格的直观印象是多个单元格有序排列而成的元素，行列清晰可见。这个可以和Excel关联。从Excel在数据处理和统计中的地位，可以理解网页中表格的含义。

简单来说，当你可以直观的感受到多个元素是以行和列的概念排列的时候，你使用表格就会容易很多。比如caniuse.com中表格的应用：

2015728173924594.png(470175)

表格布局计算

使用表格很容易，但有时表格最终为每个网格呈现的状态可能不是您想要的。比如有些网格有了新的线条，然后整个表格因为有了新的线条就显得很不好看了。尤其是对于用于数据表示的表格，宽度分配是一个非常重要的课题。您可能需要根据每个列网格可能的数据情况仔细计算表格的总宽度。

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

初始声明

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

接下来使用的测试表将呈现以下外观(内容取自零的轨迹):

2015728173942365.jpg(535183)

同时表格会设置边框-折叠：折叠；和边框间距：0；这也是应用表的最常见方式，Normalize.css使用这一部分作为初始化定义。

两种算法

表格元素上定义的css属性表格布局将决定表格布局计算中应用的算法。它有两个值，自动和固定。在正常情况下，使用默认值auto。

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

自动表格布局-自动

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

这样，重点就“内容相关”了。如果表格定义了固定宽度(这里是500px)，所有单元格都没有定义宽度(只有css定义了宽度)怎么办？看结果：

2015728174002286.jpg(538116)

在上表中，空白部分写为nbsp。空白。经过比较，我们可以发现以下几点：

第2列和第3列的宽度相同。

列的宽度与任何后续列的宽度之比似乎是2:1。

有了边框和内部边距，所有列的宽度都等于表格定义的宽度。

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

步，从每一列中选择文本内容最多的一列(据了解，在不换行的情况下，文本占用的宽度最宽)作为“代表”。

第二步：比较每列“代表”的宽度，然后根据它们的宽度比给它们指定表格的总宽度，包括边框和内边距。

参考上面的逻辑，再回头看前面的表，是不是有些道理？注意宽度比“好像”是2:1。这会是什么？让我们看看去掉了内部页边距的版本：

2015728174128545.jpg(55887)

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

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

有宽度的定义会怎样？下表列出了一些单元格的宽度定义：

2015728174212099.jpg(553142)

它对应的html代码是：

tableclass='exhibit_table '

tr

，第二

thstyle=' width:200px'/th

th/th

/tr

tr

tdstyle=' width:5px'/td

td/td

td/td

/tr

tr

td/td

tdstyle=' width:70px'/td

Td 1234 /td

/tr

/table

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

宽度为5px的单元格，实际渲染宽度为13px，正好是单个汉字的宽度。同一列中有汉字的单元格以最小单元格宽度的形式排列字符(因此，换行)。

宽度为200px的单元格实际上呈现的宽度为200px，尽管在同一列中有宽度为70px的定义。

第三列没有的宽度定义。最后，获得列和第二列分配后表格的剩余宽度。

推论是，当同时存在宽度定义和没有宽度定义的列时：

如果单元格定义宽度小于其内容的最小排列宽度(当单元格中排列尽可能多的行时，与非换行排列相反，单元格所需的宽度)，则单元格所在的列将以最小排列显示内容。

如果同一列中单元格的内容宽度(以不换行的形式，这是下面单词的含义)小于该列中的更大宽度定义，则该列的实际宽度等于宽度定义。

没有宽度定义的列将在分配给它们之前由表分配给具有宽度定义的列(同样，它们之间的比率取决于内容宽度)。

最前面没有宽度定义的可以看做是情况1，这里有些列有宽度定义，有些没有，可以看做是情况2。以下是情况3，所有列都有宽度定义：

2015728174233994.jpg(54998)

对应的html代码：

table class=' exhibit _ table exhibit _ table _ with _ no _ padding '

tr

thstyle=' width:50px'/th

thstyle=' width:50px'/th

thstyle=' width:100px'/th

/tr

tr

td/td

td/td

td/td

/tr

tr

td/td

td/td

td/td

/tr

/table

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

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

以上是对表格自动布局，表格本身定义了固定宽度的三种情况的分析。如果表格本身没有定义宽度，那么会有更多的情况，并且会与表格的containingblock (details)相关。如果以后有合适的机会，我们再来讨论(所谓文章篇幅有限.).

固定表格布局-固定

固定表格布局的特点是表格的宽度布局与表格中的数据内容无关。只有接收到表格行的信息，才能确定并显示最终的宽度布局。

固定表格布局是“内容无关”，强调“行”。请参见下表示例：

2015728174250768.jpg(551165)

对应的html代码：

table class=' exhibit _ table exhibit _ table _ fixed '

tr

thstyle=' width:50px'/th

，第二

Th一二三四/th

/tr

tr

Td艾丝蒂尔布莱特/td

tdwidth=' 1000px'/td

td/td

/tr

tr

tdstyle=' width:5px'/td

td/td

td/td

/tr

/table

固定表格布局的逻辑要简单得多，表达如下：

只取行的信息，忽略行后所有单元格的内容和宽度的定义

在行中，如果单元格有宽度定义，则首先为它们分配所需的宽度，然后将剩余的宽度平均分配给没有宽度定义的单元格

行单元格的宽度分布将决定表格的宽度布局，行后的内容不会改变布局。

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

闭幕词

实际上有colgroup、thead、tfoot、caption和其他与表相关的元素，但是在最常见的用法中并不需要它们。事实上，在表格的布局计算中也考虑了它们。加上有单元格合并的情况，你大概可以想象表格布局的计算有多复杂。

W3C文件中提到表布局计算(自动表布局)还没有成为标准。有关W3C对表格布局计算的解释，请参见表格宽度算法。

标签

事实上，对表格布局的计算原理做出如此详细的推断是不切实际的。也就是说，当细节需要解决的时候，有这个资料做参考会有帮助，虽然这样的机会不多。

但是，根据本文的内容，我们可以得到一个有意义的结论：如果表格定义了宽度，所有的单元格都没有定义宽度，那么自动布局表格就会试图让你的所有数据不换行，如果换行影响了美观，那就意味着我们必须精简数据或者减少边距，而不是试图自己重做宽度分配。

这一次做这种实际测量和推断，感觉会比一次性系统完整的表达更容易理解，可能算是中国人的做法？

本文转载自中文网站