html部分，biaoge.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Top 10 Express Table Designs - Smashing Magazine Source</title>
  6. <style type="text/css">
  7. <!--
  8. @import url("style.css");
  9. -->
  10. </style>
  11. </head>
  12. <body>
  13. <table id="background-image" summary="Meeting Results">
  14.     <thead>
  15.         <tr>
  16.             <th scope="col">Employee</th>
  17.             <th scope="col">Division</th>
  18.             <th scope="col">Suggestions</th>
  19.  
  20.         </tr>
  21.     </thead>
  22.     <tfoot>
  23.         <tr>
  24.             <td colspan="4">IE 6 users won't see the transparent background if the hack is not applied</td>
  25.         </tr>
  26.     </tfoot>
  27.     <tbody>
  28.         <tr>
  29.             <td>Stephen C. Cox</td>
  30.             <td>Marketing</td>
  31.             <td>Make discount offers</td>
  32.         </tr>
  33.         <tr>
  34.             <td>Josephin Tan</td>
  35.             <td>Advertising</td>
  36.             <td>Give bonuses</td>
  37.         </tr>
  38.         <tr>
  39.             <td>Joyce Ming</td>
  40.             <td>Marketing</td>
  41.             <td>New designs</td>
  42.         </tr>
  43.         <tr>
  44.             <td>James A. Pentel</td>
  45.             <td>Marketing</td>
  46.             <td>Better Packaging</td>
  47.         </tr>
  48.     </tbody>
  49. </table>
  50.  
  51. </body>
  52. </html>

css部分，style.css

  1. /* ------------------
  2.  styling for the tables
  3.    ------------------   */
  4.  
  5. body
  6. {
  7.     line-height: 1.6em;
  8. }
  9.  
  10. #background-image
  11. {
  12.     font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  13.     font-size: 12px;
  14.     margin: 45px;
  15.     width: 480px;
  16.     text-align: left;
  17.     border-collapse: collapse;
  18.     background: url('table-images/blurry.jpg') 330px 59px no-repeat;
  19. }
  20. #background-image th
  21. {
  22.     padding: 12px;
  23.     font-weight: normal;
  24.     font-size: 14px;
  25.     color: #339;
  26. }
  27. #background-image td
  28. {
  29.     padding: 9px 12px;
  30.     color: #669;
  31.     border-top: 1px solid #fff;
  32. }
  33. #background-image tfoot td
  34. {
  35.     font-size: 11px;
  36. }
  37. #background-image tbody td
  38. {
  39.     background: url('table-images/back.png');
  40. }
  41. * html #background-image tbody td
  42. {
  43.     /*
  44.        ----------------------------
  45.         PUT THIS ON IE6 ONLY STYLE
  46.         AS THE RULE INVALIDATES
  47.         YOUR STYLESHEET
  48.        ----------------------------
  49.     */
  50.     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='table-images/back.png',sizingMethod='crop');
  51.     background: none;
  52. }
  53. #background-image tbody tr:hover td
  54. {
  55.     color: #339;
  56.     background: none;
  57. }

效果图

