前端html小技巧—table表标签与换行解析

今天分享下”前端html小技巧—table表标签与换行解析“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 何为table：table者Html表格也是数据的载体。

以下是一个比较标准的table代码写法：

XML/HTML Code复制内容到剪贴板

<table border="0" cellspacing="0" cellpadding="0" width="100%">  
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>AUG</td>
<td>18</td>
</tr>
</table>

简单的HTML表格由table一个或多个t元素r、th或td元素组成。tr元素定义表行，th元素定义表头的单元格，td元素定义表单元格。border表格边框的宽度框的宽度，cellpadding规定单元边缘与内容之间的空白，cellspacing我们通常手动将这三个属性设置为0，以避免浏览器差异。width由于t，属性规定了表格的宽度able宽度随内部元素的宽度而变化，通常我们希望table它和外部容器一样宽，所以默认设置100%宽度使容器满。

必须说的是，ttable-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标签表示HTMLt头表头表头的头部thead，表头可以用单独的样式定义，表头可以在分页的上部打印。

thead标签表示HTML页脚tfoot页脚(脚注或表注)可以单独定义，页脚可以在分页的下部打印。

tbody标签表示HTML当表体浏览器显示表格时，它通常在完全下载表格后显示，所以当表格很长时间时，可以使用tbody分段显示。

注：如果您使用注： thead、tfoot以及tbody你必须使用所有元素。它们的出现顺序是:thead、tfoot、tbody这样，浏览器就可以在收到所有数据之前显示表头和页脚。您必须在table这些标签用于元素内部，thead内部必须有ttr标签。所以写更标准的table方法如下：

XML/HTML Code复制内容到剪贴板

<table border="0" cellspacing="0" cellpadding="0" width="100%">  
<thead>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Month Lists</th>
<th>Date Lists</th>
</tr>
</tfoot>
<tbody>
<tr> http://www.qlyl1688.com
<td>AUG</td>
<td>18</td>
</tr>
</tbody>
</table>

就我个人而言，我认为这件事很无用，很遗憾被抛弃了。小项目可以增加一些语义化，但由于同一表中显示多个不同表的困境，限制了未来的发展，官方项目从可扩展的角度谨慎使用这些标签。

col和colgroup这两个标签也是xhtml功能强大，兼容奇差的产品。

col在表格中列出一个或多个属性值。

colgroup标签用于组合表格中的列，以便格式化。

它们的主要功能是控制单元格的宽度，从而省去单独定义每个单元格的麻烦。在过去，我们经常在第一行th或者td上定义宽度来规定每列的宽度，而col它不仅可以定义宽度，还可以定义其他属性，如col控制几列宽度的总和和和背景色。但理想是丰满的，现实是骨干。正如前面所说，功能越大，兼容性就越强。根据现有的测试，col和colgroup只有两种应用可以发挥作用，保证兼容性：width和background。对于width，个人宁愿使用常规方法，在第一行设置宽度，以确保列宽。acground，在实践中，大面积使用不同背景的表格也很少见。也很少见。所以我个人认为尽量不使用它。

何处用table个人认为，在一个数据密集、序列化的容器中使用table是的。最常见的例子是我们常见的购物订单结算页面，上面列出了您的订单细节：商品名称、单价、购买数量、金额计算、运费等，最后底部会有最终订单金额的结果，table这里可谓如鱼得水，达到了数据载体的神效。

table疑难杂症换行Table有时候显示数据会有一个头疼的地方，就是不换行显示某段文字，尤其是表头th最常用的地方。其实你头疼的不是换行，而是浏览器背后的兼容性，大大增加了换行的难度。

总的来说，t是table个人推荐的中换行方式有:table设定table-layout:fixed基本上，设置此属性后，可以解决基本的换行问题，而不会出现table中td,th因为有多少内容抢劫了其他td,th宽度发生了。这个时候，如果你还有强制换行的问题，那就在这里td内部增加一层ddiv，再利用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(注:请区分wword-break和break-word这两种东西是不同的，一种是属性，另一种是参数)。

说明：

word-wrap控制是否为单词断开，设置或检索当前行是否超过指定容器的边界。汉语没有问题，英语句子也没有问题。但它对长英语没有影响。

范例：

congratulation这个词属于长串英语，word-wrap:break-word整个单词被视为一个整体。如果银行的末端宽度不足以显示整个单词，它将自动将整个单词放在下一行，而不是切断单词。这是对长串单词无效的解释。word-wrap:normal默认情况下，英语单词不会被拆开。

结论：

作用范围仅为div这类标准块级元素，th,td这类table虽然识别元素，但没有效果(如果是t)d,th加上宽度word-wrap在IE它可以发挥作用，但从完全兼容性和方便记忆的角度来看，以上结论为准）。

word-break语法word-break: normal(默认) | break-all | keep-all

参数：

normal: 根据亚洲语言和非亚洲语言的文本规则，允许在单词中改变职业。

break-all: 这种行为和亚洲语言的normal同样。非亚洲语言文本行的任何单词也可以中断。该值适用于含有一些非亚洲文本的亚洲文本。

