设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课
本节课时长12分0秒，下载文件12.1兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。
表格与表单是网页上最常见的元素，表格除了显示数据外，还常常被用来排版。而表单则作为与用户交互的窗口，时刻都扮演着信息获取和反馈的角色。本课围绕表格和表单介绍CSS设置其样式的方法，以及利用CSS实现各种特效的技巧。
1. 控制表格
表格作为传统的HTML元素，一直受到网页设计者们的青睐。使用表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为表格框架的简单、明了，使用没有边框的表格来排版，也受到很多设计者的喜爱。我们在这里主要介绍CSS控制表格的方法，包括表格的颜色、标题、边框、背景等。希望大家能够掌握以下几个方面的内容：
- 表格中的标记
- 表格的颜色
- 表格的边框
2. 表格实例一：隔行变色
当表格的行列都很多、数据量很大的时候，单元格如果采用相同的背景色，用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色，使得奇数行和偶数行的背景颜色不一样，达到数据一目了然的目的。本例最终效果如图所示。
3. 表格实例二：鼠标经过时变色的表格
对于长时间审核大量数据、浏览表格的用户来说，即使是隔行变色的表格，阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色，就使得页面充满了生机，最大程度的减少用户疲倦。
4. 表格实例三：日历
日历是日常生活中必不可少的东西，而作为备忘录的日历在桌面、网络上都越来越流行。通过CSS设定表格的属性，可以很轻松的实现各种日历的效果。我们在这里通过简单的实例，进一步熟练CSS控制表格的各种方法。本例最终效果如图所示。
5. CSS与表单
表单是网页与用户交互所不可缺少的元素，传统的HTML中对表单元素的样式控制很少，仅仅局限于功能上的实现。我们在这里围绕CSS控制表单进行详细介绍，包括表单中各个元素的控制，与表格配合制作各种效果等等。希望大家能够掌握以下几个方面的内容：
- 表单中的元素
- 像文字一样的按钮
- 七彩的下拉菜单
6. 综合实例一：直接输入的Excel表格
作为公司、单位的各种年度报表，往往数据量都很大，如果也都像普通表单一样逐项填写，势必造成网页的冗长。而Excel表格在本地机器操作时一直广受好评，通过CSS控制，结合表格和表单，便能轻松实现类似的效果，如图所示。
7. 综合实例二：模仿新浪网民调查问卷
门户网站上的新闻、事实往往都伴随着各种各样的调查问卷，包括事实的评论、舆论的反馈、事态的预测等等。这些调查问卷都离不开表格与表单的配合使用。本例通过简单的模拟新浪的调查问卷，进一步熟练CSS控制表格、表单的方法。
这个图是新浪网上关于姚明的热点调查，本例通过简单的表格、表单的配合，模拟该调查问卷的效果。
46,538
en~挺好的！
以前买过精通css+div这本书，但是以为没用，就没有好好学。现在用到了我不会。现在学，这本书真的有用吗？
很好、最近在学习CSS+Div技巧 谢谢
你的网站真好啊。呵呵，也很实用！
这课怎么没有讲到那个模仿新浪网民调查问卷啊？
经常看到网上一些像WEB.QQ.COM那样的悬浮窗口是怎么实现的？
还有TAB菜单
隔行变色 、鼠标经过时变色的表格 、自由变换的网页、直接输入的Excel表格、Ajax 这些有没有源文件？买的光碟破裂了，读不了盘。
div到底怎样学好！
,是当当看文字的好像不是很清楚,只能把文字和视频放在一起才能刚好的学习！
丽榕，
您是说图书和教学视频配合学习比较好吗？这是我们的出发点。希望对您的学习有所帮助！
呵呵。讲得有点不太详细哦。。。
如果将表单讲得详细一些或许学习起来更有效果
crazycode，
谢谢您的留言，以后再做的时候，我们会做一些更详细的！
请问 有没有原文件呢
很好
邓旭，
感谢您的支持！欢迎常来这里交流！
我在当当买了，可是光碟是破裂的，读不了，后来我用透明胶布把它贴好，放到光驱里读，读了一会全部破碎在里面，吓了我一跳，还好光驱没坏。害得我光驱里面的东西都没有。
小龙，
我给你回邮件了，请查收。
教程不错，我也从卓越上订购了一本，还免邮费，不错！！
soxohe，
谢谢您的支持，在学习中遇到问题，欢迎来这里交流！
谢谢老师，讲的太好了，不过老师我是初学者啊，虽然有很多地方有突然弄透彻的感觉，但是，还是感觉讲解的太快了，我很想好好看看，表格表单那块，因为这块一直是我的弱项，可是您好像讲的太快了，我想好好学学！
雨如，
另外还有一套教程《CSS设计彻底研究》有一章也势关于表格的，您可以参考。
http://learning.artech.cn/20070430.css-reserch-content-table.html
如果感觉还有困难，可以看一看我们的图书，那里面有文字的讲解，可能对您的理解更有帮助一些。
谢谢您的留言！
老师,说得太快了,能不能把代码重新演示一遍,或者做成像演示文稿一样的文件,可以打开自己查看代码,不然代码没看清楚就讲完了,尽管您讲得很好,但对于初学者来说还是吃力了点呀!
piaopiao，
目前这套教程是比较简单的，是配合书的，如果您觉得合适，不妨配和书一起学。我们以后也会考虑制作向您说的那样的，非常详细，完全不需要书的视频教程，不过目前还没有推出来，抱歉。
本前都发现了这个视频教程,不过没有不过这个网站,不错
对DIV+CSS有一定的提高,~~
有些CSS,在DW中,我无法实现,怎么办呢?
goodsohu，
不用管在Dreamweaver中的效果，一切以浏览器中的效果为准。把Dreamweaver当作一个代码编辑器即可了。
老师,您好!
请问下您课里面的，那些用来讲解的实例可以下吗?因为有的课程中您只给出了效果图,而具体的操作我弄不懂,所以想把那个下下来.
谢谢!
你好，您讲解的速度太快了，都来不及看来不及听。能慢些吗？而且什么叫书上都有。我拿着书听你说都来不及，希望能改进一下
tianshen1944,
呵呵，谢谢您的建议。我们以后会出一些超级详细，甚至不用看书，一步一步跟着就可以做的视频，不过我们人手有限，这个目前是个计划。
现在的视频，您重点把概念理解清楚，具体的操作，还是看书吧。书这个东西，不想网络，做一本书，就不能改，因此必须要在有限的条件下适合更多的人，您知道一本书有上万读者，要求差距很大，我们只能根据现有的条件，仅可能做到最好。书上的视频并不是说就不用看书了，学习任何技术都不是一个轻松的事情。如果跟着书学习有困难，也可以找一个培训班等等，有老师面对面教学，学起来可能更容易一些。
老师，您好，请问如果在一个页面中有两张表。第一张表实现隔行变色，但鼠标经过是不变色的。第二张表实现鼠标经过变色但不是隔行变色的效果。请问怎么样实现呢？
kodak，
用不同的id区分就可以。这就是CSS的选择其的基本功能。各管各的，不会互相干扰。
偶然的机会看到了这个网址。看了几个视频真的是受益匪浅。支持你们。
jhanlove ，
谢谢您的鼓励！欢迎您常来交流！
书那有卖的
小晴 ，
地面书店的话，一般大一些的城市买计算机书比较集中的书店都有卖的，或者在网上购买，很方便，还可以打折，您看这里。
讲解的非常好
a风 ，谢谢您的肯定！喜欢您就多学点，希望您能学到希望掌握的技术！
讲解很好,我喜欢
因为在公司。所以不方面看。看他们的评论。看来一定很精彩哦。下班后一定不能错过。 破不急待哦。