用CSS设置表格与表单

6.4 表格实例三：日历
日历是日常生活中必不可少的，作为备忘录的日历在桌面 和网络上都越来越流行，通过CSS设定表格的属性，可以很轻 松的实现各种日历效果。
6.5 CSS与表单
表单是网页与用户交互所不可缺少的元素,在传统的HTML 中对表单元素的样式控制很少,仅仅局限于功能上的实现.利用 CSS对表单中的各个元素进行控制,与表格配合制作各种效果.
6.5.1 表单中的元素
<style> form{border:1px dotted #aaaaaa; padding:3px 6px 3px 6px; margin:0px; font:14px Arial;} input{color:#00008b; background-color:#add8e6; border:1px solid #000008b;} select{width:80px; color:#00008b; background-color:#add8e6; border:1px solid #00008b;} textarea{width:200px; height:40px; color:#00008b; background-color:#add8e6; border:1px solid #00008b;} </style>
观察下面两个表格，前者单元格的边框之间有空隙， 这时候需要设置css中整个表格的border-collapse属性， 使得边框重叠在一起，显示如后者表格效果．例如； .datalist{ border:1px solid #429fff; /* 表格边框 */ font-family:Arial; border-collapse:collapse; /* 边框重叠 */ }
6.1.2 表格颜色
表格中文字的颜色通过color属性设置,背景颜色通过 background-color设置. t-color:#7bb3ff }
6.1.3 表格边框
表格中利用<table border=“边框粗细” bordercolor=“”> 但是利用这种方法设计的边框在IE浏览器和Firefox浏览器 中,显示效果有很大区别,所以建议使用CSS设置表格的边框. 例如: .datalist{ border:1px solid #007eff; font-family:Arial; }
第6章 用CSS设置表格与表单
6.1 控制表格
表格是网页制作时非常重要的技巧，在许多网站开发中 都用表格来构建网站的总体布局或者使用表格来创建多种表 格应用。在html语法中，表格的建立将运用<table>、<tr>、 <th>和<td>四个标记。
6.1.1 表格中的标记
<table> </table> <caption> </caption> <tr> </tr> <td> </td> 定义表格的开始和结束 定义表格标题的开始和结束 定义表行的开始和结束，一组 <tr></tr>只产生一个表行 定义单元格开始和结束，一组 <td></td>只产生一个单元格
<script language="javascript"> var rows = document.getElementsByTagName('tr'); for (var i=0;i<rows.length;i++) { rows[i].onmouseover = function( ) { this.className += 'altrow'; //鼠标在行上面的时候 } rows[i].onmouseout = function( ) { //鼠标离开时 this.className = this.className.replace('altrow', ''); } } </script>
6.2 表格实例一：隔行变色
当表格的行和列很多，并且数据量很大的时候，单元格 如果采用相同的背景色，用户在实际使用时会感到凌乱．通 常的解决办法是采用隔行变色，使得奇数行和偶数行的背景 颜色不一样．在CSS中实现隔行变色十分简单,只要给偶数行 的<tr>标记都添加上相应的类型即可. tr.altrow{ background-color:#c7e5ff; } <table> <tr> <td></td>……</tr> <tr class=“altrow”> <td> </td>…… </tr> …… </table>
6.3 表格实例二：鼠标经过变色的表格
对于长时间审核大量数据和浏览表格的用户来说，即使 是隔行变色，阅读时间长了仍然会感到疲劳或发生串行。如 果数据行能够动态的根据鼠标来变色，就会使页面充满生机. 对于IE浏览器，需要采用JavaScript动态配合，判断鼠标 指针是否移动到了某行上，如果移动到了某行上，则调用新 的CSS属性使该行背景变色。
6.6 综合实例一:直接输入的EXCEL
6.7 综合实例二:模仿新浪网民调查问卷
6.5.3 七彩的下拉菜单
CSS不仅可以控制下拉菜单的整体字体和边框等,对于下 拉菜单中的每一个选项同样可以设置背景色和文字颜色.
<style> .blue{ background-color:#7598FB; color: #000000; } .red{ background-color:#E20A0A; color: #ffffff; } .green{ background-color:#3CB371; color: #ffffff; } .yellow{ background-color:#FFFF6F; color: #000000; } .cyan{ background-color:00FFFF; color:#000000; } .purple{ background-color:800080; color:#FFFFFF; } </style>
6.5.2 像文字一样的按钮
按钮之所以称之按钮,并不是因为它的形状,而是因为它的 功能.通过CSS设置,可以将按钮变成跟普通文字一样.
<style> .txt{border-bottom:1px solid #005aa7; /* 下划线效果 */ color:#005aa7; border-top:0px; border-left:0px; border-right:0px; background-color:transparent; /* 背景色透明 */ } .btn{ background-color:transparent; /* 背景色透明 */ border:0px; /* 边框取消 */ } </style>
<th> </th>
定义表头单元格开始和结束，一组该标 记只产生一个表头单元格
标记符中要说明的问题
在<td>与</td>之间的部分，即为单元格显示的数 据，如果该单元格无数据，显示为空，则表达为： <td>&nbsp;</td>，其中&nbsp;在HTML中代表空格。 <th> </th>之间的部分为表头单元格所显示的数据， 这些数据默认以加粗居中方式显示。当然表头也可以不用 <th>，而直接用<td>来产生。