html表格设计的更多相关文章

  1. opencv 手写选择题阅卷 (一)表格设计与识别

    (一)答题表格设计与识别 实际设计好的表格如下图 为了图像精确,表格和四角的标记都是由程序生成的,文字和数据是后期排版软件添加上去的. 图中四角的四个黑方块主要用来定位表格,然后就可以切割出每个单元格 ...

  2. 如何用BarTender 2016字处理器完成表格设计

    很多时候,需要应客户要求,用BarTender 2016设计带表格的标签.在BarTender 2016中字处理器文本对象可以使用字处理中的诸多格式功能(如项目符号.编号列表.表格.混合字体以及RTF ...

  3. HBase概念及表格设计

    HBase概念及表格设计 1. 概述(扯淡~) HBase是一帮家伙看了Google发布的一片名为“BigTable”的论文以后,犹如醍醐灌顶,进而“山寨”出来的一套系统. 由此可见: 1. 几乎所有 ...

  4. SSAS 多维/表格设计模型--事实表与维表的关联

    表格设计模型中,同多维设计模型相似, 维表和事实表相互独立,通过关系数据库中的外键来联系,互相关联构成一个统一的架构. DB中外键是需要唯一性约束的,即A表某列建立主键或者唯一键后,B表才可以引用为外 ...

  5. PowerDesigner之SQL表格设计

    设计表格我觉得用PowerDesigner比起在SQL Server中设计表格简单快捷许多. 首先,我们新建一个Model(可以使用快捷键Ctrl + N) 在PowerDesigner中侧边栏有浮动 ...

  6. SSM项目开发中的实体定义以及MySQL表格设计

    话不多说,下面表格是项目开发中用到的实体集以及表格Name 实体创建     表格创建 Area 区域 Area 实体 areaId areaName priority createTime last ...

  7. WIKI常用的表格设计模板

    域名服务器管理表格     数据库管理表格     软件路径说明表格   开发测试环境虚拟机表格        

  8. Hbase表格设计

    Rowkey设计 Region: 基于RowKey的分区,可理解成MySQL的水平切分. 每个Region Server就是Hadoop集群中一台机器上的一个进程. 比如我们的有1-300号的RowK ...

  9. mariadb数据库的链接查询和表格设计

    链接查询 练习准备: --创建学生表 create table students ( id int unsigned not null auto_increment primary key, name ...

  10. 基于JavaScript的表格设计：按序添加或删除班级的学生信息

    目的: 制作一个表格,显示班级的学生信息 功能: 鼠标移到不同行,背景色发生改变,离开恢复原背景色 添加.删除按钮,可添加,可删除. 程序流程: 首先先建立绑定事件函数. 其次建立鼠标移动改变背景色函 ...

随机推荐

  1. 朴素贝叶斯python实现

    概率论是非常多机器学习算法基础,朴素贝叶斯分类器之所以称为朴素,是由于整个形式化过程中仅仅做最原始.简单的如果. (这个如果:问题中有非常多特征,我们简单如果一个个特征是独立的.该如果称做条件独立性, ...

  2. Android自己定义控件系列三：自己定义开关button（二）

    接上一篇自己定义开关button(一)的内容继续.上一次实现了一个开关button的基本功能.即自己定义了一个控件.开关button,实现了点击切换开关状态的功能.今天我们想在此基础之上.进一步实现触 ...

  3. Swift-UITextField用法

    文本框的创建,如下几种方式: UITextBorderStyle.None:无边框 UITextBorderStyle.Line:直线边框 UITextBorderStyle.RoundedRect: ...

  4. 类扩展和category的小区别

    类扩展可以给类声明新的变量(属性),但是方法的实现只能在.m中实现 category可以给类声明新的方法实例,但是不可以添加变量(属性)

  5. BZOJ 2427 /HAOI 2010 软件安装 tarjan缩点+树形DP

    终于是道中文题了.... 当时考试的时候就考的这道题.... 果断GG. 思路: 因为有可能存在依赖环,所以呢 先要tarjan一遍 来缩点. 随后就进行一遍树形DP就好了.. x表示当前的节点.j表 ...

  6. 利用jqueryzoom实现图片放大镜效果

    在你的页面中包含 jqzoom.css <link rel="stylesheet" href="your_path/jqzoom.css" type=& ...

  7. T7316 yyy的最大公约数(者)

    题目背景 全场基本暴力 题目描述 输入输出格式 输入格式: 如图 输出格式: 如图 输入输出样例 输入样例#1: 如图 输出样例#1: 如图 说明 如图 这题用到了容斥原理和线性筛的一些东西, 表示没 ...

  8. indexOf实际试用方法

    用于搜索和查找关键字个数或者位置 例如: package zifu; public class tianqi { public static void main (String args[]){ St ...

  9. Unity 烘焙的2种方式

    游戏场景通常有许多光源,使用实时渲染会非常消耗性能,解决办法是烘焙,烘焙有2种方式. 1, 在3dmax等模型制作软件中对场景进行烘焙.将烘焙好的模型以及贴图导入到unity3d. 相对复杂但效果好 ...

  10. java容器基础

    总结一下学过的java容器知识. 一.java容器框架 由于之前学习的java容器类比较混乱,先简单的整理一下java集合框架. 首先,像这种图,网上到处都是,因为这个也算比较准确吧,我也懒得自己画了 ...