摘要

CSS表格与表单是网页上最常见的元素，表格除了显示数据外，还常常被用来排版。CSS表格作为传统的HTML元素，一直受到网页设计者们的青睐。使用CSS表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为CSS表格框架的简单、明了，使用没有边框的表格来排版，也受到很多设计者的喜爱。下面介绍CSS控制表格的方法，包括表格的颜色、标题、边框、背景等。

WEB2.0提倡使用div开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。

表格常见的应用

表格的颜色.datalist {

color: #0046a6;

background-color: #d2e8ff;

font-family: Arial;

}

.datalist caption {

font-size: 18px;

font-weight: bold;

}

.datalist th {

color: #003e7e;

background-color: #7bb3ff;

}

表格的边框

例如.datalist {

border: 1px solid #007eff;

font-family: Arial;

border-collapse: collapse;

}

.datalist th, .datalist td {

border: 1px solid #429fff;

}

隔行变色

当表格的行列都很多、数据量很大的时候，单元格如果采用相同的背景色，用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色，使得奇数行和偶数行的背景颜色不一样，达到数据一目了然的目的。

例如.datalist tr.altrow {

background-color: #c7e5ff;

}

鼠标经过变色

对于长时间审核大量数据、浏览表格的用户来说，即使是隔行变色的表格，阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色，就使得页面充满了生机，最大程度的减少用户疲倦。

例如.datalist tr:hover {

background-color: #c4e4ff;

}

.datalist tr:hover { background-color: #c4e4ff; }

下面介绍几个CSS表格的实例一、单像素边框CSS表格

这是一个很常用的表格样式。

CSS样式、HTML代码

HTML 代码

table.gridtable {

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-color: #666666;

border-collapse: collapse;

}

table.gridtable th {

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #666666;

background-color: #dedede;

}

table.gridtable td {

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #666666;

background-color: #ffffff;

}

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C

效果图：

二、带背景图的CSS样式表格

和上面差不多，不过每个格子里多了背景图。

cell-blue.jpg

cell-grey.jpg

1. 下载上面两张图，命名为cell-blue.jpg和cell-grey.jpg

2. 拷贝下面的代码到你想要的地方，记得修改图片url

3、css样式、HTML代码

table.imagetable {}{

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-color: #999999;

border-collapse: collapse;

}

table.imagetable th {}{

background:#b5cfd2 url('cell-blue。jpg');

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #999999;

}

table.imagetable td {}{

background:#dcddc0 url('cell-grey。jpg');

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #999999;

}

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C

效果图

三、 自动换整行颜色的CSS样式表格

这个CSS样式表格自动切换每一行的颜色，在我们需要频繁更新一个大表格的时候很有用。

代码：

function altRows(id){

if(document.getElementsByTagName){

var table = document.getElementById(id);

var rows = table.getElementsByTagName("tr");

for(i = 0; i < rows.length; i++){

if(i % 2 == 0){

rows[i].className = "evenrowcolor";

}else{

rows[i].className = "oddrowcolor";

}

}

}

}

window.οnlοad=function(){

altRows('alternatecolor');

}

table.altrowstable {}{

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-color: #a9c6c9;

border-collapse: collapse;

}

table.altrowstable th {}{

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #a9c6c9;

}

table.altrowstable td {}{

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #a9c6c9;

}

.oddrowcolor{}{

background-color:#d4e3e5;

}

.evenrowcolor{}{

background-color:#c3dde0;

}

Info Header 1	Info Header 2	Info Header 3
Text 1A	Text 1B	Text 1C
Text 2A	Text 2B	Text 2C
Text 3A	Text 3B	Text 3C
Text 4A	Text 4B	Text 4C
Text 5A	Text 5B	Text 5C

效果图：

四、鼠标悬停高亮的CSS样式表格

代码

table.hovertable {}{

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-color: #999999;

border-collapse: collapse;

}

table.hovertable th {}{

background-color:#c3dde0;

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #a9c6c9;

}

table.hovertable tr {}{

background-color:#d4e3e5;

}

table.hovertable td {}{

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #a9c6c9;

}

Info Header 1	Info Header 2	Info Header 3
Item 1A	Item 1B	Item 1C
Item 2A	Item 2B	Item 2C
Item 3A	Item 3B	Item 3C
Item 4A	Item 4B	Item 4C
Item 5A	Item 5B	Item 5C

效果图：