前端html小课堂—table详解

今天分享下”前端html小课堂—table详解“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 table即使到了Web2.0，也曾在网页开发中占据举重若轻的地位eb2.我们仍然可以看到它的布局。然而，技术是不断进步的Div+Css组合终究敲开了旧布局的大门，刮起了新一轮的布局浪潮。然后是新仇旧恨，很多都是对的able有意见或没有意见的人也开始对table批评-臃肿的代码、无语义标签、复杂的写作方法等。table在创建之初，它不是用于布局，而是显示数据。放弃table布局，不要放弃table本身。用什么来救你，我的table。

何为table：

table者Html表格也是数据的载体。

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

复制代码

代码如下:

<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元素以及一个或多个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疑难杂症换行

用table有时候显示数据会有一个头疼的地方，就是不换行显示某段文字，尤其是表头th使用最多的地方。事实上，你头疼的不是换行，而是浏览器背后的兼容性，这大大增加了换行的难度。在这里，您可以查看本文启发的攻略强制换行和强制不换行。本文详细讨论了不同情况下攻略换行的方法。

总的来说，在table个人推荐的中换行方式是:先为table设定table-layout:fixed基本上，在设置了这个属性后，可以解决基本的换行问题，而不会出现table中td,th因为里面有多少内容抢其他td,th宽度的情况发生了。候，如果你还有强制换行的问题，那就在这里d在中间加一层div，再利用word-wrap:break-word; word-break:break-all;这俩个CSS方法可以解决换行问题。

几个常见而陌生的table标签

thead、tfoot以及tbody

这三个标签是所谓xhtml产品主要是让你有能力分组表中的行。当你创建一个表格时，你可能想要一个标题线，一些数据线，以及底部的总线。这一划分使浏览器能够支持独立于表格标题和页脚的表格文本滚动。当长表打印时，表的表头和页脚可以打印在包含表数据的每个页面上。就我个人而言，我认为它的主要用途适用于超长表的显示优化。

thead标签表示HTML头部t表格head，表头可以用单独的样式定义，表头可以在分页的上部打印。

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

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

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

复制代码

代码如下:

<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>

<p> http://www.qlyl1688.com </p>

</tr>

</tfoot>

<tbody>

<tr>

<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，使用table。希望这篇文章能稍让您更加了解table。谢谢。如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！