CSS设置表格与表单样式
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3
6.1.1 表格模型
<thead>用于指定表格标题行，如果打印的表格超过一页纸，
<thead>应该在每个页面顶端出现。 <tbody>表格正文部分，将相关行集合在一起。一个表格可 以有一个或多个<tbody>部分。 <tfood>是表格标题行的低端补充，它是一组作为脚注的行， 如果表格横跨多个页面，也应该重复。 他们不但用于网页的分块显示，还能用来做表格的分页打印， 就是表格自动分页的时候每页 都带表头thead和表底tfoot。 例如：
12
应用实例：
表格实例1—隔行变色(文件Sample6-4.html) 表格实例2—鼠标经过时变色的表格(文件 Sample6-5.html) 表格实例3—日历(文件Sample6-6.html)
13
CSS与表单
表单是网页与用户交互不可缺少的元素，在 传统的HTML中对表单元素的样式控制很少， 仅局限于功能上的实现 表单中的元素很多，包括常用的输入框、文 本框、单选钮、复选框、下拉菜单和按钮等。
设定表格的行和列的边框是合并成单边框，还是 分别有各自的边框。 值： separate缺省值。边框分开，不合并。 collapse边框合并。即如果相邻，则共用同一个边 框。
9
#MrJin_a th { font-size: 14px; font-weight: normal; color: #039; padding: 10px 8px; border-bottom: 2px solid #6678b1; } #MrJin_a td { color: #666; padding: 9px 8px 0px 8px; } #MrJin_a tbody tr:hover td { color: #03c; }
实例：
1. 2. 3.
表单元素文件Sample6-7.html 彩色的下拉菜单 综合实例—模仿新浪网民调查问卷(文件 Sample6-9.html)
17
10
6.1.2表格的颜色
表格颜色的设置与文字颜色的设置完全一样， 通过color属性设置表格中文字的颜色，通过 background属性设置表格的背景颜色。 如文件Sample6-2.html所示：
11
6.1.3表格的边框
在CSS中设置边框同样是通过border属性，设 置方法跟图像的边框完全一样，只不过在表格 中需要特别注意单元格之间的关系，需要为单 元格也单独设置相应的边框。 如文件Sample6-3.html所示：
5
6.1.1 表格模型
table{ caption-side:left;
Βιβλιοθήκη Baidu
} 设置标题caption的位置，但ie浏览器不支持，默认位置是在表格上面居 中显示。 th的scope属性： scope 属性 定义了行或列的表头 scope可以定义行或列的表头 取值 col - 定义列表头 row - 定义行表头 colgroup - 定义列组的表头信息,是column group的缩写 rowgroup - 定义行组的表头信息,是row group的缩写
8
6.1.1 表格模型
HTML代码中没有任何表现的部分，不设置边距，定义表格边线，色 彩等。所有表现的内容都分离到CSS里去。 body { line-height: 20px; border-collapse边框合并属性，该CSS属性用来 }
#MrJin_a { font-size: 12px; background: #fff; margin: 45px; width: 480px; border-collapse: collapse; text-align: left; }
7
<table id="MrJin_a" summary="关于www.52css.ocm网站的一些数据"> <thead> <tr> <th scope="col">JsCss8.com</th> <th scope="col">IP</th> <th scope="col">PV</th> <th scope="col">RANK</th> </tr> </thead> <tbody> <tr> <td> 网站首页</td> <td>5000</td> <td>47800</td> <td>A</td> </tr> <tr> <td>CSS2.0教程</td> <td>4200</td> <td>41800</td> <td>A+</td> </tr> </tbody> </table>
4
6.1.1 表格模型
<table> <caption>一周安排表</caption> <thead> <tr> <th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th> 星期五</th> </tr> </thead> <tbody> <tr><th>上午</th><td>学习</td><td></td><td>学习</td><td></td><td></td> </tr> <tr><th>下午</th><td></td><td>游戏时间</td><td></td><td></td><td></td> </tr> <tr><th>晚上</th><td></td><td>学习</td><td></td><td>休息时间</td><td></td> </tr> </tbody> </table>
14
CSS与表单
HTML标签 <button> 功能 创建Reset、Submit或者其他可编程下 压按钮
<fieldset>
<input type=”button”> <input type=”checkbox”> <input type=”file”> <input type=”hidden”> <input type=”image”>
6
6.1.1 表格模型
summary 属性 代表HTML表格的摘要 表格不仅可以有标题caption，还可以有一个摘要说明 summary。摘要是不会显示出来的，通常是给一些其它的工 具使用的，比如盲人阅读器等。 由于摘要summary不会显示在浏览器中，所以可以尽可能 的使摘要描述足够长，这样更有利于那些通过“听”的浏览 者了解你的table表格。
第6章 CSS设置表格与表单样式
1
学习目标
什么是表格模型 对数据表格应用样式。 创建简单和复杂的表单布局 对各种表单元素应用样式。 掌握CSS中用列表制作各种菜单的方法。 ppt中所有实例参考网页设计与制作电子教材 及源代码
2
6.1.1 表格模型
虽然我们不需要表格来进行网页布局了，但很多表格式的数 据，还是需要表格这一形式发挥它的作用！ <table> <caption></caption> <tr><th></th>… </tr> <tr><td></td>… </tr> … </table> 另外可以通过<thead><tbody><tfood>元素将表格行聚类为 组，可以构成更复杂的表格。
15
CSS与表单
HTML标签 <input type=”submit”> <input type=”text”> <lable> <legend> <optgroup > <option> <select> <textarea>
例如6-3.html
16
功能 创建Submit按钮 创建单行文本字段 为表单元素提供文本标签 为<fieldset >提供文本标签 组合相关<option>元素 指定<select>菜单中的一个选择 创建下拉菜单或者可滚动菜单 创建多行文本输入框
组合相关的表单控件
创建可编程的下压按钮 创建复选框 从用户的计算机系统选择用于上传的 文件 创建隐藏字段 创建图像创建Submit按钮
<input type=”password”>
<input type=”radio”> <input type=”reset”>
创建密码文本字段
创建单选按钮中的一个按钮 创建Reset按钮
6.1.1 表格模型
<thead>用于指定表格标题行，如果打印的表格超过一页纸，
<thead>应该在每个页面顶端出现。 <tbody>表格正文部分，将相关行集合在一起。一个表格可 以有一个或多个<tbody>部分。 <tfood>是表格标题行的低端补充，它是一组作为脚注的行， 如果表格横跨多个页面，也应该重复。 他们不但用于网页的分块显示，还能用来做表格的分页打印， 就是表格自动分页的时候每页 都带表头thead和表底tfoot。 例如：
12
应用实例：
表格实例1—隔行变色(文件Sample6-4.html) 表格实例2—鼠标经过时变色的表格(文件 Sample6-5.html) 表格实例3—日历(文件Sample6-6.html)
13
CSS与表单
表单是网页与用户交互不可缺少的元素，在 传统的HTML中对表单元素的样式控制很少， 仅局限于功能上的实现 表单中的元素很多，包括常用的输入框、文 本框、单选钮、复选框、下拉菜单和按钮等。
设定表格的行和列的边框是合并成单边框，还是 分别有各自的边框。 值： separate缺省值。边框分开，不合并。 collapse边框合并。即如果相邻，则共用同一个边 框。
9
#MrJin_a th { font-size: 14px; font-weight: normal; color: #039; padding: 10px 8px; border-bottom: 2px solid #6678b1; } #MrJin_a td { color: #666; padding: 9px 8px 0px 8px; } #MrJin_a tbody tr:hover td { color: #03c; }
实例：
1. 2. 3.
表单元素文件Sample6-7.html 彩色的下拉菜单 综合实例—模仿新浪网民调查问卷(文件 Sample6-9.html)
17
10
6.1.2表格的颜色
表格颜色的设置与文字颜色的设置完全一样， 通过color属性设置表格中文字的颜色，通过 background属性设置表格的背景颜色。 如文件Sample6-2.html所示：
11
6.1.3表格的边框
在CSS中设置边框同样是通过border属性，设 置方法跟图像的边框完全一样，只不过在表格 中需要特别注意单元格之间的关系，需要为单 元格也单独设置相应的边框。 如文件Sample6-3.html所示：
5
6.1.1 表格模型
table{ caption-side:left;
Βιβλιοθήκη Baidu
} 设置标题caption的位置，但ie浏览器不支持，默认位置是在表格上面居 中显示。 th的scope属性： scope 属性 定义了行或列的表头 scope可以定义行或列的表头 取值 col - 定义列表头 row - 定义行表头 colgroup - 定义列组的表头信息,是column group的缩写 rowgroup - 定义行组的表头信息,是row group的缩写
8
6.1.1 表格模型
HTML代码中没有任何表现的部分，不设置边距，定义表格边线，色 彩等。所有表现的内容都分离到CSS里去。 body { line-height: 20px; border-collapse边框合并属性，该CSS属性用来 }
#MrJin_a { font-size: 12px; background: #fff; margin: 45px; width: 480px; border-collapse: collapse; text-align: left; }
7
<table id="MrJin_a" summary="关于www.52css.ocm网站的一些数据"> <thead> <tr> <th scope="col">JsCss8.com</th> <th scope="col">IP</th> <th scope="col">PV</th> <th scope="col">RANK</th> </tr> </thead> <tbody> <tr> <td> 网站首页</td> <td>5000</td> <td>47800</td> <td>A</td> </tr> <tr> <td>CSS2.0教程</td> <td>4200</td> <td>41800</td> <td>A+</td> </tr> </tbody> </table>
4
6.1.1 表格模型
<table> <caption>一周安排表</caption> <thead> <tr> <th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th> 星期五</th> </tr> </thead> <tbody> <tr><th>上午</th><td>学习</td><td></td><td>学习</td><td></td><td></td> </tr> <tr><th>下午</th><td></td><td>游戏时间</td><td></td><td></td><td></td> </tr> <tr><th>晚上</th><td></td><td>学习</td><td></td><td>休息时间</td><td></td> </tr> </tbody> </table>
14
CSS与表单
HTML标签 <button> 功能 创建Reset、Submit或者其他可编程下 压按钮
<fieldset>
<input type=”button”> <input type=”checkbox”> <input type=”file”> <input type=”hidden”> <input type=”image”>
6
6.1.1 表格模型
summary 属性 代表HTML表格的摘要 表格不仅可以有标题caption，还可以有一个摘要说明 summary。摘要是不会显示出来的，通常是给一些其它的工 具使用的，比如盲人阅读器等。 由于摘要summary不会显示在浏览器中，所以可以尽可能 的使摘要描述足够长，这样更有利于那些通过“听”的浏览 者了解你的table表格。
第6章 CSS设置表格与表单样式
1
学习目标
什么是表格模型 对数据表格应用样式。 创建简单和复杂的表单布局 对各种表单元素应用样式。 掌握CSS中用列表制作各种菜单的方法。 ppt中所有实例参考网页设计与制作电子教材 及源代码
2
6.1.1 表格模型
虽然我们不需要表格来进行网页布局了，但很多表格式的数 据，还是需要表格这一形式发挥它的作用！ <table> <caption></caption> <tr><th></th>… </tr> <tr><td></td>… </tr> … </table> 另外可以通过<thead><tbody><tfood>元素将表格行聚类为 组，可以构成更复杂的表格。
15
CSS与表单
HTML标签 <input type=”submit”> <input type=”text”> <lable> <legend> <optgroup > <option> <select> <textarea>
例如6-3.html
16
功能 创建Submit按钮 创建单行文本字段 为表单元素提供文本标签 为<fieldset >提供文本标签 组合相关<option>元素 指定<select>菜单中的一个选择 创建下拉菜单或者可滚动菜单 创建多行文本输入框
组合相关的表单控件
创建可编程的下压按钮 创建复选框 从用户的计算机系统选择用于上传的 文件 创建隐藏字段 创建图像创建Submit按钮
<input type=”password”>
<input type=”radio”> <input type=”reset”>
创建密码文本字段
创建单选按钮中的一个按钮 创建Reset按钮