两个我经常使用的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. Navigation Drawer介绍

    在2013 google IO当天,Android团的更新了Support库,新版本(V13)的Support库中新加入了几个比较重要的功能. 添加 DrawerLayout 控件,支持创建  Nav ...

  2. hdu4435 charge-station（先建后拆+bfs）

    charge-station Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  3. css全局设置

      /***** 全局设置 *****/ body,h1,h2,h3,h4,h5,h6,p,form,ul,ol,li,dt,dl,dd,th,td,label,bottom,input,textar ...

  4. centos6.5 无线网卡配置

    来自:http://liqirui.blog.51cto.com/4662702/1344877         http://wiki.centos.org/zh/HowTos/Laptops/Wp ...

  5. String 类；Math 类；

    static void Main(string[] args)        {            while (true)            {               /* strin ...

  6. bzoj2125 3047

    仙人掌上的最短路,这里有详细的题解http://pan.baidu.com/s/1wzCpC我觉得讲的很清楚,不懂的见代码注释吧 type node=record po,next,num:longin ...

  7. [C# 网络编程系列]专题七：UDP编程补充——UDP广播程序的实现

    转自:http://www.cnblogs.com/zhili/archive/2012/09/03/2666974.html 上次因为时间的关系,所以把上一个专题遗留下的一个问题在本专题中和大家分享 ...

  8. （转载）JavaScript中的原型和对象机制

    (转载)http://www.cnblogs.com/FlyingCat/archive/2009/09/21/1570656.html 1 对象相关的一些语言特性 1.1 一切皆为对象JavaScr ...

  9. Excel和XML文件导入

    using System;using System.Collections;using System.Collections.Generic;using System.Configuration;us ...

  10. java 判断字符串是否为乱码

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class MessyCodeCheck { public ...