HTML&CSS Table元素详细解说

1.预热

css样式多如牛毛，我不可能一个一个去讲，那样好像背字典一样，我相信你们也不喜欢这样的方式。所以，我会在实战中慢慢和你讲解，然后，你记住一些重要的css属性就可以了。关键是，你要学会去查资料，最好的查资料方法，不是那种去W3C School上，一页一页看过去，那样的话不知道要看到什么时候，而是应该去看一些网页的源码，看看他们的网页是怎么做起来的，用了哪些css属性？这里面，肯定有很多css属性你连见都没见过，我的建议是，先大概去猜一下，然后用浏览器的F12调试功能去倒腾倒腾。不需要你对每一个css属性都了如指掌，你只要大概理解意思，然后掌握一些基本的css属性就可以了。普通的网页能自己画出来，复杂的网页能从别的地方拷贝过来，并且看懂，就可以了。

那么今天呢，我带大家用table来做一个简单的demo，通过一个具体的例子，来看一下table怎么用？首先，打开Eclipse，新建一个HTML页面。

1489021441090048056.png

首先，我们要在body区域弄出个空间来，专门存放这个table。之前我们都是直接在body上面弄的，而事实上，在实际开发中是不会这么做的。好的，我们来一个div元素，加一个class叫做wrap，wrap表示包裹，我们需要一个div来包裹table。

接着，在head元素上挂载一个style元素，专门用来设置样式表。接着，给wrap设置一点点样式。

效果：

如何让这个div元素居中呢？是不是只要让它左右两边的margin自适应就OK了呀？OK，我们加上：

哇，是不是有了，太棒了。现在我做一个事情，看好，我把wrap变成span元素，会怎样？

看效果哈：

卧槽，画风突变，这是什么情况？对了，span是什么元素啊，是不是行内元素啊。我们给一个行内元素设置宽度和高度是没有效果的。所以就变成了这样，那么，怎么办呢，我们需要把span强制转换成块级元素，是不是就好了呀？

效果：

2.编写工具类样式文件 tool.css

在刚才的例子中，我们把一个div元素或者span元素都相对于父元素居中显示了，我现在请问一下大家，在实际开发中，让一个元素相对于父元素居中显示，这样的需求是不是很常见呀？

那有没有什么办法，让我们下次再遇到这个需求的时候，直接用起来就行了呢？答案肯定是有的，我们可以封装一个通用的工具类，然后把一些经常要用到的样式放进去，就OK了。现在我们来编写一个tool.css工具类。

1489026181387098368.png

引入这个css：

然后，在span元素上绑定对应的class：

这样就OK啦。

3.终于开始画table了

现在，我们开始画一个table，比如来一个一行三列的table：

为了看出效果，我们需要另外给这个table元素，tr和td元素设置样式：

刷新页面：

就这样，一个简单的table就画好咯~

4.合并单元格

既然学table，肯定会遇到一个问题，那就是怎样合并单元格呢？

比如，我希望在第二列和第三列下面增加一行，怎么办？很简单，我只需要在后面再写一个tr，里面有两个td：

这个tr希望和它平级：

可惜效果不对，这一行被挤下来了，原因很简单，因为第一列没有占据两行，所以如果我们硬是在后面添加一行，就会被挤下来。解决方法，是在第一列的td元素上，绑定一个rowspan属性，设置为2：

1489026700715061544.png

这样就可以了吧，这就是所谓的行合并，那么怎样列合并呢？

如图，我在</tr>下面重新写了一个tr，这表示重起一行，然后，挂载一个td元素，并且绑定colspan属性，这个属性的含义就是列合并。

各位，再看一下之前的这个例子，是不是一共有三列啊，那么我就colspan=3，表示合并三列，效果：

还有个问题，这个table没有默认占满父容器，那么我就得手动设置它的width为100%：

1489027220387037348.png

这样是不是就好了呀？

5.画一张请假单？

接下来我们加快一点进度，来做一个请假单吧。我们把颜色调成黑色。

再添几行：

把文字填进去：

最后是班主任审批：

效果：

这样就有一个问题，对于领导批示，宽度应该比较窄才会比较好看，可是现在的话明显太宽了，有没有什么办法呢？第一个想到的，肯定是给它设置宽度：

刷新页面,无效，这又是什么原因呢？原来，现在我们每一行是三列，第一列就只能这么宽，除非我们给它多加一列。

这表示给第一行第一列设置列合并为2，那么每一行就有了4列。一共有几列是以第一行为准的。这样一来，下面这几个地方也要跟着改：

最后，手动调一个高度出来：

接着，就好像撘房子一样，房子搭好了，就可以把一些辅助工具撤销掉了，比如border。