在处处大谈语义化的今天，人们谈起table时心里大多都是很复杂的，一方面是因为使用table确实在布局上能给我们带来很大的方便，避免很多意外的情况和兼容性的问题；另一方面则是不太清楚什么时候该用table，什么时候不该用。下面我们就一起聊一聊关于table的事情二三。（如果有不对的或是不足的地方还请大家指出来和补充^_^）。
1. 什么时候使用table
在前一混乱的布局时代，人们为了方便布局而泛滥使用table，大约看中的大概是table的这两个好处：同行等高和宽度自动调节。而忽略了标签其自有的语义信息。当然，也不是说table是完全不好。当我们面对这样一些结构的数据时就可以使用table，如：一个计划、一组规则、一些属性的比较、球赛的比分、日历、财政的数据或员工信息等。所谓当用则用嘛。
2.Table-layout
它定义了如何布局一张表的行、列和单元格。
Value：auto，fixed
Auto：每列的宽度由其里面的内容决定；
Fixed：表格和列的宽度由table, col的宽度或者是第一行每个单元格的宽度决定。第一行之后每行里的单元格不会影响这一列的宽度。说明第一行每列的单元格宽度是起决定性作用的。
据说Fixed之后的表格布局加载会更快，因为每个列的宽度是固定了的了，而不会通过计算表格的内容来决定列的宽度。（还没有数据证实）。
但是，有可能其后单元格中的内容可能与其被设定的宽度并不符合，需要使用overflow来决定溢出的内容是否被clip掉。
2.1如何设定单元格宽度后，让其里面的内容不溢出？
(1)设定table为固定布局：
table-layout: fixed; width:100%;/* must have this set */
(2)设定每列的宽度，可用<col>或者设定class类的方式
(3)为tr，td进行如下样式设定
th td{
white-space: nowrap;(必须要有)
overflow: hidden(必须要有);
text-overflow:ellipsis;
}
2.2 Overflow和text-overflow都是不可被继承的
Text-overflow，可取的值有：
clip :不显示省略标记（…），而是简单的裁切
ellipsis :当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word :当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。
2.3 需要注意的问题
如果某行中的某个单元格中的内容为空，在套模板时，我们有时会通过判断后将整个<td>都不显示，那么就会出现第二幅图的情况，table的结构被打乱了。比较好的做法是，保留<td>结构，而让其内容为空就可以了。
3. table中常用的标签
大多数的标签大家都比较熟悉，其中有几个是值得注意的：
(1) tfoot。
我们基本较少使用，该标签书写的顺序不是在tbody之后，而是在thead和tbody之间，但却是在呈现在表格的底部，像下面这样，
它的使用场景是，通过重复表头的内容使得，在一个内容很长的表，也容易让人们看到每一列对应的标题是什么。
(2) col,colgroup
这两个标签一般是配合使用的,<colgroup><col></col>…..</colgroup>,即使源码里不用colgroup包裹col，页面加载的时候也会被自动包裹上。这个主要是通<col>影响第一行，而第一行又会影响表格其他的行。
有时我们需要保持表格每一列的样式基本统一，就可以将共同的样式都放在对应的col上，而不用给th，td加上相同的类名，这样不仅语义上更好，代码结构上也会更清晰。
4.常用到的css属性
可取的值separated(默认的)，Collapsed
Collapsed：这种模式下，合并边框；如果左右两个单元格边框都有颜色，则上面单元格的下边框压了下面单元格的上边框，左面压了右面的。
*只有在sepatrated模式下border-spacing才有用。可用来设定垂直与水平之间不同的间隔。
当然了，你必须要显示的设置th或者td的border,如border:1px solid black;这样才会看到边框线的出现。再给table设置border-spacing: 2px 5px;，就可以看到如下的效果了
5.不怎么常用但有时很有用的标签属性
(1) *span(这个有时会用到)。主要是合并单元格时有用途。
(2) scope
Headers和scope都是主要是起到一个关联的作用，对屏幕阅读器用途较大。
由于不会在普通浏览器中产生任何视觉效果，很难判断浏览器是否支持 headers 属性。
6.如何将任何元素变成与table有关的布局？
可以通过对元素的display进行设置。
这里没有display:table-th，是因为th仅仅是语义上的作用，其根本表现与td是一样的。
* Display:table-cell;（ie8+）
(1)大小不固定元素的垂直居中布局（还有多行文本垂直居中）
(2)左固定右自适应布局：左边float右边table-cell
7. 小tips(待补充)
(1)对整个table设定text-align：left；
Chrome下thead和tbody都会有效；
Ie下th依然是居中对齐，td有效.
啰啰嗦嗦的说了这么多，目前本人感觉第2.1,3.2以及第4点最有用的，其余的了解就好。关于第6点，若是能更深入的了解，可能还可以更方便的做很多事。了解了Table的基本用法后再结合js就可以做出很多很酷炫的效果了~
参考文章：
http://css-tricks.com/complete-guide-table-element/#not-use
http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp
http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout