基于CSS的可輸入表格的設(shè)計(jì)

摘要:表格和表單是網(wǎng)頁設(shè)計(jì)中常用的兩個(gè)元素，在單元格中插入表單元素，從而實(shí)現(xiàn)可直接輸入數(shù)據(jù)的表格。使用CSS對(duì)各個(gè)元素的樣式進(jìn)行控制，使得頁面的顯示效果得以改善。

關(guān)鍵詞:CSS;表格;輸入

中圖分類號(hào):TP311文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):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

表單是網(wǎng)頁中一個(gè)重要的元素，其主要功能是負(fù)責(zé)數(shù)據(jù)采集，并將數(shù)據(jù)提交給服務(wù)器進(jìn)行處理。當(dāng)一個(gè)報(bào)表的數(shù)據(jù)量很大時(shí)，如果也像普通表單一樣逐項(xiàng)填寫，勢(shì)必造成網(wǎng)頁冗長(zhǎng)。本文將在表格的基礎(chǔ)上，增加表單的功能，并使用CSS對(duì)頁面的外觀進(jìn)行控制，實(shí)現(xiàn)可以輸入數(shù)據(jù)的表格。

1 表格結(jié)構(gòu)創(chuàng)建

在使用CSS控制表格的樣式之前，先要?jiǎng)?chuàng)建出可輸入表格的基本結(jié)構(gòu)。可輸入表格的結(jié)構(gòu)是利用HTML的表格和表單實(shí)現(xiàn)的。

1.1 表格

在HTML中表格主要是用標(biāo)記、標(biāo)記以及標(biāo)記創(chuàng)建的。下面的代碼創(chuàng)建了如圖1所示的表格，這是創(chuàng)建可輸入表格的基礎(chǔ)。

公司銷售統(tǒng)計(jì)表2006-2009

20062007

20082009

顯示器(Display)

……

1.2 表單

HTML中的表單主要由標(biāo)記、等標(biāo)記創(chuàng)建。表格中可輸入部分由表單的單行文本框元素實(shí)現(xiàn)，具體的實(shí)現(xiàn)方法是將整個(gè)表單用表格進(jìn)行排版，每個(gè)單元格都有一個(gè)輸入框，效果如圖2，代碼如下

表單中數(shù)據(jù)的提交和重置由兩個(gè)按鈕分別來實(shí)現(xiàn)

2 使用CSS控制表格樣式

建立好整個(gè)表格后開始為表格和表單分別設(shè)置CSS樣式，總體思路是整個(gè)表格的風(fēng)格用

及其相關(guān)的標(biāo)記體現(xiàn)，而將表單中的輸入框設(shè)置為“不可見”。

2.1 改變表格的樣式

在

標(biāo)記中添加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 改變表單的樣式

設(shè)置表單的樣式主要在于將各個(gè)單元格中的輸入框邊框線隱藏起來，設(shè)置輸入框的邊框樣式為”none”，如下所示:

table.formdata input{

border:none;}

3 完整代碼示例

公司銷售統(tǒng)計(jì)表2006-2009

20062007

20082009

顯示器(Display)

……

4 結(jié)論

在單元格中插入表單元素單行文本框，使得表格和表單能夠很好的結(jié)合起來，從而實(shí)現(xiàn)類似于EXCEL的可輸入表格。通過使用CSS對(duì)元素的樣式進(jìn)行控制，使頁面顯示效果得以改善。如果合理的運(yùn)用CSS并加上大膽的藝術(shù)創(chuàng)新，相信會(huì)創(chuàng)建出更好的作品。

參考文獻(xiàn):

[1] 李超.CSS網(wǎng)站布局實(shí)錄[M].北京:科技出版社，2007.

[2] 曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京:人民郵電出版社，2007.