最近项目中，根据客户的要求需要在页面上展示各种报表什么的，各种表格的都会出现。这里也将table的画法，做一下总结。办法虽笨但很实用。这也是从高人那里学来的，总之是屡试不爽啊。就以下面的表格为例。

   

     若想画上面的表格，首先得确定是几行几列的。怎么确定？

      总之，不管三七二十一，出现横线的地方画一红横线，出现竖线的地方画一竖线分割，如上图所示，已基本确定是一个5行11列的表格。表格基本框架已确定， 接下来就是用table标签来实现上面的表格了。简单介绍一下table中常用的属性。

定义和用法

     <table> 标签定义 HTML 表格。

      简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

     tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

     更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

     <tr> 标签定义 HTML 表格中的行。（right、left、center、justify、char）定义表格行的内容对齐方式。（top、middle、bottom、baseline）规定表格行中内容的垂直对齐方式。

      th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。设置单元格可横跨的列数。规定单元格可横跨的行数。

同样td也有colspan和rowspan属性。

      有关table标签其他属性可参考：。

这里就介绍一个这里面用的，能实现目的的几个常用属性。

 html代码：

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebTableForm.aspx.cs" Inherits="Wolfy.WebPage.WebTableForm" %> 2  3  4  5  6  7     
      8      9 10 11     
     
      12         
      
       13             
       
        14                 
          15                     
16                     
17                     
18                     
19                     
20                     
21                     
22                     
23                     
24                     
25                 
26                 
          27                     
28                     
29                     
30                     
31                     
32                     
33                     
34                     
35                     
36                 
37                 
          38                     
39                     
40                     
41                     
42                     
43                     
44                     
45                     
46                     
47                     
48                     
49                 
50                 
          51                     
52                     
53                     
54                     
55                     
56                     
57                     
58                     
59                     
60                     
61                     
62                 
63                 
          64                     
65                     
66                     
67                     
68                     
69                     
70                     
71                     
72                     
73                     
74                     
75                 
76             
        
         
          
定额
          
工程项目
          
工作内容
          
计量单位
          
计划任务
          
实际完成
          
质量签订
          
调整单价
          
应付工资
                   
         
          
页数
          
序号
          
工程数量
          
计价单价
          
验收数量
          
          
          
                   
         
          
1
          
1
          
          
          
          
          
          
          
          
          
         
         
          
2
          
2
          
          
          
          
          
          
          
          
          
         
         
          
          
合计
          
          
          
          
          
          
          
          
          
         
        
       
77         
      
78     
     
79 80 

结果：

已接近上面的表格了，最后就是用css和table的一些属性来美化它了。

      也许这在很多人眼里看来很弱智，但我是乐在其中。总之，只要能敲代码，管它前端还是后台，管它简单还是困难，都灰常喜欢.....

一直关注博客园，看到很多人说程序员很苦逼，但我不这么认为。送大家一句我的心里话：能来北京太好了，能做开发的工作真是太好了.......

 

div和table的区别：

1、页面加载速度慢。

当浏览器读取网页代码时，遇到table标签时，只有到读取到结束标签时才会显示网页内容，而当talbe中有大量嵌套，再加上网速有点卡时，网页完整打开展现在访客面前就要好几秒钟，对访客的体验即为不利，有些访客可能会认为网站打不开，没等到完全加载中途就关闭了，除非网站服务器带宽比较大（即便如此你能保证访客的网速一定足够快吗？）。

2、后期修改较为麻烦。

由于table架构的页面框架是用软件“拖”出来的，代码里会有大量的table、tr、td，没有人愿意修改这样的代码，即使是代码的作者，这种布局下，调整一个很简单的栏目都需要寻找很久才能定位到代码，而由于制作成本较低和难维护，许多企业网站建好后就成了“死站”，要做小的调整或修改时根本找不到人，即便是专业的建站公司也不愿接收这样的网站来维护。

3、不利于搜索引擎收录。

在百度、谷歌等搜索引擎里，table架构的代码不易被索引已经是公认的，因为table架构的网页里很难找到标题和内容的区别，而这些正是搜索引擎的蜘蛛爬虫索引的重要依据。

上面是找到的三点优缺点，想了解更详细的信息，推荐一个博文： 该博文介绍的比较详细。