深入解析HTML的table表格标签与相关的换行问题

何为table：
table者Html表格也，数据之载体。
下面是一个比较标准的table代码写法：

简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行，th元素定义表头的单元格，td元素定义表格单元格。border属性规定表格边框的宽度，cellpadding规定单元边沿与其内容之间的空白，cellspacing规定单元格之间的空白，这三个属性我们一般手动设置为0避免浏览器差异。width属性规定表格的宽度，因为table宽度是随内部元素的宽度撑起多少而变化，而常用情况下我们希望table是同外部容器等宽，所以常常默认设置100%宽度使之撑满容器。

不得不说的table-layout:fixed属性
table-layout: auto（默认）|fixed。
参数：
auto：默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来，速度很慢。
fixed：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。 解析速度快。
fixed布局模型的工作步骤：
1.width属性值不是auto的所有列元素会根据width值设置该列的宽度。
2.表首行中位于该列的单元格width，根据该单元格宽度设置此列的宽度。如果这个单元格跨多列，则宽度在这些列上平均分配。
3.在以上两步之后，如果列的宽度仍为auto，会自动确定其大小，使其宽度尽可能相等。此时，表的宽度设置为表的width值或列宽度之和(取其中较大者)。如果表度度大于其列宽总和，将二者之差除以列数，再把得到的这个宽度增加到每一列上。
这种方法的速度很快，因为所有列宽都由表的第一行定义。首行后所有行中的单元格都根据首行所定义的列宽确定大小。后面这些行中的单元格不会改变列宽。这意味着为这些单元格指定的width值都会被忽略。
一般在做复杂表格html的时候，有时候你会发现，无论怎么调整第一行每列的width，列宽还是会发生出乎于你意料之外的变动（例如一长串英文文本，并且中间无空格分隔的情况你要这列限定宽度，使得过长文字强制换行且不撑破表格，而往往结果是怎么也调整不到合适的宽度），这个时候在万般无奈之下，你可以使用table-layout:fixed。

常见而又生疏的几个table标签
thead、tfoot以及tbody
这三个标签是所谓xhtml的产物，主要是使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。个人认为其主要用途适用于超长表格的显示优化。
thead标签表示HTML表头
表格的头部thead，可以使用单独的样式定义表头，并且在打印时可以在分页的上部打印表头。
thead标签表示HTML页脚
表格的页脚tfoot，可以使用单独的样式定义页脚（脚注或表注），并且在打印时可以在分页的下部打印页脚。
tbody标签表示HTML表体
浏览器显示表格时，通常是完全下载表格后，再全部显示，所以当表格很长时，可以使用tbody分段显示。
注释：如果您使用 thead、tfoot以及tbody元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前就可呈现表头和页脚了。您必须在table元素内部使用这些标签，且thead内部必须拥有tr标签。所以书写更为标准的table方式即如下代码：

个人认为这个东西挺鸡肋，取之无用，弃之可惜。小项目可以增加些语义化，但因为曾经遇到过有多个不同表头在同一表格显示的窘境，限制了日后的开发，所以正式项目从可扩展的角度来说情慎用这些标签。

col和colgroup
这俩标签也是xhtml的产物，功能强大，兼容奇差。
col标签为表格中一个或多个列定义属性值。
colgroup标签用于对表格中的列进行组合，以便对其进行格式化。
它们的作用主要就是来控制单元格的宽度了，这样省去单独定义每个单元格的麻烦，过去我们往往是在第一行中的th或者td上定义宽度来规定每列的宽度，而col不但可以定义宽度还能同时定义其他的属性，例如可以通过col来控制几列宽度的总和，还可以控制这列的背景色。但理想是丰满的，现实是骨干的，正如前面所说，功能越大不代表其兼容性也越强，据现有的测试下来，col和colgroup能发挥作用还能保证兼容的应用就只有俩：width和background。对于width，个人宁愿使用常规方式，第一行设置宽度，保证列宽。对于bacground，一般实际中表格大面积使用不同背景的情况也很少见。故个人认为：能不用尽量不用。

何处用table
个人认为，在一个放置数据非常密集且又非常序列化的一个容器里，用table准没错。最常见的例子就是我们常见的购物订单结算页面，上面列有你订单详情：商品名称、单价、购买数量、金额小计、运费等等，最后最下方还会有一个最终订单金额的结果，table在这里可谓是如鱼得水，达到了数据之载体的神效。

table疑难杂症之换行
用table显示数据有时候会有一个头疼的地方，即不换行显示某段文字，尤其在表头th中用到地方最多。其实你所头疼的并非换行，而是其背后的浏览器兼容加性使得换行的困难程度大大增。
总体来说在table中换行个人比较推荐的方式为：先为table设定table-layout:fixed，基本上设定完这个属性后基本的换行问题都能够解决而不会出现table中td,th因为里面各个内容的多寡发生抢夺其他td,th宽度的情形发生。这时如果你依旧有强制换行问题，那么在此td中内部加一层div，再利用word-wrap:break-word; word-break:break-all;这俩个CSS方法可以解决换行的问题。

