代码教程——第九章 来吧，表哥（表格）！

可惜我不是表妹……

不搞笑了，表格这一章其实很简单，只是很热闹，不过好在现在我也不怎么用表格，大家看懂就好，当然要是做淘宝的朋友们，我还是建议你认真学习一下，毕竟在淘宝上表格用的还是很多的（用作布局）。

是的，用表格可以布局的，或者说排版，随你怎么叫，反正都是一回事，不过现在几乎被淘汰了，大家都用 DIV + CSS 布局去了，有人说你这个叫法不科学！反正科学不科学的我不是很清楚，我就知道现在招聘前端都煞有介事的写上：熟练掌握 DIV + CSS 布局；熟练掌握 Dreamweaver …… 说得好像我们这些不用 Dreamweaver 的多么山寨，多么不专业似的。

不吐槽那些应该吐槽的了，然后强调一下：写代码一定要把代码缩进写整齐！！！重要的事情三个感叹号哦～然后让大家理解一下什么是清晰的代码缩进，下面代码中我把每一个 tab 缩进换成一个波折号：

看，这样各个标签间的包含关系和层次是不是一目了然了？这个一定要理解，也要做到；这个习惯是对于任何阅读你代码的人的起码的尊重，乱成一团麻的代码没人爱看，而且你自己阅读起来也很吃力。最后用当初我的老师的一句话来结束这个话题：

代码没有清晰缩进的作业别给我看，我看不懂！

好了，开始我们今天的话题，表格，刚才为什么要强调缩进呢？因为表格的标签层次比较多，要是不清晰缩进的话，一个表格没写完你就哭昏在加班的午夜了。

首先，表格的标签是 <table></table>，但是这还不够，我们还要知道行的标签是 <tr></tr>，和单元格的标签是 <td></td>。然后怎么把他们合理的放在一起呢？——按着大小个嵌套：

效果如下：

第一行第一列	第一行第二列	第一行第三列
第二行第一列	第二行第二列	第二行第三列

需要解释的有两点：第一、border 这个属性是指边框的粗细，我设置了 1 ，这样就能看到边框了，因为默认是 0 ，那样就不容易看懂效果了。第二、每一行中的单元格数量是相同的，合并单元格的效果在下面讲；

单元格有两个跨越属性：colspan（跨列）、rowspan（跨行），是指当前单元格占用几列，或者占用几行，我们来举例：

这个单元格要占两列的位置，效果如下：

第一行第一列		第一行第二列
第二行第一列	第二行第二列	第二行第三列

然后再看跨行：

第一个单元格要占用两行，所以效果如下：

第一行第一列	第一行第二列	第一行第三列
	第二行第一列	第二行第二列

好复杂是不是？我也这么觉得，所以一般我都是用可视化编辑器（比如 Dreamweaver）来生成表格，极少自己手写，上边几个属性也是现查了抄过来的。大家看看做个了解，将来看到能看懂就很好了。

当然很多做淘宝的朋友会问了，虽然说看懂就行，但是我还常见到一个标签你没说啊——<tbody></tbody>

这里也说一下仅作了解：其实有三个标签<thead></thead> 这是表头，诶，这你听懂了，那么下面就好理解了，<tbody></tbody> 是表格的主体，那么 <tfoot></tfoot>就是表格的注脚（我也不知道怎么取名字，知道我什么意思就好）他们的嵌套顺序是酱紫的：

有的时候我在想，我为什么要讲表格？后来想想，淘宝设计师还是用的到的，那么只好咬牙坚持了。讲表格要做噩梦的，求安慰啊～～