两个我经常使用的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. 【Spring】Spring IOC原理及源码解析之scope=request、session

    一.容器 1. 容器 抛出一个议点:BeanFactory是IOC容器,而ApplicationContex则是Spring容器. 什么是容器?Collection和Container这两个单词都有存 ...

  2. 【HDOJ】4585 Shaolin

    Set可解,Treap也可解.(1) Treap /* */ #include <iostream> #include <string> #include <map> ...

  3. 【Node】fs

    var fs = require('fs') // fs 文件系统 var stdin = process.stdin var stdout = process.stdout var stats = ...

  4. 使用Eclipse构建GeoTools项目

    转自:http://hi.baidu.com/liushuigs/item/a62969e6667f9815585dd8b1 由于GeoTools是原本是使用Maven构建的,所以,不能直接将工程导入 ...

  5. poj 2932 Coneology（扫描线+set）

    Coneology Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 3574   Accepted: 680 Descript ...

  6. ACM2031_进制转换（使用了递归，代码超少的啦！！）

    进制转换 Problem Description 输入一个十进制数N,将它转换成R进制数输出.   Input 输入数据包含多个测试实例,每个测试实例包含两个整数N(32位整数)和R(2<=R& ...

  7. 【解决】小米M1刷机教程（卡刷）

    1.下载合适的rom 下载地址为:http://rom.xiaomi.cn/ 选择合适的机型.硬件版本.固件类.软件版本后,点击“搜索”后,下载合适版本即可. 2.备份 个人手机主要需要备份的项目如下 ...

  8. 如何设置textarea光标默认为第一行第一个字符

    判断文本区是否有内容,如果没有那么光标肯定是在第一行第一个为止的,记住,空格回车也算是有内容在的,也会影响光标的位置

  9. 解决SDK下载时速度过慢的问题

    1.打开android sdk manager 2.打开tool->options,如图所示 3.将Proxy Settings 里的HTTP Proxy Server和HTTP Proxy P ...

  10. TI-Davinci开发系列之二使用CCS5.2TI Simulator模拟环境调试DSP程序

    上接博文<TI-Davinci开发系列之一CCS5.2的安装及注意事项>. 如何没有实际的开发板或者仿真器,可以使用CCS自带的TISimulator来学习与熟悉CCS开发调试环境.下面是 ...