最近项目中，根据客户的要求需要在页面上展示各种报表什么的，各种表格的都会出现。这里也将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 属性" href="http://www.w3school.com.cn/tags/att_tr_align.asp">align（right、left、center、justify、char）定义表格行的内容对齐方式。 标签的 valign 属性" href="http://www.w3school.com.cn/tags/att_tr_valign.asp">valign（top、middle、bottom、baseline）规定表格行中内容的垂直对齐方式。
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。 标签的 colspan 属性" href="http://www.w3school.com.cn/tags/att_th_colspan.asp">colspan设置单元格可横跨的列数。 标签的 rowspan 属性" href="http://www.w3school.com.cn/tags/att_th_rowspan.asp">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架构的网页里很难找到标题和内容的区别，而这些正是搜索引擎的蜘蛛爬虫索引的重要依据。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
