<html>

<head>

    <title>通用table样式</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>

        <tr>

            <td>3</td>

            <td>3</td>

            <td>3</td>

            <td>3</td>

            <td>3</td>

            <td>3</td>

            <td>3</td>

            <td>3</td>

        </tr>

        <tr class="alter">

            <td>4</td>

            <td>4</td>

            <td>4</td>

            <td>4</td>

            <td>4</td>

            <td>4</td>

            <td>4</td>

            <td>4</td>

        </tr>

    </table>

</body>

</html>

通用table样式的更多相关文章

  1. Jquery学习之路(二) 实现table样式的设定

    上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我 ...

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

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

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

    两个我经常使用的table样式: <html> <head> <title></title> <style type="text/css ...

  4. Table样式设置

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

  5. css table样式

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

  6. html 简单的table样式

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

  7. 好看的table样式

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

  8. 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; ...

  9. CSS div仿table样式

    要想让div元素显示的样式与table相同,那么需要使用display属性,这个属性将告诉浏览器这些数据是制表的,将以哪种样式来渲染数据: // table --使该元素按table样式渲染 // t ...

随机推荐

  1. ospf剩余笔记

    OSPF 流程图: 带宽 开销 10     100 100    19 1000   4 10000 2 区域的划分减少lsdb的大小 有利于网络管理员故障排除 网络故障不会影响到其他区域 邻接关系 ...

  2. unity中object 对象之间用c# delegate方式进行通信

    unity 3D经常需要设计到不同object之间数据通信和事件信息触发.这里可以利用C#本身的事件和代理的方法来实现. 这里实现了在GUI上点击按钮,触发事件,移动object cube移动的例子. ...

  3. JAVA基础第七组（5道题）

    31.题目:将一个数组逆序输出.              1.程序分析:用第一个与最后一个交换. package com.niit.homework1; /** * @author: Annie * ...

  4. 【Beta】Daily Scrum Meeting——Day6

    站立式会议照片 1.本次会议为第六次Meeting会议: 2.本次会议在早上9:35,在陆大楼召开,本次会议为30分钟讨论今天要完成的任务以及接下来的任务安排. 燃尽图 每个人的工作分配 成 员 昨天 ...

  5. 201521123033《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 参考资料: 百度脑图 XMind 2. 书面作业 作业参考文件下载 1.代码阅读:Child压缩包内源代码 1.1 com.p ...

  6. 201521123081《Java程序设计》 第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 参考资料:百度脑图(上图为第3周实验学习总结中未展开部分) 1.2 使用常规方法总结其他上课内容. 多态.思维导图中有提及. 2. ...

  7. 201521123065《Java程序设计》第1周学习总结

    1. 本周学习总结 java是门语言较为简单,并且可以在多种平台运行编译的语言. JDK是java开发工具,可以将源程序编译成字节码. JRE:java运行环境. JVM:虚拟机,是java实现多平台 ...

  8. 201521123066 《java程序设计》第一周学习总结

    本周学习总结 (1)学习了Java的跨平台运行是因为有虚拟机,其特点是具有简单性,结构中立. (2)老师使用了新的作业模式,要学会发现其中的优势并好好学习使用. 书面作业 (1)为什么java程序可以 ...

  9. JAVA课程设计-购物车 （201521123101 柏清晔）

    1.团队课程设计博客链接 /[团队博客链接]http://www.cnblogs.com/yayaya/p/7062197.html 2.个人负责模板或任务说明 1.连接数据库 2.修改购物车的jsp ...

  10. CentOS克隆机器步骤，图文教程

    在上一篇文章中,主要介绍了CentOS的装机步骤,这一篇文章主要介绍如何从一台装好的CentOS克隆出另一台机器,并且配置好网络. 首先被克隆的CentOS需要关机, 右键点击被克隆的CentOS-& ...