<!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>

<title>Spreadsheet form - www.codefans.net</title>

<style>

table.formdata {

 border: 1px solid #5F6F7E;

 border-collapse: collapse;

}

table.formdata th {

 border: 1px solid #5F6F7E;

 background-color: #E2E2E2;

 color: #000000;

 text-align: left;

 font-weight: normal;

 padding: 2px 4px 2px 4px;

 margin: 0;

}

table.formdata td {

 margin: 0;

 padding: 0;

 border: 1px solid #E2E2E2;

}

table.formdata input {

 width: 80px;

 padding: 2px 4px 2px 4px;

 margin: 0;

 border: 2px solid #ffffff;

}

.formdata input:focus {

 border: 2px solid #000000;

}

</style>

<script language="javascript" type="text/javascript">

function hilite(obj) {

 obj.style.border = '2px solid #000000';

} 

function delite(obj) {

 obj.style.border = '2px solid #ffffff';

}

</script>

</head>

<body>

<form method="post" action="spreadsheet.html">

<table class="formdata" summary="This table contains a form to input the yearly income for years 1999 through 2002">

  <caption>Complete the Yearly Income 1999 - 2002</caption>

  <tr>

    <th></th>

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

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

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

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

  </tr>

  <tr>

    <th scope="row">Grants</th>

    <td><input type="text" name="grants1999" id="grants1999" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="grants2000" id="grants2000" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="grants2001" id="grants2001" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="grants2002" id="grants2002" onfocus="hilite(this);" onblur="delite(this);" /></td>

  </tr>

  <tr>

    <th scope="row">Donations</th>

    <td><input type="text" name="donations1999" id="donations1999" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="donations2000" id="donations2000" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="donations2001" id="donations2001" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="donations2002" id="donations2002" onfocus="hilite(this);" onblur="delite(this);" /></td>

  </tr>

  <tr>

    <th scope="row">Investments</th>

    <td><input type="text" name="investments1999" id="investments1999" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="investments2000" id="investments2000" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="investments2001" id="investments2001" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="investments2002" id="investments2002" onfocus="hilite(this);" onblur="delite(this);" /></td>

  </tr>

  <tr>

    <th scope="row">Fundraising</th>

    <td><input type="text" name="fundraising1999" id="fundraising1999" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="fundraising2000" id="fundraising2000" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="fundraising2001" id="fundraising2001" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="fundraising2002" id="fundraising2002" onfocus="hilite(this);" onblur="delite(this);" /></td>

  </tr>

  <tr>

    <th scope="row">Sales</th>

    <td><input type="text" name="sales1999" id="sales1999" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="sales2000" id="sales2000" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="sales2001" id="sales2001" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="sales2002" id="sales2002" onfocus="hilite(this);" onblur="delite(this);" /></td>

  </tr>

  <tr>

    <th scope="row">Miscellaneous</th>

    <td><input type="text" name="misc1999" id="misc1999" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="misc2000" id="misc2000" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="misc2001" id="misc2001" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="misc2002" id="misc2002" onfocus="hilite(this);" onblur="delite(this);" /></td>

  </tr>

  <tr>

    <th scope="row">Total</th>

    <td><input type="text" name="total1999" id="total1999" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="total2000" id="total2000" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="total2001" id="total2001" onfocus="hilite(this);" onblur="delite(this);" /></td>

    <td><input type="text" name="total2002" id="total2002" onfocus="hilite(this);" onblur="delite(this);" /></td>

  </tr>

</table>

<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" /></p>

</form>

</body>

</html>

CSS 仿Excel表格功能的更多相关文章

  1. 浏览器仿EXCEL表格插件 - 智表ZCELL产品V1.4发布

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  2. 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.2更新

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  3. 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3发布

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  4. Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格

    目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...

  5. 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.1更新

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  6. Spring Boot：添加导出Excel表格功能

    1.添加POI依赖 2.创建EXCEL实体类 3.创建表格工具类 4.创建ExcelConstant 5.创建ExcelController 1.添加POI依赖 <dependency> ...

  7. C#导入Excel表格功能aspx.cs（代码）

    using System; using System.Data; using System.Configuration; using System.Collections; using System. ...

  8. 网页版仿Excel效果组件--handsontable拓展运用

    引言(祝看官们新年万事大吉) 前段时间项目需要实现网页版的excel表格功能,瞬间就想到了handsontable,为什么呢?理由如下:该UI组件功能齐全多样,展示效果也更贴近bootstrap风格, ...

  9. 个人永久性免费-Excel催化剂功能第90波-xml与json数据结构转换表格结构

    在网络时代,大量的数据交互以xml和json格式提供,特别是系统间的数据交互和网络WebAPI.WebService接口的数据提供,都是通过结构化的xml或json提供给其他应用调用返回数据.若能提供 ...

随机推荐

  1. Python基础 - 获取N天前的日期

    获取今天前第N天的日期 from datetime import datetime from datetime import timedelta def get_date(days=N): retur ...

  2. php基础22：上传并且保存文件

    <?php /* 文件上传的限制 && 保存被上传的文件 在这个脚本中,我们增加了对文件上传的限制.用户只能上传 .gif 或 .jpeg 文件,文件大小必须小于 20 kb: ...

  3. 关于错误提示：此实现不是 Windows 平台 FIPS 验证的加密算法的一部分的解决方案

    vs上的一个项目,弄了一个aes加密算法.提示说:调用的目标异常.此实现不是 Windows 平台 FIPS 验证的加密算法的一部分.弄了好久一直不行.解决不了.最后找了半天资料终于解决了.估计下来. ...

  4. UI设计师零基础入门到精通精品视频教程【155课高清完整版】

    [福吧资源网分享]课程是非常完整的,也是非常零基础的,适合任何学员,有需要的可以下载看看!课程目录:第1章 Adobe Photoshop CS6课时1 Adobe Photoshop CS6入门基础 ...

  5. LeetCode 笔记24 Palindrome Partitioning II (智商碾压)

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  6. survival analysis 生存分析与R 语言示例 入门篇

    原创博客,未经允许,不得转载. 生存分析,survival analysis,顾名思义是用来研究个体的存活概率与时间的关系.例如研究病人感染了病毒后,多长时间会死亡:工作的机器多长时间会发生崩溃等. ...

  7. virtualbox 打不开ubuntu解决

    装了一个win7x64,准备打开ubuntu12.04,后来竟然报错(最新版的virtualbox,VirtualBox-4.3.18-96516-Win): 也没找到什么原因,网上查了之后,禁用了w ...

  8. Scala学习笔记（六）：Scala程序

    想要编写能够独立运行的Scala程序,就必须创建有main方法(仅带一个参数Array[String],且结果类型为Unit)的单例对象. 任何拥有合适签名的main方法的单例对象都可以用来作为程序的 ...

  9. mysql使用基础 sql语句与数据完整性(二)

    二.DML:Data Manipulation Language 数据操作语言 作用:操作表中的数据的. 关键:INSERT UPDATE DELETE 注意:日期或字符串.字符要使用单引号引起来. ...

  10. Object C学习笔记14-分类(category)

    在.NET中有一个非常带劲的特性,那就是扩展方法. 扩展方法使你能够向现有类型“添加”方法(包括你自定义的类型和对象噢),而无需创建新的派生类型.重新编译或以其他方式修改原始类型.扩展方法是一种特殊的 ...