熟悉而又陌生的table

在处处大谈语义化的今天，人们谈起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)设定每列的宽度，可用或者设定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 需要注意的问题如果某行中的某个单元格中的内容为空，在套模板时，我们有时会通过判断后将整个都不显示，那么就会出现第二幅图的情况，table的结构被打乱了。比较好的做法是，保留结构，而让其内容为空就可以了。

3. table中常用的标签

大多数的标签大家都比较熟悉，其中有几个是值得注意的：

(1) tfoot。我们基本较少使用，该标签书写的顺序不是在tbody之后，而是在thead和tbody之间，但却是在呈现在表格的底部，像下面这样，

它的使用场景是，通过重复表头的内容使得，在一个内容很长的表，也容易让人们看到每一列对应的标题是什么。

(2) col,colgroup 这两个标签一般是配合使用的,…..,即使源码里不用colgroup包裹col，页面加载的时候也会被自动包裹上。这个主要是通影响第一行，而第一行又会影响表格其他的行。有时我们需要保持表格每一列的样式基本统一，就可以将共同的样式都放在对应的col上，而不用给th，td加上相同的类名，这样不仅语义上更好，代码结构上也会更清晰。

4.常用到的css属性

(1)border-collapse 可取的值separated(默认的)，Collapsed Separated：每个单元格之间都是分开的，之间的距离由border-spacing来决定。 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