攻略强制换行与强制不换行
强制换行与强制不换行问题曾经一度困扰着我，每当遇到换行问题时候那就是痛苦回忆的开始，现在终于痛定思痛，一鼓作气把这个长期顽固问题给解决。
强制换行与强制不换行用到的属性
我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地：

word-wrap语法
word-wrap: normal(默认) | break-word
各个浏览器均能识别
参数：
normal: 允许内容顶开指定的容器边界。
break-word: 内容将在边界内换行。必要时会触发word-break（注意：请分辨清楚word-break和break-word这俩个是不同的东西，一为属性另为参数）。
说明：
word-wrap是控制是否“为词断行”的，设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
范例：
congratulation这个单词属于长串英文，word-wrap:break-word整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断，这就是对于长串文字不起作用的解释。word-wrap:normal是默认情况，英文单词不被拆开。
结论：
作用范围仅为div这类标准块级元素，th,td这类table元素虽然识别但是没有效果（如果为td,th加上宽度word-wrap在IE下是能够发挥效果的，但根据完全兼容性方便记忆角度上来说还是以前面的结论为准）。

word-break语法
word-break: normal(默认) | break-all | keep-all
参数：
normal: 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
break-all: 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
keep-all: 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
说明：
word-break:break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题（恰恰弥补了上面word-wrap:break-word对于长串文字不起作用的缺陷）。
范例：
继续以上面congratulation这个单词属于长串英文，word-break:break-all它会把单词截断，该行末端就会变成类似conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
word-break:keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
结论：
作用范围仅为div这类标准块级元素，th,td这类table元素虽然识别但是没有效果（经测试Chrome下word-break:break-all是有效果的，但根据完全兼容性方便记忆角度上来说还是以前面的结论为准）。Firefox,Opera是无法识别word-break的，更不用提Firefox下的th,td中使用word-break的效果了。

white-space语法
white-space: normal(默认) | pre | nowrap
参数：
normal: 默认。空白会被浏览器忽略。
pre: 空白会被浏览器保留。其行为方式类似HTML中的pre标签。
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。
说明：
对于pre属性，其实就是HTML中连续的多个空白符会被合并，然后为了不让他合并（最常用的场合就是表示代码文字缩进）让其中的空白符继续保留而不需要我们增加额外的样式和标签来控制它的缩进和换行。pre标签的原理也是一样的内部默认有了个white-space:pre。
对于nowrap属性，这个是强制不换行核心，一般强制不换行就是利用这个属性。Firefox的div和td中，以及IE的div中，均没有问题。唯一的瑕疵就是在IE的td中会有一个问题，如果td没有指定宽度，则nowrap仍然有效，如果td有宽度，并且文字中无标点、无空格（例如中文长串文字），nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。
 

总结强制换行：
如果在div这类标准块级元素中需要强制换行，最普遍的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺点就是会导致如果恰巧该行末端宽为一个长串英文单词，那么该单词会被撕开的尴尬样式(而且FF不识别word-break，反而不会撕开这个单词)。个人认为如果你这个div里面放的类似于URL这个长串地址，那么用此方案是非常不错的选择（注意：由于FF不识别word-break，所以无法保证每行末端会整齐的断开URL单词，但这也是无奈的选择）。如果不是放置URL这类可以断开的长串英文，而是英文句子的话，那么使用word-wrap:break-word;即可。至于网上看到有word-wrap:break-word; overflow:hidden;这么个写法，据说可以兼容IE和FF，但经过亲自测试似乎没有什么特别效果。

总结强制不换行：
强制不换行的问题到是比较容易分析的，就如上面所讨论的那样使用white-space:nowrap，Firefox的div和td中，以及IE的div中，均没有问题。唯一的瑕疵就是在IE的td中会有一个问题，如果td没有指定宽度，则nowrap仍然有效，如果td有宽度，并且文字中无标点、无空格（例如中文长串文字），nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。综合下来，比较稳妥的方式是在文字与td之间再套一层div，然后使用nowrap，那么就是强制不换行。注意这时候很有可能文字会过多导致溢出容器，所以你还得加一个overflow:hidden，防止溢出容器，这样子就可以兼容各个浏览器了。
总结了那么多，发觉似乎也就那几个属性在浏览器里面的各种兼容性的平衡，现在似乎尚未有一个完美的方案可以全部兼容各个浏览器，我们所能做的最多的就是尽可能的保持个浏览器显示一致。如果你还是觉得一定要兼容所有的浏览器，那么最后的方案那么就是动用JS了，以后的文章中我会考虑从以最小的JS代价来满足此要求，但这暂不在本文所讨论的范围内。

最新评论