<!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. 安装mysql-connector-python

    安装mysql-connector-python 1.下载. wget http://dev.mysql.com/get/Downloads/Connector-Python/mysql-connec ...

  2. ActionBar在Android2.x的实现，类似新版微信界面。

    ActionBar完美兼容Android4.x的机型,虽然现在Android2.x的系统越来越少,还有有一部分人使用的仍是2.x的系统,所以我们还得考虑着兼容性问题. 对比图: Test例子与微信的对 ...

  3. Java系列：JVM指令详解（上）（zz）

    一.未归类系列A 此系列暂未归类. 指令码    助记符                            说明    59:iastore    60:lload 6       //因为str ...

  4. 《图解tcp/ip》读书笔记（一）

           我先讲三句话:        一."万物互联的时代到了."我们生活在这样一个互联网急速发展的时代,也许很快就会发现,你能接触到的一切都可以连接到互联网了,电脑.手机这 ...

  5. 开园子啦（浅谈移动端以及h5的发展）

    一.前言 一直以来都梦想着写几篇博客,忙于工作一直也没有抽出时间来写一下.看看大熊君.小v君等都在努力写博客,我这个不太善于言表的少年,也是在忍不住了.否则会被人家拉下更远.先简单介绍一下自己,目前我 ...

  6. [转]Extundelete--数据恢复软件

    前言 作为一名运维人员,保证数据的安全是根本职责,所以在维护系统的时候,要慎之又慎,但是有时难免会出现数据被误删除的情况,在这个时候该如何快速.有效地恢复数据显得至关重要,extundelete就是其 ...

  7. Android测试框架初步

    一.实验目的 1．掌握android测试项目的建立 2．掌握android测试框架的基本内容 3．编写运行android测试 二.实验内容与步骤 建立android项目MyProject,运行截图如下 ...

  8. sql 随机函数newid()

    newid()返回的是uniqueidentifier类型的唯一值.newid()每次产生的值都不一样 从表中随机获取前N条记录 select top N *  from table_name ord ...

  9. 世界上最小的发行版之一Tiny Core

    Tiny Core Linux不足之处驱动不给力 Tiny Core是一个简单的范例来说明核心项目可以提供什么.它提供了一个12MB的FLTK/FLWM桌面.用户对提供的程序和外加的硬件有完整的控制权 ...

  10. 利用NABC模型进行竞争性需求分析

    利用NABC模型进行竞争性需求分析:   1>N(Need 需求)   越来越多的,各式各样的游戏层出不穷,大的小的中等的都已经琳琅满目了,用户貌似都看不过眼了.现在大游戏费时伤神,当然了得在有 ...