keep-all: n与所有非亚洲语言ormal同样的。汉语、韩语、日语，不允许文字断开。非亚洲文本适用于少量亚洲文本。

说明：

word-break:break-all，断开单词。当单词到达边界时，下一个字母会自动到达下一行。主要解决了长串英语的问题(只是弥补了上面的word-wrap:break-word对长串文字无效的缺陷)。

范例：

继续上述c继续上述上述c继续上述上述C继续上述C继续上述上述C继续上述C继续上述C继续上述C继续上述上述C继续上述C继续上述上述C继续上述上述C继续上述上述C继续上述上述C继续上述上述C继续上述上述C继续上述上述C继续上述上述上述C继续上述上述上述C继续上述上述上述C继续上述上述上述上述C继续上述上述C继续上述上述C继续上述继续上述继续上述上述继续上述继续上述上述继续上述上述继续上述继续上述上述继续上述上述继续上述继续上述上述上述上述上述上述继续上述上述上述上述上述上述继续上述继续上述上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述继续上述上述继续上述继续上述继续上述上ongratulation这个词属于长串英语，word-break:break-all它会切断单词，银行末端会变成类似conra(congratulation前端部分)，下一行为tulation（conguatulation)后端部分。

word-break:keep-all，是指Chinese, Japanese, and Korean连续词。也就是说，只有在这个时候，没有word-wrap，中文不会改行。(英语句子正常。

结论：

作用范围仅为div这类标准块级元素，th,td这类table虽然识别元素，但没有效果(C测试后hrome下word-break:break-all它是有效的，但从完全兼容性和方便记忆的角度来看，以上结论为准）。Firefox,Opera无法识别w是否无法识别w是否无法识别w是否无法识别w是否识别w是否识别w是否识别w是否识别w是否识别w是否识别w是否识别w是否识别w是否识别w是否识别w是否识别w是否识别w是w是否识别w是否识别ww是否识别w是否识别w是否识别ww是否识别w是w是否识别w是w是否识别w是ww是否识别w是ww是否识别w是w是否识别w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是ww是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是w是word-break更不用说F了irefox下的th,td中使用word-break的效果了。

white-space语法white-space: normal(默认) | pre | nowrap

参数：

normal: 默许。浏览器会忽略空白。

pre: 浏览器将保留空白。其行为与H相似TML中的pre标签。

nowrap: 文本不会改变，文本会继续在同一行，直到遇到br标签为止。

说明：

对于pre属性实际上是HTML多个连续空白符合并，然后继续保留空白符，以防止其合并（最常用的场合是代码文本缩进），而无需添加额外的样式和标签来控制其缩进和替换。pre标签的原理是一样的。默认情况下，内部有white-space:pre。

对于nowrap属性，这是强制不换行的核心，一般强制不换行就是利用这个属性。Firefox的div和td中，以及IE的div没有问题。唯一的缺陷是IE的td如果t，会有问题d没有指定宽度的，nowrap如果t仍然有效，如果t仍然有效d有宽度，文字中没有标点和空间(如中文长串文字)，nowrap不再有效。解决方案是添加word-break:keep-all;这个问题可以解决。

总结强制换行:如果在div这类标准块级元素需要强制换行，最常见的方案是word-wrap:break-word; word-break:break-all;这种方法的缺点是，如果行末端的宽度恰好是一个长串英语单词，那么这个单词就会被撕开(FF不识别word-break，但不会撕开这个词)。我个人认为如果你是d。iv里面类似于URL这个长串地址，所以使用这个方案是一个很好的选择(注:因为FF不识别word-break因此，无法保证每行末端整齐地断开URL单词，但这也是一个无助的选择)。如果不放URL这种可以断开的长串英语，如果是英文句子，那就用word-wrap:break-word;就可以了。至于网上看到的w。ord-wrap:break-word; overflow:hidden;据说这种写法可以与I兼容E和FF但亲自测试似乎没有特殊效果。

总结强制不换行:强制不换行的问题比较容易分析，就像上面讨论的那样使用white-space:nowrap，Firefox的div和td中，以及IE的div没有问题。唯一的缺陷是IE的td如果t，会有问题d没有指定宽度的，nowrap如果t仍然有效，如果t仍然有效d有宽度，文字中没有标点和空间(如中文长串文字)，nowrap不再有效。解决方案是添加word-break:keep-all;这个问题可以解决。综上所述，更安全的方法是文字和td之间再套一层ddiv然后使用n，然后使用nowrap，那就是强制不换行。注意这个时候文字太多可能会导致容器溢出，所以你要加overflow:hidden，防止溢出容器，这可以与每个浏览器兼容。

总结了这么多，我发现浏览器中的各种兼容性似乎只有这些属性的平衡。似乎没有一个完美的解决方案可以与每个浏览器兼容。我们能做的最多的就是尽可能保持浏览器的一致性。如果你仍然认为你必须与所有浏览器兼容，最终的解决方案是使用JS在以后的文章中，我会考虑最小的JS成本来满足这一要求，但这暂时不在本文讨论的范围内。以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！