html部分，biaoge.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Top 10 Express Table Designs - Smashing Magazine Source</title>

<style type="text/css">

<!--

@import url("style.css");

-->

</style>

</head>

<body>

<table id="background-image" summary="Meeting Results">

    <thead>

        <tr>

            <th scope="col">Employee</th>

            <th scope="col">Division</th>

            <th scope="col">Suggestions</th>

        </tr>

    </thead>

    <tfoot>

        <tr>

            <td colspan="4">IE 6 users won't see the transparent background if the hack is not applied</td>

        </tr>

    </tfoot>

    <tbody>

        <tr>

            <td>Stephen C. Cox</td>

            <td>Marketing</td>

            <td>Make discount offers</td>

        </tr>

        <tr>

            <td>Josephin Tan</td>

            <td>Advertising</td>

            <td>Give bonuses</td>

        </tr>

        <tr>

            <td>Joyce Ming</td>

            <td>Marketing</td>

            <td>New designs</td>

        </tr>

        <tr>

            <td>James A. Pentel</td>

            <td>Marketing</td>

            <td>Better Packaging</td>

        </tr>

    </tbody>

</table>

</body>

</html>

css部分，style.css

/* ------------------

 styling for the tables

   ------------------   */

body

{

    line-height: 1.6em;

}

#background-image

{

    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;

    font-size: 12px;

    margin: 45px;

    width: 480px;

    text-align: left;

    border-collapse: collapse;

    background: url('table-images/blurry.jpg') 330px 59px no-repeat;

}

#background-image th

{

    padding: 12px;

    font-weight: normal;

    font-size: 14px;

    color: #339;

}

#background-image td

{

    padding: 9px 12px;

    color: #669;

    border-top: 1px solid #fff;

}

#background-image tfoot td

{

    font-size: 11px;

}

#background-image tbody td

{

    background: url('table-images/back.png');

}

* html #background-image tbody td

{

    /*

       ----------------------------

        PUT THIS ON IE6 ONLY STYLE

        AS THE RULE INVALIDATES

        YOUR STYLESHEET

       ----------------------------

    */

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='table-images/back.png',sizingMethod='crop');

    background: none;

}

#background-image tbody tr:hover td

{

    color: #339;

    background: none;

}

效果图

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的range()函数使用方法

    python的range()函数使用非常方便.它能返回一系列连续添加的整数,它的工作方式类似于分片.能够生成一个列表对象. range函数大多数时常出如今for循环中.在for循环中可做为索引使用.事 ...

  2. Rose2003执行出现 -2147417848 (80010108)&#39;:Automation 错误

    上篇博客在结尾的时候.我提到了Ration Rose2003执行出现"-2147417848 (80010108)':Automation错误"的问题.今天这篇博客就来介绍一下怎样 ...

  3. ssh tunnel 上网

    用DNS隧道实现免费上网 大多数机场.酒店之类场所,当你输入一个网址比如www.google.com时,会弹出一个页面要你输入帐号密码才能上网.这个时候DNS能正确解析,但是上网要付费认证. 可以通过 ...

  4. yarn架构——本质上是在做解耦 将资源分配和应用程序状态监控两个功能职责分离为RM和AM

    Hadoop YARN架构解读 原Mapreduce架构 原理架构图如下: 图 1.Hadoop 原 MapReduce 架构 原 MapReduce 程序的流程:首先用户程序 (JobClient) ...

  5. [SCOI 2007] 排列

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1072 [算法] 状压DP [代码] #include<bits/stdc++. ...

  6. ORACLE RAC 11G 添加以及删除UNDO表空间

    在生产环境上,由于闪存盘的容量有限,现在需要将闪存盘里面的UNDO表空间,替换到非闪存的磁盘里面. 磁盘的使用情况如下: 表空间使用情况如下: RAC两个节点占用将近167G的空间. 操作步骤如下: ...

  7. Spark SQL 编程API入门系列之SparkSQL数据源

    不多说,直接上干货! SparkSQL数据源:从各种数据源创建DataFrame 因为 spark sql,dataframe,datasets 都是共用 spark sql 这个库的,三者共享同样的 ...

  8. 【摘录】JAVA内存管理-有关垃圾收集的关键参数

    第八章 有关垃圾收集的关键参数 一些命令行参数可以用来选择垃圾收集器,指定堆或代的大小,修改垃圾收集行为,获取垃圾收集统计数据.本章给出一些最常用的参数.有关各种各样参数更多完整的列表和详细信息可以参 ...

  9. 织梦Fatal error: Call to a member function GetInnerText()

    问题:织梦修改或者添加了自定义表单后在后台修改文章的时候出现如下错误:Fatal error: Call to a member function GetInnerText() on a non-ob ...

  10. The German Collegiate Programming Contest 2017

    B - Building 给一个m各面的多边形柱体,每一侧面有n*n个格子,现在对这些格子染色,看有多少种方式使得多面柱体无论如何旋转都不会与另一个一样. #include <bits/stdc ...