`

CSS直接输入的Excel表格

阅读更多
HTML Excel表格可以直接输入。。。


--------------------------------
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=gb2312" />
<title>无标题文档</title>
<style>
table.formdata{
border:1px solid #5F6F7E;
border-collapse:collapse;
font-family:Arial;
}

table.formdata caption{
text-align:left;
padding-bottom:6px;
}

table.formdata th{
border:1px solid #5F6F7E;
background-color:#E2E2E2;
color:#000000px;
text-align:left;
font-weight:normal;
padding:2px 8px 2px 6px;
margin:0px;
}

table.formdata td{
margin:0px;
padding:0px;
border:1px solid #ABABAB;
}

table.formdata input{
width:100px;
padding:1px 3px 1px 3px;
margin:0px;
border:none;
font-family:Arial;
}
</style>
</head>

<body>
<form method="post">
	<table class="formdata">
		<caption>公司销售统计表</caption>
		<tr>
			<th></th>
			<th scope="col">2004</th>
			<th scope="col">2005</th>
			<th scope="col">2006</th>
			<th scope="col">2007</th>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
		
		<tr>
			<th>硬盘</th>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
			<td><input type="text" name="harddisk2004" id="harddisk2004"/></td>
		</tr>
	</table>
</form>
</body>
</html>

  • 大小: 72.5 KB
分享到:
评论
10 楼 風一樣的男子 2010-07-05  
就是做成 excel 样式
9 楼 softrain 2010-07-05  
太多input,考虑只在鼠标移动到一个单元格的时候显示一个input
8 楼 gagaboy 2010-07-05  
我这边IE6无法显示~~
兼容性有问题~~
7 楼 cnyangqi 2010-07-04  
<input type="text"。。。
这个就是excel的输入框哇。。。
6 楼 yunduanyucan 2010-07-03  
自己操作一下就明白楼主的意思了
5 楼 nearboy 2010-07-03  
连人家的成品 都看不懂,你们还能不能干点 事业了!
4 楼 dumbness 2010-07-03  
就是利用css样式把table渲染成excel的样子
3 楼 davepkxxx 2010-07-03  
同样没看懂
2 楼 esanone 2010-07-03  
我也是,没看懂.
1 楼 gengv 2010-07-01  
没看懂,什么意思?

相关推荐

    JavaScript仿Excel表格演示

    在JavaScript编程领域,实现仿Excel表格的功能是一项常见的需求,尤其对于网页端的数据处理和展示。JavaScript仿Excel表格演示提供了一种高效且灵活的方法,让用户在浏览器环境中享受到类似于Microsoft Excel的操作...

    jQuery仿Excel表格列表排序代码

    **jQuery仿Excel表格列表排序代码**是一种在网页中实现类似Excel表格功能的技术,它允许用户对数据进行排序、检索和筛选,提供了丰富的交互体验。在Web开发中,jQuery库因其简洁的API和强大的功能而被广泛应用,对于...

    仿excel的web表格输入控件

    在Web开发中,为了实现类似Excel的功能,常常需要使用一种称为"仿Excel的web表格输入控件"。这种控件允许用户在网页上进行类似电子表格的数据编辑,提供丰富的交互性和数据处理能力。本文将详细讲解此类控件的核心...

    div+css制作表格

    ### 使用div+CSS实现类似Excel的表格功能 在网页设计中,使用`div+CSS`来构建表格是一种灵活且响应式的设计方式。这种方式不仅能够帮助我们创建出与传统`&lt;table&gt;`标签相似的布局效果,还能更好地控制表格的样式、...

    jQuery仿Excel表格排序筛选代码.zip

    《jQuery仿Excel表格排序筛选代码实现详解》 在网页开发中,模拟Excel表格的功能,如排序和筛选,能够极大地提高用户交互体验。本篇文章将详细解析"jQuery仿Excel表格排序筛选代码",帮助开发者理解其背后的实现...

    CSS设置表格和表单样式PPT课件.pptx

    本资源为一份关于 CSS 设置表格和表单样式的 PPT 课件,共 6 页,涵盖了控制表格、表格实例一:隔行变色、CSS 与表单、直接输入的 Excel 表格等内容。 第六课:CSS 设置表格和表单样式 在本课中,我们将学习如何...

    适用于Vue的可编辑的表格组件支持多种快捷键操作模拟Excel的操作体验

    2. **可编辑单元格**:组件提供了可编辑的单元格功能,用户可以直接在表格中输入或修改数据,增强了交互性。 3. **快捷键支持**:模拟Excel的快捷键操作,如Ctrl+C(复制)、Ctrl+V(粘贴)、Ctrl+Z(撤销)、Ctrl+...

    原生js在线编辑excel表格代码.zip

    【标题】"原生js在线编辑excel表格代码.zip"是一个包含使用纯JavaScript实现的在线Excel表格编辑功能的代码资源。这个代码库可能旨在提供一种无需依赖外部库(如jQuery)或者服务器端处理的方式,让用户在浏览器中...

    jquery实现类Excel表格

    Handsontable的灵活性和强大功能使其成为Web应用中实现类Excel表格的理想选择。无论是在企业级应用还是个人项目中,都能显著提高数据处理的效率,减少大量的开发工作。通过深入学习和实践,我们可以充分利用这个...

    Ext 模仿Excel电子表格

    标题 "Ext 模仿Excel电子表格" 暗示了我们将在讨论如何使用Ext JS库创建一个类似Excel的功能丰富的Web应用程序。Ext JS是一个强大的JavaScript框架,用于构建富客户端的Web应用,它提供了丰富的组件和数据绑定机制,...

    excel可修改表格.zip

    标题中的“excel可修改表格.zip”表明这是一个关于创建或模拟Excel表格,并且用户可以进行编辑的JavaScript和jQuery实现的示例。这个压缩包可能包含一个或多个HTML、CSS和JavaScript文件,用于展示如何使用这些技术...

    Excel样式表格单元格选择jQuery插件

    本文将深入探讨“Excel样式表格单元格选择jQuery插件”的相关知识点,帮助开发者实现类似Excel的交互体验。 一、jQuery基础 在理解这个插件之前,我们首先要了解jQuery的基本概念。jQuery是由John Resig开发的,它...

    jQuery实现的网页版excel表格可编辑创建特效源码.zip

    《jQuery实现的网页版Excel表格可编辑创建特效源码解析》 在当今互联网应用中,数据展示和编辑的效率至关重要,而将Excel的功能融入网页,可以让用户在浏览器中享受到类似Excel的操作体验,大大提升了交互性。...

    jQuery实现简易版的Excel表格功能插件特效源码.zip

    在本项目中,我们关注的是一个使用jQuery库实现的简易版Excel表格功能插件特效源码。这个插件允许开发者在网页上创建交互式的表格,模仿Excel的一些基本操作,如数据编辑、排序和筛选,从而提供用户友好的数据管理...

    类似Excel的表格

    标题中的“类似Excel的表格”指的是使用JavaScript技术实现的一种能够在网页上展示和操作的数据表格控件,它提供了类似于Microsoft Excel的功能,让用户可以在浏览器环境中进行数据的编辑、排序、过滤等操作。...

    JS版仿EXCEL表格插件--智表(ZCELL)V1.3版本产品包

    **JS版仿EXCEL表格插件--智表(ZCELL)V1.3版本产品包** 智表(ZCELL)是一款专为Web应用设计的纯JavaScript实现的表格控件,其目标是提供与Microsoft Excel类似的功能和用户体验。该插件完全基于国产技术,能够为...

    jQuery网页版excel表格代码

    在网页开发中,jQuery是一个非常流行的JavaScript...为了具体了解这个组件的工作原理和使用方法,我们需要查看这些文件,包括HTML模板、CSS样式、JavaScript脚本等,来深入学习和应用这个jQuery网页版的Excel表格代码。

    《精通CSS+DIV网页样式与布局》光盘源码

     6.6 综合实例一:直接输入的Excel表格   6.7 综合实例二:模仿新浪网民调查问卷   第7章 用CSS设置页面和浏览器的元素   7.1 丰富的超链接特效  7.2 鼠标特效  7.3 页面滚动条   第8章 用CSS制作...

Global site tag (gtag.js) - Google Analytics