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

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

1. <table border="0" cellspacing="0" cellpadding="0" width="100%">  
2.   <tr>  
3.     <th>Month</th>  
4.     <th>Date</th>  
5.   </tr>  
6.   <tr>  
7.     <td>AUG</td>  
8.     <td>18</td>  
9.   </tr>  
10. </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方式即如下代码：

1. <table border="0" cellspacing="0" cellpadding="0" width="100%">  
2.   <thead>  
3.     <tr>  
4.       <th>Month</th>  
5.       <th>Date</th>  
6.     </tr>  
7.   </thead>  
8.   <tfoot>  
9.     <tr>  
10.       <th>M