Tableless 表格

上一篇文章《用 Table 作網站架構可免則免 》我談到用 <Table> 作為網站的架構的壞處，但壞處未算最壞，最惡劣的例子是一個含有表格的網頁。相信很多人都有設計表格的經驗，在文書處理的軟件中，我們會經常用 Table 及 Table Cell 去排版，來做一張完美的表格，但若在設計網頁時也用同一思維，結果做出來的網頁代碼是一片混亂，要更改就很困難。

其實不使用 <Table> 類的 HTML Tags 製作表格不難，最主要是認識 <fieldset>, <legend>, <label> 這3個比較少人留意的 Tags，及使用 CSS 排版。 <fieldset> 可以把表格內相關類別組在一起，以一張求職表格來作例子，有關個人資料的屬同一組，學歷是一組，工作經驗是另一組。<legend> 則是 <fieldset> 的標籤，而 <label> 就是每一項目的標籤，用了以上的 Tags 後，就可以很簡單地以 CSS 設定每一個項目的字型，行距，及對齊等等。 

以下是幾篇教學文章： 

• FREE! Applying CSS to Forms
• Set your forms free!
• Fancy Form Design Using CSS

網上也有免費的工具幫你設計表格，但留意未必所有工具都可製作 Tableless 表格，以下的服務不需要註冊就可使用，不妨一試： 

• pForm – Free HTML Form Builder
• The Form Assembly – Web Form Builder
• JotForm – Easiest Form Builder

網頁表格設計其實包含很多技術，除了外觀，也要顧及資料驗證和資料處理，日後再和大家探討。