最近項目中，根據客戶的要求需要在頁面上展示各種報表什么的，各種表格的都會出現。這里也將table的畫法，做一下總結。辦法雖笨但很實用。這也是從高人那里學來的，總之是屢試不爽啊。就以下面的表格為例。
若想畫上面的表格，首先得確定是幾行幾列的。怎么確定？
總之，不管三七二十一，出現橫線的地方畫一紅橫線，出現豎線的地方畫一豎線分割，如上圖所示，已基本確定是一個5行11列的表格。表格基本框架已確定， 接下來就是用table標簽來實現上面的表格了。簡單介紹一下table中常用的屬性。
定義和用法
<table> 標簽定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
<tr> 標簽定義 HTML 表格中的行。align（right、left、center、justify、char）定義表格行的內容對齊方式。valign（top、middle、bottom、baseline）規定表格行中內容的垂直對齊方式。
th 元素內部的文本通常會呈現為居中的粗體文本，而 td 元素內的文本通常是左對齊的普通文本。colspan設置單元格可橫跨的列數。rowspan規定單元格可橫跨的行數。
同樣td也有colspan和rowspan屬性。
有關table標簽其他屬性可參考：http://www.w3school.com.cn/tags/tag_th.asp。
這里就介紹一個這里面用的，能實現目的的幾個常用屬性。
html代碼：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebTableForm.aspx.cs" Inherits="Wolfy.WebPage.WebTableForm" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>工程任務單</title> 9 </head> 10 <body> 11 <form id="form1" runat="server"> 12 <div align="center"> 13 <table border="2"> 14 <tr> 15 <th colspan="2">定額</th> 16 <th rowspan="2">工程項目</th> 17 <th rowspan="2">工作內容</th> 18 <th rowspan="2">計量單位</th> 19 <th colspan="2">計划任務</th> 20 <th>實際完成</th> 21 <th>質量簽訂</th> 22 <th>調整單價</th> 23 <th>應付工資</th> 24 <!--這里應把多余的列刪除，不然就會多出一些列--> 25 </tr> 26 <tr> 27 <td>頁數</td> 28 <td>序號</td> 29 <td>工程數量</td> 30 <td>計價單價</td> 31 <td>驗收數量</td> 32 <td></td> 33 <td></td> 34 <td></td> 35 <!--這里應把多余的列刪除，不然就會多出一些列--> 36 </tr> 37 <tr> 38 <td>1</td> 39 <td>1</td> 40 <td></td> 41 <td></td> 42 <td></td> 43 <td></td> 44 <td></td> 45 <td></td> 46 <td></td> 47 <td></td> 48 <td></td> 49 </tr> 50 <tr> 51 <td>2</td> 52 <td>2</td> 53 <td></td> 54 <td></td> 55 <td></td> 56 <td></td> 57 <td></td> 58 <td></td> 59 <td></td> 60 <td></td> 61 <td></td> 62 </tr> 63 <tr> 64 <td></td> 65 <td>合計</td> 66 <td></td> 67 <td></td> 68 <td></td> 69 <td></td> 70 <td></td> 71 <td></td> 72 <td></td> 73 <td></td> 74 <td></td> 75 </tr> 76 </table> 77 </div> 78 </form> 79 </body> 80 </html>
結果：
已接近上面的表格了，最后就是用css和table的一些屬性來美化它了。
也許這在很多人眼里看來很弱智，但我是樂在其中。總之，只要能敲代碼，管它前端還是后台，管它簡單還是困難，都灰常喜歡.....
一直關注博客園，看到很多人說程序員很苦逼，但我不這么認為。送大家一句我的心里話：能來北京太好了，能做開發的工作真是太好了.......
div和table的區別：
1、頁面加載速度慢。
當瀏覽器讀取網頁代碼時，遇到table標簽時，只有到讀取到結束標簽時才會顯示網頁內容，而當talbe中有大量嵌套，再加上網速有點卡時，網頁完整打開展現在訪客面前就要好幾秒鍾，對訪客的體驗即為不利，有些訪客可能會認為網站打不開，沒等到完全加載中途就關閉了，除非網站服務器帶寬比較大（即便如此你能保證訪客的網速一定足夠快嗎？）。
2、后期修改較為麻煩。
由於table架構的頁面框架是用軟件“拖”出來的，代碼里會有大量的table、tr、td，沒有人願意修改這樣的代碼，即使是代碼的作者，這種布局下，調整一個很簡單的欄目都需要尋找很久才能定位到代碼，而由於制作成本較低和難維護，許多企業網站建好后就成了“死站”，要做小的調整或修改時根本找不到人，即便是專業的建站公司也不願接收這樣的網站來維護。
3、不利於搜索引擎收錄。
在百度、谷歌等搜索引擎里，table架構的代碼不易被索引已經是公認的，因為table架構的網頁里很難找到標題和內容的區別，而這些正是搜索引擎的蜘蛛爬蟲索引的重要依據。
上面是找到的三點優缺點，想了解更詳細的信息，推薦一個博文：http://www.cnblogs.com/lovebear/archive/2012/04/18/2456081.html 該博文介紹的比較詳細。