table的那些事儿（html学习）

我们写网页时前台避免不了用到table。作为一个web开发者，毕竟不是专业的前端，很多基础知识在慢慢的实际开发路程中才有所了解。
今天就来说说HTML中table的那些事儿。

在html中我们经常用到table，但是table的默认边框样式往往都不是我们想要的，我们想要的都是默认很细的那种，就如下面的

以前我的做法总是给table进行如下设置

border="0" cellpadding="0" cellspacing="0"

然后使用css 给table 左边和上边设置1px的边框，给th和td设置右边和下边各1px得边框。看起来似乎挺完美的。后来查阅一些资料的时候发现不推荐这样的做法了。查了查css手册，发现了这么一个属性。

border-collapse:separate|collapse

它有两个值分别是：separate和collapse

其中 separate 是浏览器的默认取值，表示表格中每个cell以及最外层table的边框独立，也就是我们在浏览器中不写任何css看到的table效果。而collapse则表示合并相邻的两边的边框。
知道这个属性之后我们可以给最外层的table加上border-collapse:collapse; 然后直接给table和 里面的tr td 统一设置全边框即可，而无需担心两边的边框合并到一起的时候变粗的问题。同时也不用再给table设置 border="0" cellpadding="0" cellspacing="0" 这样的属性了。

再来谈谈另外一个与table相关的css属性

display:table|table-row|table-cell;

相信很多人都用过display属性，但是估计绝大多数人和我一样只用过block、inline、none甚至是inline-block这样的常用的属性。
无意间翻CSS手册发现了display的这么一个属性。兼容性方面display的table系列属性支持IE8+，万恶的IE6、7相信大家都不会再考虑了。
那么display:table有什么用？！display:table，可以将你的div变成table的样式。具有table的特性。table有啥特性呢，当设置table最外层的宽度后内层的每个单元格会自动拉伸填满整个table，利用这个特性我们可以做一些意想不到的效果。
比如做手机HTML5的页面的时候我们经常遇到需要设置一个顶部导航或者底部按钮组之类的，而这类导航按钮组都是要求左边或者右边或者左右两边有一个固定宽度的按钮，中间任意填充，这时候我们就可以使用div太嵌套，最外层套一层div，中间套三个div，其中中间的第一个和最后一个div固定宽度，那么中间剩下的一个div就会自动铺满整个容器。

然后css样式如下

#header{display:table;width:100%;height:40px;text-align:center;}
#header > div{display:table-cell;height:40px;}
#header .btn{width:40px;}

如果不使用table的方法来做以前我们都会使用定位来做这个了，我以前的做法如下

#header{position:relative;width:100%;height:40px;text-align:center;box-sizing:border-box;padding:0 40px;}
#header .title{width:100%;height:40px;}
#header .btn{width:40px;position:absolute;top:0px;}
#header .prev{left:0px;}
#header .next{right:0px;}

两种思路两种不同的方法，都可以满足这样的需求，但是要注意的是，第二种需要将容器设置成为box-sizing:border-box;这样内填充才不会影响宽度导致宽度溢出页面出现横向滚动条。
不是专业前端，可能方法不是很可取很科学，以上只是本人针对table相关做的一个原创笔记整理，如果错误和不足欢迎指正。