基于CSS的可輸入表格的設計
2009-04-29 00:00:00趙韜
電腦知識與技術 2009年35期
摘要:表格和表單是網頁設計中常用的兩個元素，在單元格中插入表單元素，從而實現可直接輸入數據的表格。使用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 表格結構創(chuàng)建
在使用CSS控制表格的樣式之前，先要創(chuàng)建出可輸入表格的基本結構?？奢斎氡砀竦慕Y構是利用HTML的表格和表單實現的。
1.1 表格
在HTML中表格主要是用標記、標記以及標記創(chuàng)建的。下面的代碼創(chuàng)建了如圖1所示的表格，這是創(chuàng)建可輸入表格的基礎。
……
1.2 表單
HTML中的表單主要由標記、等標記創(chuàng)建。表格中可輸入部分由表單的單行文本框元素實現，具體的實現方法是將整個表單用表格進行排版，每個單元格都有一個輸入框，效果如圖2，代碼如下
表單中數據的提交和重置由兩個按鈕分別來實現
2 使用CSS控制表格樣式
建立好整個表格后開始為表格和表單分別設置CSS樣式，總體思路是整個表格的風格用
2.1 改變表格的樣式
在
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 完整代碼示例
……
4 結論
在單元格中插入表單元素單行文本框，使得表格和表單能夠很好的結合起來，從而實現類似于EXCEL的可輸入表格。通過使用CSS對元素的樣式進行控制，使頁面顯示效果得以改善。如果合理的運用CSS并加上大膽的藝術創(chuàng)新，相信會創(chuàng)建出更好的作品。
參考文獻:
[1] 李超.CSS網站布局實錄[M].北京:科技出版社，2007.
[2] 曾順.精通CSS+DIV網頁樣式與布局[M].北京:人民郵電出版社，2007.
