精通CSS+DIV：6，用CSS设置表格与表单样式

一、控制表格
1，表格中的标记
[code]
table: border, summary
caption
th: scope(row, col)
[/code]
2，表格的颜色
[code]
.datalist {
color: #0046a6;
background-color: #d2e8ff;
font-family: Arial;
}
.datalist caption {
font-size: 18px;
font-weight: bold;
}
.datalist th {
color: #003e7e;
background-color: #7bb3ff;
}
[/code]
3，表格的边框
[code]
.datalist {
border: 1px solid #007eff;
font-family: Arial;
border-collapse: collapse;
}
.datalist th, .datalist td {
border: 1px solid #429fff;
}
[/code]
4，隔行变色
[code]
.datalist tr.altrow {
background-color: #c7e5ff;
}
[/code]
5，鼠标经过变色
FireFox:
[code]
.datalist tr:hover {
background-color: #c4e4ff;
}
[/code]
IE则不支持Anchor Pseudo Classes，只能用JavaScript配合:
[code]
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', '');
}
}
[/code]

二、控制表单
1，表单中的元素
[code]
form
input
textarea
select
option
[/code]
2，文字按钮
[code]
.btn {
background-color: transparent;
border: 0px;
}
[/code]
3，七彩下拉菜单
[code]
<select>
<option value="blue" class="blue">blue</option>
<option value="red" class="red">red</option>
</select>

.blue {
background-color: #7598FB;
color: #000000;
}
.red {
background-color: #E20A0A;
color: #ffffff;
}
[/code]
4，类似Excel的无边框输入框
[code]
input {
border: none;
}
[/code]