上节课，使用table做出了一个最基本的表格，学会了设置表格的属性，调整宽度和边框。

这节课，来学习如何更多table的用法，以及使用table来对页面进行版面布局的方法。

上节课的课后练习

1.表格当中增加4行内容：Windows 20年，Linux 10年，Oracle 10年，MySQL 12年。

修改html文件，复制粘贴4行，然后修改里面的文字内容：

刷新页面：

2.表格增加一列，放在第一列，列里面的内容分别是：1-6行：编程语言，7-8行：操作系统，9-10行：数据库。

修改html代码，在table里面的每一个<tr>后面增加内容：<td class="td1">编程语言</td>，7-10行修改文字内容，如下图：

刷新页面看看：

纵向合并td

通过新增td可以在表格中增加列。这里感觉有点不好的地方，就是1-6行都是编程语言，有点重复，是否可以合并为一个格子呢？

可以使用rowspan属性来将td进行纵向合并。

修改html代码如下，在需要向下合并的td里面设置属性rowspan=行数：

刷新页面：

可以看到，rowspan可以告诉td向下合并几行，同时注意下面的几行都不要再写这一列被合并掉的td了，否则会多出来td的。

大家可以尝试，不删除某一行的<td class="td1">编程语言</td>语句看看是什么样的效果。

td中的文字内容居中

表格的td中的文字内容默认是靠左对齐的，如果要让表格中的第一列文字希望水平居中显示，可以使用CSS属性text-align: center;来实现，修改css里面的样式td1和td2：

刷新页面看看：

很多标签元素都可以使用属性text-align来实现文字水平居中显示。

可以使用text-align: left; 来让文字靠左对齐；还可以使用text-align: right; 来让文字靠右对齐。

横向合并td

既然可以纵向合并td，那么肯定也可以进行横向合并td，就是将同一行的2列的td合并为一个td。

可以使用td属性colspan=列数来实现横向合并td。

在html代码的table里面最后一行下面新增一行内容：其它，J2ME游戏开发若干年。

将第2列和第3列合并为一个td。

修改html文件：

刷新页面：

可以看到，2列的td被合并在一起了。

改成2行2列表格来对页面排版

使用div标签元素来对页面进行排版，有一个不足之处，那就是div结束的地方会自动进行换行。

如果要将两个div并排显示在同一个水平线上就有些不太方便。

可以通过修改div为相对父元素定位改变为浮动绝对位置定位的方式来实现，但是这种方式同样也存在一些局限性，它需要对div的层次关系非常清楚，并且不方便根据不同浏览器的宽度进行相对的设置。

通过用table表格标签来进行布局，在td当中嵌套div的方法，是一个有效的完成页面布局排版的方式。

例如，来将上面个人简介网页当中的“工作经历”和“工作经验（部分）”这2大块设置为同一行的并排两大块。

首先，在“工作经验”这个div之前插入表格的5行代码：

<table><tr><td class="td3">

</td><td class="td4">

</td></tr><tr><td class="td3">

</td><td class="td4">

</td></tr></table>

然后，将“工作经历”的标题部分代码剪切粘贴到第1个td当中；

将“工作经验（部分）”的标题部分代码剪切粘贴到第2个td当中；

将“工作经历”的详细内容部分代码剪切粘贴到第3个td当中；

将“工作经验（部分）”的详细内容部分代码剪切粘贴到第4个td当中；

html修改后代码如下：

然后修改css文件，增加td3和td4的属性设置，设置宽度各为50%，内边距为0px。

css修改后代码如下：

刷新页面：

发现几个问题：

第1个是div的边框是跟随着div的内容的，内容多，边框上下高度就大，内容少，则边框上下高度就小，这样看起来就是不对齐的。

由于div里面的内容是变化的，不固定的，因此不能采用div的边框，而要改成td的边框来设置，因为td的边框总是对齐的。

第2个是td当中的div内容是默认垂直居中的，要修改为靠上对齐；

第3个是由于前面定义了针对table标签元素的通用属性，有右边框和下边框，因此这里也用到了table标签，所以这个table也被设置了右边框和下边框，要把这里的table边框属性去掉。

下面先来解决div边框变为td边框的问题：

首先，修改css文件，复制一个moresmallcontent样式，然后样式名字变为moresmallcontent2，把里面的border设置为0px;

然后，修改td3的边框，增加一个border属性和之前div的边框属性值一样，然后增加一个特殊的border-right属性，颜色值不一样；

然后，修改td4的边框，增加一个border属性和之前div的边框属性值一样，然后增加一个特殊的border-left属性，为0px；

css修改后代码如下：

html将原来的moresmallcontent样式名字修改为moresmallcontent2。

html修改后代码如下：

刷新页面：

设置元素内的内容垂直方向对齐

上面的效果图可以看到右侧的内容比较少，由于td针对元素内部的内容，默认是垂直居中显示的，这里修改为垂直靠上比较好看。

修改css文件，在td3和td4里面增加一行vertical-align:top;

修改后的css代码如下：

刷新页面：

可以看到右侧的内容也是靠上对齐了，这样如果继续往下面增加更多内容的话，就不会影响到页面的排版了。

还可以使用属性值middle和bottom来设置垂直居中和垂直靠下的对齐方式。

针对某个特定元素的id设置样式

前面定义了针对table标签元素的通用属性，有右边框和下边框，因此这里也用到了table标签，所以这个table也被设置了右边框和下边框，要把这里的table边框属性去掉。

前面讲过可以通过class="样式名"的方式给某个特定元素设置指定的样式，其实还有另外一种方式可以针对某个特定元素设置样式。

每个标签元素可以设置一个属性id="页面中唯一id值"，来给每一个标签元素赋予一个独一无二的名字，这就是id属性的功能。

给元素设置好id属性之后，就可以在css文件中通过设置样式 #id 的方式来给这个特定的元素设置样式值。

修改html文件来给刚才的table增加一个id。

html修改后的代码如下：

修改css文件来给这个id赋予样式值。

css修改后的代码如下：

刷新页面：

可以看到，表格的右边框和下边框不见了，并且通过增加border-collapse:collapse;来让td之间的边框合并为一个单一的边框，让当中的竖线开起来比较舒服。

标签元素嵌套继承关系和顺序关系

总结一下，标签元素之间比较重要的嵌套的层次关系。

A标签元素被包含在B标签元素当中。那么B就是A的父元素，A就是B的子元素。父子关系一定不能搞错。

因为元素嵌套关系中，父元素的属性会影响到子元素，除非子元素自定重新定义。

这个知识点，前面有讲过，这里这是再次提醒。

另外，CSS样式里面还有一个顺序关系要注意。

就是针对同一个标签元素的同样的样式定义，以最后一个样式的值为准。

例如前面的样式：

border: solid 1px #303030;

border-right: solid 1px #b2b2b2;

这2行，是针对td的边框进行设置。

先设置4个边框的样式都是 solid 1px #303030;样式值，这里面就包含了border-right，然后再下面一行再设置border-right，样式值就以后面一个值为准，前面的设置的值就被替换掉了。

课后练习

1.去网上搜索2个自己喜欢的图片，1个图片用来作为整个网页的背景，另一个图片可以进行重叠组成网页的背景。

2.给技术经验的表格增加一个表头，标题分别是：技术类别，技术点，经验年数。文字加粗显示。

往期教程

因为教程是系列教程，前后关联性非常强，请大家按照微信公众号【零基础学编程】的历史消息发布时间先后次序进行阅读。