扒拉扒拉table

现如今，table被我们中的绝大多数所厌弃，都啥年代了...年代归年代啦，table在特定的时候还是有用的，毕竟W3C标准没有废之。

说到table的不好，大家肯定一口气说出好几个，但是我们先来说说哪些情况用table甚至是必须

1、展示多数据列表

如今table的本义应当用作数据列表的地方，对于一些数据处理用table显得更加有序和语义。

2、EDM制作

EDM，table差不多就是必须的（你别告诉楼主你的EDM直接是一张图片）如果想做响应式的EDM可以找我要代码。

说完了table的可用之处就到了它的缺点了，当小伙伴们迭代一个老项目发现全是table布局的时候，想死的心都有了

缺点：

1、页面的渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染，再发散一下，因为表格最后一个单元格的内容过宽而导致纵列大小完全改变，这些小的变化将导致表格(table)中的所有其他节点回流（reflow）。

2、由于缺乏语义化，不利于SEO，屏幕朗读软件和盲文浏览器也无法很好地理解 table 中的内容，对视障用户就缺乏了友好性。

3、table嵌套太多，代码的开销一般都比较大，后期维护也是个大问题。

 

兼容性：

当然它也有个不是好处的好处，兼容性好，但如果你的基础比较好，不用table布局也能写出兼容性良好的代码。

其实table中也是有兼容性问题的，比如它的border-spacing，在table中边框是分离模式下（border-collapse: separate），设置border-spacing，该特性表示 TD 边框之间的距离，如果只设置一个长度值，则表示水平和垂直方向的空间。如果设置两个长度值，第一个值是水平方向的空间，第二个是垂直方向的空间。长度值不能是负值，但是此属性不支持IE6、7和8(Q)，此时我们就需要用到cellspacing，若水平和垂直方向的空间相等，可以用 table的 cellspacing （已被废弃但可用）属性代替 border-spacing 特性。

 

table中还有个需要注意的是table-layout属性：

取值fixed为固定表格布局：允许浏览器更快地对表格进行布局，表格的水平布局不依赖于单元格的内容，而只依赖于表格的宽度，列的宽度以及边框或单元格的间隔。使用固定布局算法，用户端在下载完第一行后就可以开始表格布局，后续行的单元格不影响列宽。

取值auto为自动表格布局：默认值，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

所以在不需要auto的情况下尽量还是取值fixed，为了更快嘛！

 

随着HTML和CSS的快速发展，也许没多久table真的要和大家说再见了，但掌握它也没啥坏处，书到用时方恨少吗，文中没有详细讲table包括的标签和众多属性，不过可以移步http://yujiangshui.com/about-table/最后还是欢迎吐槽。。。