站长技术网

首页 > 网站基础 > DIV&CSS >

经常使用的两个清爽的table样式

点评:table在使用中占有很重要的地位,下面附上两个我经常使用的table样式,喜欢的朋友可以参考下!

复制代码代码如下:

<html>

<head>

<title></title>

<style type="text/css">

body,table{

font-size:12px;

}

table{

table-layout:fixed;

empty-cells:show;

border-collapse: collapse;

margin:0 auto;

}

td{

height:30px;

}

h1,h2,h3{

font-size:12px;

margin:0;

padding:0;

}

.table{

border:1px solid #cad9ea;

color:#666;

}

.table th {

background-repeat:repeat-x;

height:30px;

}

.table td,.table th{

border:1px solid #cad9ea;

padding:0 1em 0;

}

.table tr.alter{

background-color:#f5fafe;

}

</style>

</head>

<body>

<table width="90%" class="table">

<tr>

<th>学号</th>

<th>姓名</th>

<th>平时</th>

<th>期中</th>

<th>实验(践)</th>

<th>其它</th>

<th>期末</th>

<th>总评</th>

</tr>

<tr>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr class="alter">

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

</tr>

</table>

</body>

</html>

复制代码代码如下:

<html>

<head>

<title></title>

<style type="text/css">

.table

{

width: 100%;

padding: 0;

margin: 0;

}

th {

font: bold 12px "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 no-repeat;

}

td {

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

background: #fff;

font-size:14px;

padding: 6px 6px 6px 12px;

color: #4f6b72;

}

td.alt {

background: #F5FAFA;

color: #797268;

}

th.spec,td.spec {

border-left: 1px solid #C1DAD7;

}

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

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

tr.select th,tr.select td

{

background-color:#CAE8EA;

color: #797268;

}

</style>

</head>

<body>

<table class="table" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">

<tr>

<th class="spec">选择</th>

<th>课程名称</th>

<th>课程编号</th>

<th>已经考试次数</th>

</tr>

<tr>

<td class="spec">1</td>

<td>1</td>

<td class="alt">1</td>

<td>1</td>

</tr>

<tr class="select">

<td class="spec">2</td>

<td>2</td>

<td class="alt">2</td>

<td>2</td>

</tr>

<tr>

<td class="spec">3</td>

<td>3</td>

<td class="alt">3</td>

<td>3</td>

</tr>

</table>

</body>

</html>