您的位置： >
css如何设置表格样式
学习标签：
本文导读：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 代码 &&复制
&style type=&text/css&&...
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;
&!-- Table goes in the document BODY --&
&table class=&gridtable&&
&th&Info Header 1&/th&&th&Info Header 2&/th&&th&Info Header 3&/th&
&td&Text 1A&/td&&td&Text 1B&/td&&td&Text 1C&/td&
&td&Text 2A&/td&&td&Text 2B&/td&&td&Text 2C&/td&
二、带背景图的CSS样式表格
和上面差不多，不过每个格子里多了背景图。
cell-blue。jpg
cell-grey。jpg
1. 下载上面两张图，命名为cell-blue。jpg和cell-grey。jpg
2. 拷贝下面的代码到你想要的地方，记得修改图片url
3、css样式、HTML代码
HTML 代码 &&复制
&!-- CSS goes in the document HEAD or added to your external stylesheet --&
&style type=&text/css&&...
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;
&!-- Table goes in the document BODY --&
&table class=&imagetable&&
&th&Info Header 1&/th&&th&Info Header 2&/th&&th&Info Header 3&/th&
&td&Text 1A&/td&&td&Text 1B&/td&&td&Text 1C&/td&
&td&Text 2A&/td&&td&Text 2B&/td&&td&Text 2C&/td&
三、&自动换整行颜色的CSS样式表格
这个CSS样式表格自动切换每一行的颜色，在我们需要频繁更新一个大表格的时候很有用。
HTML 代码 &&复制
&!-- Javascript goes in the document HEAD --&
&script type=&text/javascript&&...
function altRows(id)...{
if(document.getElementsByTagName)...{
var table = document.getElementById(id);
var rows = table.getElementsByTagName(&tr&);
for(i = <span style="background-color: #f5f5f5; color: #; i & rows. i++)...{
if(i % <span style="background-color: #f5f5f5; color: # == <span style="background-color: #f5f5f5; color: #)...{
rows[i].className = &evenrowcolor&;
rows[i].className = &oddrowcolor&;
window.onload=function()...{
altRows('alternatecolor');
&!-- CSS goes in the document HEAD or added to your external stylesheet --&
&style type=&text/css&&...
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;
&!-- Table goes in the document BODY --&
&table class=&altrowstable& id=&alternatecolor&&
&th&Info Header 1&/th&&th&Info Header 2&/th&&th&Info Header 3&/th&
&td&Text 1A&/td&&td&Text 1B&/td&&td&Text 1C&/td&
&td&Text 2A&/td&&td&Text 2B&/td&&td&Text 2C&/td&
&td&Text 3A&/td&&td&Text 3B&/td&&td&Text 3C&/td&
&td&Text 4A&/td&&td&Text 4B&/td&&td&Text 4C&/td&
&td&Text 5A&/td&&td&Text 5B&/td&&td&Text 5C&/td&
四、鼠标悬停高亮的CSS样式表格
HTML 代码 &&复制
&style type=&text/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;
&table class=&hovertable&&
&th&Info Header 1&/th&&th&Info Header 2&/th&&th&Info Header 3&/th&
&tr onmouseover=&this.style.backgroundColor='#ffff66';& onmouseout=&this.style.backgroundColor='#d4e3e5';&&
&td&Item 1A&/td&&td&Item 1B&/td&&td&Item 1C&/td&
&tr onmouseover=&this.style.backgroundColor='#ffff66';& onmouseout=&this.style.backgroundColor='#d4e3e5';&&
&td&Item 2A&/td&&td&Item 2B&/td&&td&Item 2C&/td&
&tr onmouseover=&this.style.backgroundColor='#ffff66';& onmouseout=&this.style.backgroundColor='#d4e3e5';&&
&td&Item 3A&/td&&td&Item 3B&/td&&td&Item 3C&/td&
&tr onmouseover=&this.style.backgroundColor='#ffff66';& onmouseout=&this.style.backgroundColor='#d4e3e5';&&
&td&Item 4A&/td&&td&Item 4B&/td&&td&Item 4C&/td&
&tr onmouseover=&this.style.backgroundColor='#ffff66';& onmouseout=&this.style.backgroundColor='#d4e3e5';&&
&td&Item 5A&/td&&td&Item 5B&/td&&td&Item 5C&/td&
您可能感兴趣
一月好评排行榜温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
友情的延续来自心灵,不管联系有多少,只要彼此心中有对方的一片天空,那么偶尔的一声问候,就会带来会心的一笑,就会发现在某个地方有个心在为你祝福！
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(5349)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'html特效代码 html表格制作',
blogAbstract:'
表格算不上什么特效，但在空间却很有用处。如果使用专门的工具，制作一张表格是轻而易举的事，但这类工具一下子不容易学会，下面介绍html表格如何手工制作。
&?1、最基本的表格
第1行第1列
第1行第2列
第2行第1列
第2行第2列
第3行第1列
第3行第2列代码：
&table width=\"300\" border=\"1\"& bordercolor=\"#000000\"&& &tr&&&& &td&第1行第1列&/td&&&& &td&第1行第2列&/td&',
blogTag:'代码,表格',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:6,
publishTime:8,
permalink:'blog/static/',
commentCount:2,
mainCommentCount:2,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'友情的延续来自心灵,不管联系有多少,只要彼此心中有对方的一片天空,那么偶尔的一声问候,就会带来会心的一笑,就会发现在某个地方有个心在为你祝福！',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}当前位置： &
静态HTML表格排序功能实现 - 网页特效代码演示 - 特效代码运行&
静态HTML表格排序功能实现以下是HTML网页特效代码，点击运行按钮可查看效果：
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&无标题文档&/title&
*{font-family:Arial, Helvetica, sans-font-size:14border:}
body{text-align:}
table{margin:100}
td{width:100height:24text-align:line-height:24border:1}
.red{color:}
.top{background:#CCCCCC;cursor:}
.up{background:#FFFFCC url(/uploads/allimg/019330.gif) no-repeat right 5}
.down{background:#FFFFCC url(/uploads/allimg/019334.gif) no-repeat right 5}
.hov{background:#F0EFE5;}
&table cellpadding="0" id="table"&
&tr class="top"&&td&kick me&/td&&td &kick me&/td&&td&kick me&/td&&td&kick me&/td&&/tr&
&td&&span id="bfn_la_bac.usa"&15.43&/span&&/td&
&td class="red"&700&/td&
&td&1.220&/td&
&td class="red"&阿&/td&
&tr&&td&&span id="bfn_la_c.usa"&7.05&/span&&/td&
&td class="red"&4&/td&
&td&3,000&/td&
&td class="red"&炳&/td&
&tr&&td&&span id="bfn_la_jpm.usa"&30.62&/span&&/td&
&td class="red"&30&/td&
&td&2,558,800&/td&
&td class="red"&和&/td&
&td&&span id="bfn_la_axp.usa"&22.30&/span&&/td&
&td class="red"&5&/td&&td&6&/td&
&td class="red"&瞎&/td&
&tr&&td&&span id="bfn_la_mrk.usa"&26.31&/span&&/td&
&td class="red"&0.6&/td&&td&5&/td&
&td class="red"&-&/td&
&tr&&td&&span id="bfn_la_pg.usa"&63.16&/span&&/td&
&td class="red"&7&/td&&td&4&/td&
&td class="red"&子&/td&
&script type="text/javascript"&
var tableSort = function(){
this.initialize.apply(this,arguments);
tableSort.prototype = {
initialize : function(tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){
this.Table = document.getElementById(tableId);
this.rows = this.Table.//所有行
this.Tags = this.rows[clickRow-1].//标签td
this.up = classUp;
this.down = classD
this.startRow = startR
this.selectClass = selectC
this.endRow = (endRow == 999? this.rows.length : endRow);
this.T2Arr = this._td2Array();//所有受影响的td的二维数组
this.setShow();
//设置标签切换
setShow:function(){
var defaultClass = this.Tags[0].classN
for(var Tag ,i=0;Tag = this.Tags[i];i++){
Tag.index =
addEventListener(Tag ,'click', Bind(Tag,statu));
var _this =
var turn = 0;
function statu(){
for(var i=0;i&_this.Tags.i++){
_this.Tags[i].className = defaultC
if(turn==0){
addClass(this,_this.down)
_this.startArray(0,this.index);
addClass(this,_this.up)
_this.startArray(1,this.index);
//设置选中列样式
colClassSet:function(num,cla){
//得到关联到的td
for(var i= (this.startRow-1);i&(this.endRow);i++){
for(var n=0;n&this.rows[i].cells.n++){
removeClass(this.rows[i].cells[n],cla);
addClass(this.rows[i].cells[num],cla);
//开始排序
num 根据第几列排序
aord 逆序还是顺序
startArray:function(aord,num){
var afterSort = this.sortMethod(this.T2Arr,aord,num);//排序后的二维数组传到排序方法中去
this.array2Td(num,afterSort);//输出
//将受影响的行和列转换成二维数组
_td2Array:function(){
var arr=[];
for(var i=(this.startRow-1),l=0;i&(this.endRow);i++,l++){
arr[l]=[];
for(var n=0;n&this.rows[i].cells.n++){
arr[l].push(this.rows[i].cells[n].innerHTML);
//根据排序后的二维数组来输出相应的行和列的 innerHTML
array2Td:function(num,arr){
this.colClassSet(num,this.selectClass);
for(var i= (this.startRow-1),l=0;i&(this.endRow);i++,l++){
for(var n=0;n&this.Tags.n++){
this.rows[i].cells[n].innerHTML = arr[l][n];
//传进来一个二维数组，根据二维数组的子项中的w项排序，再返回排序后的二维数组
sortMethod:function(arr,aord,w){
//var effectCol = this.getColByNum(whichCol);
arr.sort(function(a,b){
x = killHTML(a[w]);
y = killHTML(b[w]);
x = x.replace(/,/g,'');
y = y.replace(/,/g,'');
switch (isNaN(x)){
case false:
return Number(x) - Number(y);
case true:
return x.localeCompare(y);
arr = aord==0?arr:arr.reverse();
/*-----------------------------------*/
function addEventListener(o,type,fn){
if(o.attachEvent){o.attachEvent('on'+type,fn)}
else if(o.addEventListener){o.addEventListener(type,fn,false)}
else{o['on'+type] =}
function hasClass(element, className) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
return element.className.match(reg);
function addClass(element, className) {
if (!this.hasClass(element, className))
element.className += " "+classN
function removeClass(element, className) {
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(reg,' ');
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
//去掉所有的html标记
function killHTML(str){
return str.replace(/&[^&]+&/g,"");
//------------------------------------------------
第几行是标签行，从第几行开始排序，第几行结束排序(999表示最后) 升序标签样式，降序标签样式
选中列样式
//注意标签行的class应该是一致的
var ex1 = new tableSort('table',1,2,999,'up','down','hov');
[提示：可先修改代码再按运行]
刚被其它网友点击的网页特效&
特效标题预览特效点击运行特效
搜索查询面板&
本月特效排行&
本周特效排行&
本日特效排行&
