标准化表格table的样式
在DIV盛行的今天, 关于table和div的好与坏比较的讨论非常之多，一直没有好的结果出来。
table虽然是以前版本的产物，但在现在2.0下应该用处还是很大而且并非一无是处，用的好相信会比div更加实用！
首先看看W3SCHOOL对table的介绍。 连接>>
下面是一个table及其样式的代码， 相信将其看完了解清楚一定会提升大家对table的认识。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>table_style</title>
</head>
<style type=”text/css“>
.tab {
width: 100%;
margin:0;
padding:0;
font-family: “Trebuchet MS”, Trebuchet, Arial, sans-serif;
color: #1c5d79;
border-top: 1px #ffffff;
border-bottom: 1px #ffffff;
border-left: 1px #ffffff;
border-right: 1px #ffffff;
border-collapse: collapse;
}
.tab caption {
margin:0;
padding:0;
background: #FFFFFF;
height: 40px;
line-height: 40px;
text-indent: 28px;
font-family: “Trebuchet MS”, Trebuchet, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
text-align:left;
letter-spacing:3px;
border-top: dashed 1px #c2c2c2;
border-bottom: dashed 1px #c2c2c2;
}
/* HEAD */
.tab thead{
border: none;
}
.tab thead tr th {
background-color: #3366CC;
height: 22px;
line-height: 22px;
text-align: center;
color: #FFFFFF;
border-left:solid 1px #ffffff;
border-right:solid 1px #ffffff;
border-bottom:solid 1px #ffffff;
border-collapse: collapse;
font-size: 12px;
}
/* BODY */
.tab tbody tr {
background: #E8F3FF;
font-size: 13px;
height: 12px;
line-height: 12px;
text-align: center;
event:expression( onmouseover = function() {
this.style.backgroundColor = ‘#ffffff’;
}
,onmouseout = function() {
this.style.backgroundColor = ‘#E8F3FF’;
}
)
}
.tab tbody tr.odd {
background: #F0FFFF;
}
.tab tbody tr:hover, .tab tbody tr.odd:hover {
background: #ffffff;
}
.tab tbody tr th{
background-color: #3366CC;
padding: 6px;
border: solid 1px #ffffff;
}
.tab tbody tr td{
padding: 6px;
border: solid 1px #ffffff;
}
.tab tbody tr th {
font-family: “Trebuchet MS”, Trebuchet, Arial, sans-serif;
font-size: 12px;
padding: 6px;
text-align: center;
font-weight: bold;
color:#000000;
}
.tab tbody tr th:hover {
background: #0099CC;
}
/* LINKS */
.tab a {
color: gray;
text-decoration: none;
font-size: 13px;
border-bottom: solid 1px white;
}
.tab a:hover {
color: blue;
border-bottom: none;
}
/* FOOTER */
.tab tfoot {
background: #f3f3f3;
height: 24px;
line-height: 24px;
font-family: “Trebuchet MS”, Trebuchet, Arial, sans-serif;
font-size: 12px;
/*font-weight: bold;*/
color: #555d6d;
text-align: center;
letter-spacing: 3px;
border-top: solid 1px #326e87;
border-bottom: dashed 1px #c2c2c2;
}
.tab tfoot tr th, .tab tfoot tr td {
/*padding: .1em .6em;*/
}
.tab tfoot tr th {
border-top: solid 1px #326e87;
}
.tab tfoot tr td {
/**text-align: right;**/
}
</style>
<body>
<table>
<caption>111111</caption>
<thead>
<tr>
<th>111111111111</th>
<th>111111111111</th>
<th>111111111111</th>
<th>111111111111</th>
<th>111111111111</th>
</tr>
</thead>
<tbody>
<tr>
<th>11111111111111</th>
<td>11111111111111</td>
<td>11111111111111</td>
<td>11111111111111</td>
<td>11111111111111</td>
</tr>
<tr>
<th>11111111111111</th>
<td>11111111111111</td>
<td>11111111111111</td>
<td>11111111111111</td>
<td>11111111111111</td>
</tr>
<tr>
<th>11111111111111</th>
<td>11111111111111</td>
<td>11111111111111</td>
<td>11111111111111</td>
<td>11111111111111</td>
</tr>
<tr>
<th>11111111111111</th>
<td>11111111111111</td>
<td>11111111111111</td>
<td>11111111111111</td>
<td>11111111111111</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>1111111111111</th>
<th>1111111111111</th>
<th>1111111111111</th>
<th>1111111111111</th>
<th>1111111111111</th>
</tr>
</tfoot>
</table>
</body>
</html>
在IE和FF下查看有不同效果，导致这个原因的结果是ie不识别ODD这样的用法。
关于该样式应该说是一个大体模板，大家可以以此为基础调整出自己喜欢的色调。
浙公网安备 33010602011771号