基于CSS的可输入表格的设计.docVIP

基于CSS的可输入表格的设计 　　摘要:表格和表单是网页设计中常用的两个元素,在单元格中插入表单元素,从而实现可直接输入数据的表格。使用CSS对各个元素的样式进行控制,使得页面的显示效果得以改善。 　　关键词:CSS;表格;输入 　　中图分类号:TP311文献标识码:A文章编号:1009-3044(2009)35-9945-02 　　Design of a Table can be Input Directly Based on CSS 　　ZHAO Tao 　　(Computer Science and Technology College, Wuhan University of Technology, Wuhan 430070, China) 　　Abstract: Table and form are two common elements in webpage design. Form inserted in unit table can achieve data input directly. The control over style of each element by use of CSS can improve the display of page. 　　key words: CSS; table; input 　　表单是网页中一个重要的元素,其主要功能是负责数据采集,并将数据提交给服务器进行处理。当一个报表的数据量很大时,如果也像普通表单一样逐项填写,势必造成网页冗长。本文将在表格的基础上,增加表单的功能,并使用CSS对页面的外观进行控制,实现可以输入数据的表格。 　　1 表格结构创建 　　在使用CSS控制表格的样式之前,先要创建出可输入表格的基本结构。可输入表格的结构是利用HTML的表格和表单实现的。 　　1.1 表格 　　在HTML中表格主要是用标记、标记以及标记创建的。下面的代码创建了如图1所示的表格,这是创建可输入表格的基础。 　　 　　公司销售统计表2006-2009 　　 　　 　 　 　　 　　 　　显示器(Display) 　　 　　 　　 　　 　　 　　…… 　　 　　1.2 表单 　　HTML中的表单主要由标记、等标记创建。表格中可输入部分由表单的单行文本框元素实现,具体的实现方法是将整个表单用表格进行排版,每个单元格都有一个输入框,效果如图2,代码如下 　　 　　表单中数据的提交和重置由两个按钮分别来实现 　　 　　 　　2 使用CSS控制表格样式 　　建立好整个表格后开始为表格和表单分别设置CSS样式,总体思路是整个表格的风格用及其相关的标记体现,而将表单中的输入框设置为“不可见”。 　　2.1 改变表格的样式 　　在标记中添加class属性,类名定义为”formdata”,CSS样式如下: 　　table.formdata{ 　　border:1px solid #5f6f7e; 　　border-collapse:collapse;/*表格边框重叠*/ 　　}table.formdata th{ 　　border:1px solid #5f6f7e; 　　background-color:#e2e2e2; 　　}table.formdata td{ 　　border:1px solid #5f6f7e; 　　} 　　2.2 改变表单的样式 　　设置表单的样式主要在于将各个单元格中的输入框边框线隐藏起来,设置输入框的边框样式为”none”,如下所示: 　　table.formdata input{ 　　border:none;} 　　3 完整代码示例 　　 　　 　　 　　!-- 　　table.formdata{ 　　border:1px solid #5f6f7e; 　　border-collapse:collapse;/*表格边框重叠*/ 　　}table.formdata th{ 　　border:1px solid #5f6f7e; 　　background-color:#e2e2e2; 　　}table.formdata td{ 　　border:1px solid #5f6f7e; 　　}table.formdata input{ 　　border:none;/*隐藏输入框边框*/ 　　width:100px; 　　text- align:center; 　　}.btn{ 　　border:1px solid #5f6f7e; 　　}--