html表格设计
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表格设计的更多相关文章
- opencv 手写选择题阅卷 (一)表格设计与识别
(一)答题表格设计与识别 实际设计好的表格如下图 为了图像精确,表格和四角的标记都是由程序生成的,文字和数据是后期排版软件添加上去的. 图中四角的四个黑方块主要用来定位表格,然后就可以切割出每个单元格 ...
- 如何用BarTender 2016字处理器完成表格设计
很多时候,需要应客户要求,用BarTender 2016设计带表格的标签.在BarTender 2016中字处理器文本对象可以使用字处理中的诸多格式功能(如项目符号.编号列表.表格.混合字体以及RTF ...
- HBase概念及表格设计
HBase概念及表格设计 1. 概述(扯淡~) HBase是一帮家伙看了Google发布的一片名为“BigTable”的论文以后,犹如醍醐灌顶,进而“山寨”出来的一套系统. 由此可见: 1. 几乎所有 ...
- SSAS 多维/表格设计模型--事实表与维表的关联
表格设计模型中,同多维设计模型相似, 维表和事实表相互独立,通过关系数据库中的外键来联系,互相关联构成一个统一的架构. DB中外键是需要唯一性约束的,即A表某列建立主键或者唯一键后,B表才可以引用为外 ...
- PowerDesigner之SQL表格设计
设计表格我觉得用PowerDesigner比起在SQL Server中设计表格简单快捷许多. 首先,我们新建一个Model(可以使用快捷键Ctrl + N) 在PowerDesigner中侧边栏有浮动 ...
- SSM项目开发中的实体定义以及MySQL表格设计
话不多说,下面表格是项目开发中用到的实体集以及表格Name 实体创建 表格创建 Area 区域 Area 实体 areaId areaName priority createTime last ...
- WIKI常用的表格设计模板
域名服务器管理表格 数据库管理表格 软件路径说明表格 开发测试环境虚拟机表格
- Hbase表格设计
Rowkey设计 Region: 基于RowKey的分区,可理解成MySQL的水平切分. 每个Region Server就是Hadoop集群中一台机器上的一个进程. 比如我们的有1-300号的RowK ...
- mariadb数据库的链接查询和表格设计
链接查询 练习准备: --创建学生表 create table students ( id int unsigned not null auto_increment primary key, name ...
- 基于JavaScript的表格设计：按序添加或删除班级的学生信息
目的: 制作一个表格,显示班级的学生信息 功能: 鼠标移到不同行,背景色发生改变,离开恢复原背景色 添加.删除按钮,可添加,可删除. 程序流程: 首先先建立绑定事件函数. 其次建立鼠标移动改变背景色函 ...
随机推荐
- CDH使用秘籍（一）：Cloudera Manager和Managed Service的数据库
背景 从业务发展需求,大数据平台须要使用spark作为机器学习.数据挖掘.实时计算等工作,所以决定使用Cloudera Manager5.2.0版本号和CDH5. 曾经搭建过Cloudera Mana ...
- unity3D游戏开发实战原创视频讲座系列9之塔防类游戏开发第一季
解说文件夹 塔防游戏0基础篇... 第一讲 游戏演示和资源介绍... 第二讲 游戏场景的完毕... 第三讲 预制体的制作... 第四讲 敌人的随机产生和按路径行走... 第五讲 塔防工具的产 ...
- nginx报 File not found 错误
原因可能非常多,但对于刚開始学习的人.大部分应该是/etc/nginx/conf.d/default.conf里面的php解析部分配置不正确. 解决的话就是把root定义.在server下加上,这样r ...
- h5-注册
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWYAAAIpCAIAAAAeogVlAAAgAElEQVR4nOy9W1gb6Z3/OTd7s9d7t8 ...
- NSKeyedArchiver
如果对象是NSString.NSDictionary.NSArray.NSData.NSNumber等类型,可以直接用NSKeyedArchiver进行归档和恢复 不是所有的对象都可以直接用这种方法进 ...
- PHP substr() 函数截取中文字符串乱码
用PHP substr() 函数截取中文字符串乱码,换PHPmb_substr() 函数即可
- [转]Linux+XAMPP+eolinker开源版v3.2.4
eolinker是一个由国人开源的接口管理系统(AMS),特性及介绍详见开源中国-eolinker首页. 搭建步骤参考:eolinker开源指南 系统环境:CentOS Linux release 7 ...
- hive2.0函数大全
Hive2.0函数大全(中文版) 摘要 Hive内部提供了很多函数给开发者使用,包括数学函数,类型转换函数,条件函数,字符函数,聚合函数,表生成函数等等,这些函数都统称为内置函数. 目录 数学函数 ...
- 欢迎来到Flask的世界
不多说,直接上文档链接:Flask的文档 教程 API 快速上手
- Building Block[HDU2818]
Building Block Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...