HTML表格布局实际使用详解

作者：梁砫字体：[增加减小] 来源：互联网时间：2017-08-05

本文主要包含HTML,表格等相关知识,梁砫希望在学习及工作中可以帮助到您

什么时候会用到表格

现在，表格<table>一般不再用于网页整体的布局。不过，在面对某些特定的设计，如表单输入、数据呈现时，表格则可能是最恰当的选择。

关于表格的直观印象，就是由多个单元格（cell）整齐排列而成的元素，可以明确看出行（row）和列（column）。这可以联想到Excel，由Excel在数据处理和统计上的地位，就可以理解网页中表格的意义。

简单来说，能直观感受到多个元素是以行和列的概念排列时，用表格会让你轻松很多。如caniuse.com中应用表格的例子：
2015728173924594.png (470×175)

表格布局计算

使用表格很简单，但有时候表格最终为每一个格子呈现的状态，可能不是你想要的。比如说某些格子出现了换行，然后整个表格就因为换行看起来十分不美观。尤其是用于数据呈现的表格，宽度分配是一个很重要的话题，你可能需要为每一列格子可能呈现的数据情况，对表格的总宽度做精打细算。

这是因为，表格在布局上有自己的特性，它会遵循一定的原理，通过计算，确定出它的实际布局。接下来，本文以实际的表格测试示例，探讨表格是如何计算自己的布局的。
初始声明

本文只针对应用表格最常见的方法，而不会列出所有的情况。不同浏览器对表格的部分概念的解析有差异，但布局计算是基本一致的（如果有差异，会单独提及）。

接下来用的测试表格都会以这样的外观呈现（内容取自零之轨迹）：
2015728173942365.jpg (535×183)

同时，表格都会设置border-collapse:collapse;和border-spacing:0;。这也是应用表格的最常用做法，Normalize.css把这部分用作了初始化定义。
两种算法

定义在<table>元素上的css属性table-layout，将决定表格在布局计算时应用的算法。它有两种值，auto和fixed。在通常情况下，都使用默认值auto。

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

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

如此看来，要点就是“内容相关”了。如果表格定义了固定宽度（这里是500px），而所有的单元格都不定义宽度（只讨论css定义宽度），会如何呢？来看结果：
2015728174002286.jpg (538×116)

上面这个表格中，空白的部分是写了 空格。经过比较，可以发现以下几点：

    第2列和第3列宽度相同。
    第1列的宽度和后面任意一列的宽度比似乎是2:1。
    加上边框和内边距，所有列的宽度总合，等于表格定义的宽度。

每个单元格都没有定义宽度，所以宽度布局完全由具体的内容数据（文本信息）决定的。如何解释这样的结果呢？可以先直观地推测这样的逻辑：

第1步，从每一列中选取文字内容最多（理解为不换行的情况下，文本所占据的宽度最宽）的，作为“代表”。
第2步，比较各列的“代表”的宽度，然后按照它们的宽度比例关系，为它们分配表格的总宽度，包括边框和内边距。

参照上面的逻辑，再来反观一下前面的表格，是不是挺有一些道理？注意，前面说宽度比“似乎”是2:1，这个会是？来看看去掉内边距的版本：
2015728174128545.jpg (558×87)

用前端调试工具具体看一下上面的单元格的宽度，你会发现这个表格和之前不同，比例已经非常接近2:1（是的，还有的这一小点是因为边框，但是没有边框就没法区分列了）。

可见，在分析宽度比例关系的时候，是会把内容宽度和内边距，以及边框都考虑在内的。这也说明，不是衡量文字的数目，而是衡量文字在不换行状态所能占据的宽度（这里的2:1来源于中文汉字是等宽的）。使用内边距自然只是为了做出更美观的表格 :) 。

有宽度定义的时候，又会怎样呢？下面是一个部分单元格有宽度定义的表格：
2015728174212099.jpg (553×142)

它的对应html代码是：

相关文章