漂亮的表格 .html

来源：互联网发布：js继承方式的优缺点编辑：程序博客网时间：2024/05/01 17:26

漂亮的表格 .html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>CSS Tables</title>

</head>

/* CSS Document */

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;

}

th {

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;

}

/*---------for IE 5.x bug*/

html>body td{ font-size:11px;}

</style>

<body>

<tr>

<th scope="col" abbr="Configurations" class="nobg">Configurations</th>

</tr>

<tr>

<th scope="row" abbr="Model" class="spec">lipeng</th>

</tr>

<tr>

<th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>

<td class="alt">Dual 1.8GHz PowerPC G5</td>

<td class="alt">Dual 2GHz PowerPC G5</td>

<td class="alt">Dual 2.5GHz PowerPC G5</td>

</tr>

<tr>

<td>900MHz per processor</td>

<td>1GHz per processor</td>

<td>1.25GHz per processor</td>

</tr>

<tr>

<td class="alt">512K per processor</td>

</tr>

</table>

</body>

</html>