两个我经常使用的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>

经常使用的两个清爽的table样式的更多相关文章

  1. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  2. 【CSS】Table样式

    一.table td的宽度详解 Table只有Table的宽度是可以设置的,并且各个浏览器理解一致 原则上应该将table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值 Table的宽度 ...

  3. 还不错的Table样式和form表单样式

    作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...

  4. table完美css样式，table的基本样式，table样式

    table完美css样式,table的基本样式,table样式 >>>>>>>>>>>>>>>>> ...

  5. 通用table样式

    <html> <head> <title>通用table样式</title> <style type="text/css"&g ...

  6. Table样式设置

    <table class="listTable"> <tr><th width="40px">序号</th>&l ...

  7. css table样式

    1.table样式首先设置表格边框,属性设置表格的边框是否被合并为一个单一的边框. table{ border-collapse: collapse; border-spacing: 0;} 2.固定 ...

  8. html 简单的table样式

    效果预览: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. 好看的table样式

    收藏个好看的table样式 <style type="text/css">table.gridtable { font-family: verdana,arial,sa ...

随机推荐

  1. java提高篇(十)-----详解匿名内部类 ,形参为什么要用final

    在java提高篇-----详解内部类中对匿名内部类做了一个简单的介绍,但是内部类还存在很多其他细节问题,所以就衍生出这篇博客.在这篇博客中你可以了解到匿名内部类的使用.匿名内部类要注意的事项.如何初始 ...

  2. （转载）php循环检测目录是否存在并创建(循环创建目录)

    (转载)http://www.jb51.net/article/25917.htm php循环检测目录是否存在并创建,需要的朋友可以参考下. 循环创建目录方法 这个会生成image.gif目录 代码如 ...

  3. Authorized users only. All activity may be monitored and reported.

    Authorized users only. All activity may be monitored and reported. Directory: /home/oracle 如出现如上问题,是 ...

  4. Kia's Calculation（HDU 4267）

    Problem Description Doctor Ghee is teaching Kia how to calculate the sum of two integers. But Kia is ...

  5. Java中Map遍历的四种方案

    在Java中如何遍历Map对象 方式一 这是最常见的并且在大多数情况下也是最可取的遍历方式.在键值都需要时使用. Map<Integer, Integer> map = new HashM ...

  6. CSS样式学习笔记『W3School』

    1.选择器+声明声明:属性+值eg:h1{color:red;font-size:14px;}颜色:p{color:#ff0000;}p{color:#f00;}p{color:rgb(255,0,0 ...

  7. makefile 进阶

    一步一步写一个简单通用的makefile(一) 一步一步写一个简单通用的makefile(二) 一步一步写一个简单通用的makefile(三) 一步一步写一个简单通用的makefile(四)

  8. ubuntu下安装maven

    下载maven http://maven.apache.org/download.cgi 解压 tar -xzvf apache-maven-3.0.5-bin.tar.gz 配置环境变量 sudo ...

  9. 基于TCP协议的服务器（多线程）

    import java.io.BufferedOutputStream; import java.io.BufferedReader; import java.io.IOException; impo ...

  10. 佛山Uber优步司机奖励政策（2月1日~2月7日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...