<!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. C++创建对象的两种方式

    C++创建对象有两种方式,在栈上创建对象(Objects on the Stack)和在堆上创建对象(Objects on the Heap). 假设我们有以下的类: #include <str ...

  2. JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

    JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...

  3. 对SharePreference的封装

    今天需要用到SharePreference来保存一些设置参数,因为要用到很多次 所以对它进行了封装: public class PrefUtils { public static void putBo ...

  4. lumia 520无法开机

    拿出尘封已久的lumia 520,发现其开机困难,现象如下: 1.拿掉电池再放回去有几率开机 2.轻轻地用手机砸向桌面时手机会重启 因为手机在更新WP8.1之后就出问题了,所以先得定位问题,在黑屏的时 ...

  5. 看牙与IT项目

    周末为了一颗牙第五次去牙科诊所,得到的消息是:还需要观察至少2周才能做牙冠,同时发现了较深的牙结石需要做刮治,刮治疗需要2次.因此至少要再去医院3次.从去年的六月体检发现这颗牙的问题,目前最乐观估计也 ...

  6. 由外边距合并到BFC

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

  7. 『开源』Slithice 2013 服务器集群 设计和源码

    相关介绍文章: <『设计』Slithice 分布式架构设计-支持一体式开发,分布式发布> <『集群』001 Slithice 服务器集群 概述> <『集群』002 Sli ...

  8. [C#基础]Func和Action学习

    目录 委托 Action Func 总结 委托 委托的那些事 关于委托的基本定义,在很久之前的这篇文章中,有个简单的介绍.稍微回顾一下. 委托是c#中类型安全的,可以订阅一个或多个具有相同签名方法的函 ...

  9. 第五章：javascript：队列

    队列是一种列表,不同的是队列只能在末尾插入元素,在队首删除元素.队列用于存储按顺序排列的数据.先进先出.这点和栈不一样,在栈中,最后入栈的元素反被优先处理.可以将队列想象成银行排队办理业务的人,排队在 ...

  10. angular的canvas画图例子

    angular的例子: <!DOCTYPE html> <html ng-app="APP"> <head> <meta charset= ...