<!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. Android Fragment 完全解析

    参考文章:http://blog.csdn.net/guolin_blog/article/details/8881711 http://blog.csdn.net/guolin_blog/artic ...

  2. iBatis.Net（C#）SQL数据映射

    转载请注明 http://www.cnblogs.com/13590/archive/2013/03/01/2938126.html 摘要:本文探讨了iBatis.Net框架的XML数据映射文件各配置 ...

  3. 在matlab中进行地理坐标和像素坐标的相互转换

    clc;close all;clear; %地理坐标和像素坐标的相互转换 [pic,R]=geotiffread('boston.tif'); %读取带地理坐标信息的tif影像 [m,n,~]=siz ...

  4. 解答WPF中ComboBox SelectedItem Binding不上的Bug

    正在做一个打印机列表,从中选择一个打印机(System.Printing) <ComboBox Width="150" ItemsSource="{Binding ...

  5. 数据挖掘系列（4）使用weka做关联规则挖掘

    前面几篇介绍了关联规则的一些基本概念和两个基本算法,但实际在商业应用中,写算法反而比较少,理解数据,把握数据,利用工具才是重要的,前面的基础篇是对算法的理解,这篇将介绍开源利用数据挖掘工具weka进行 ...

  6. Ajax基础详解2

    沐晴又来更新啦,话说我们上回讲到Ajax中open方法的第三个参数异步和同步的问题,今天呢,就来继续往下唠,先接着上回的代码 var oBtn = document.getElementById('b ...

  7. Linq之Expression高级篇（常用表达式类型）

    目录 写在前面 系列文章 变量表达式 常量表达式 条件表达式 赋值表达式 二元运算符表达式 一元运算符表达式 循环表达式 块表达式 总结 写在前面 首先回顾一下上篇文章的内容,上篇文章介绍了表达式树的 ...

  8. AngularJS - 路由入门

    我们有很多方法让一个视图随着用户的操作进行变化. 但是,只是单单一个视图就要满足所有的需求会让代码变得非常复杂. 也许我们可以使用ng-include来引用各种模板,但这只限于部分场景. 于是我们可以 ...

  9. Linux下svn命令详解

    本文主要是说明linux下svn命令的使用方法,同时记录自己在使用中遇到的一些疑惑. 1.Linux命令行下将文件checkout到本地目录 svn checkout url(url是服务器上的目录) ...

  10. “耐撕”团队 2016.03.30 站立会议

    1. 时间: 16:45--17:05  总计:20分钟 2. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:ht ...