两个我经常使用的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. 如何实现Android重启应用程序代码 ?

    Intent i = getBaseContext().getPackageManager()  .getLaunchIntentForPackage(getBaseContext().getPack ...

  2. ARC模式下的单例写法

    // 单例 + (id)sharedInstance { __strong static id sharedObject = nil; static dispatch_once_t onceToken ...

  3. SQL Server 2005 To Oracle

    近期因为项目需要,将SQLServer2005转成Oracle 在这里介绍下转换步骤: 1. 准备好你要转换的数据,如图 2. 右键单击 任务/导出数据,如图 3. 执行完之后就打开选择数据源页面,填 ...

  4. Git push 时每次都需要密码的疑惑

    2015.1.13更新: 在本地搭建Git服务器时,也是有每次操作需要密码的情况. 是因为每次做推送动作时,Git需要认证你是好人.所以需要密码. 可以在 /home/username/.ssh/au ...

  5. usaco 打扫食槽

    Description 从前奶牛是不挑食的,但现在世道变了,她们变得非常挑剔.牧场里有N头奶牛,约翰 要向她们提供M种食物,第i头奶牛只会吃Pi号食物. 约翰每天都要打扫食槽,这件事非常累.奶牛沿着食 ...

  6. hdoj 3952 World Exhibition

    World Exhibition Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  7. android4.0 FaceDetection笔记

    这几天研究了下andoid4.0.3的FaceDetection这里写一下大致的流程,方便日后查阅. 相关说明可以在这里找到: frameworks/base/docs/html/guide/topi ...

  8. linux下avr单片机开发：中断服务程序

    不管是什么单片机程序,中断总是非常重要的一部分 ,linux 下的avr开发,主要是依靠avr-gcc,以及avr-libc,它们对中断程序的格式要求,与window下的icc-avr以及win-av ...

  9. cocos2d-x 关于opengl version too old 问题解决办法

    转载请注明出处 http://blog.csdn.net/u010229677/article/details/9704961 今天cocos2d-x突然出现这个对话框,去国外论坛找的解决办法.折腾许 ...

  10. return 和 exit

    此篇文不会阐述具体的原理,而是只记录实际应用如何避免一些问题 在<C语言程序设计-现代方法>第9.5章节中有这样一段说明, return语句和exit函数之间的差异是:不管哪个函数调用ex ...