0034 使用table表格标签进行网页排版

上节课,使用table做出了一个最基本的表格,学会了设置表格的属性,调整宽度和边框。
这节课,来学习如何更多table的用法,以及使用table来对页面进行版面布局的方法。

上节课的课后练习

1.表格当中增加4行内容:Windows 20年,Linux 10年,Oracle 10年,MySQL 12年。
修改html文件,复制粘贴4行,然后修改里面的文字内容:

2-8-1.jpg

刷新页面:

2-8-2.jpg

2.表格增加一列,放在第一列,列里面的内容分别是:1-6行:编程语言,7-8行:操作系统,9-10行:数据库。
修改html代码,在table里面的每一个<tr>后面增加内容:<td class="td1">编程语言</td>,7-10行修改文字内容,如下图:

2-8-3.jpg

刷新页面看看:

2-8-4.jpg

纵向合并td

通过新增td可以在表格中增加列。这里感觉有点不好的地方,就是1-6行都是编程语言,有点重复,是否可以合并为一个格子呢?
可以使用rowspan属性来将td进行纵向合并。
修改html代码如下,在需要向下合并的td里面设置属性rowspan=行数:

2-8-5.jpg

刷新页面:

2-8-6.jpg

可以看到,rowspan可以告诉td向下合并几行,同时注意下面的几行都不要再写这一列被合并掉的td了,否则会多出来td的。
大家可以尝试,不删除某一行的<td class="td1">编程语言</td>语句看看是什么样的效果。

td中的文字内容居中

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

2-8-7.jpg

刷新页面看看:

2-8-8.jpg

很多标签元素都可以使用属性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-8-9.jpg

刷新页面:

2-8-10.jpg

可以看到,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修改后代码如下:

2-8-11.jpg

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

2-8-12.jpg

刷新页面:

2-8-13.jpg

发现几个问题:
第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修改后代码如下:

2-8-14.jpg

html将原来的moresmallcontent样式名字修改为moresmallcontent2。
html修改后代码如下:

2-8-15.jpg

刷新页面:

2-8-16.jpg

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

上面的效果图可以看到右侧的内容比较少,由于td针对元素内部的内容,默认是垂直居中显示的,这里修改为垂直靠上比较好看。
修改css文件,在td3和td4里面增加一行vertical-align:top;
修改后的css代码如下:

2-8-17.jpg

刷新页面:

2-8-18.jpg

可以看到右侧的内容也是靠上对齐了,这样如果继续往下面增加更多内容的话,就不会影响到页面的排版了。
还可以使用属性值middle和bottom来设置垂直居中和垂直靠下的对齐方式。

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

前面定义了针对table标签元素的通用属性,有右边框和下边框,因此这里也用到了table标签,所以这个table也被设置了右边框和下边框,要把这里的table边框属性去掉。
前面讲过可以通过class="样式名"的方式给某个特定元素设置指定的样式,其实还有另外一种方式可以针对某个特定元素设置样式。
每个标签元素可以设置一个属性id="页面中唯一id值",来给每一个标签元素赋予一个独一无二的名字,这就是id属性的功能。
给元素设置好id属性之后,就可以在css文件中通过设置样式 #id 的方式来给这个特定的元素设置样式值。
修改html文件来给刚才的table增加一个id。
html修改后的代码如下:

2-8-19.jpg

修改css文件来给这个id赋予样式值。
css修改后的代码如下:

2-8-20.jpg

刷新页面:

2-8-21.jpg

可以看到,表格的右边框和下边框不见了,并且通过增加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.给技术经验的表格增加一个表头,标题分别是:技术类别,技术点,经验年数。文字加粗显示。

往期教程

因为教程是系列教程,前后关联性非常强,请大家按照历史消息发布时间先后次序进行阅读。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,901评论 1 91
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 503评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 1,990评论 0 5
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 1,791评论 0 30
  • 又一次的对着天空发呆 不一样的风景不一样的你 看着树叶被风雨吹打 想着你对我说过的话 雨一直下 一直下 淋湿了你对...
    猫猫控阅读 67评论 0 0