html 好看表格样式,简单但是好看的表格样式

废话不多说，先上图：

再看看代码块；

样式表：

body

{

font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

background: #E6EAE9;

}

a {

color: #c75f3e;

}

#mytable {

width: 700px;

padding: 0;

margin: 0;

}

caption {

padding: 0 0 5px 0;

width: 700px;

font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

text-align: right;

}

h {

font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

border-top: 1px solid #C1DAD7;

letter-spacing: 2px;

text-transform: uppercase;

text-align: left;

padding: 6px 6px 6px 12px;

background: #CAE8EA url(images/bg_header.jpg) no-repeat;

}

th.nobg {

border-top: 0;

border-left: 0;

border-right: 1px solid #C1DAD7;

background: none;

}

td {

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

background: #fff;

font-size:11px;

padding: 6px 6px 6px 12px;

color: #4f6b72;

}

td.alt {

background: #F5FAFA;

color: #797268;

}

th.spec {

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #fff url(images/bullet1.gif) no-repeat;

font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

}

th.specalt

{

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #f5fafa url(images/bullet2.gif) no-repeat;

font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #797268;

}

td{ font-size:11px;}

HTML：