最近项目中,根据客户的要求需要在页面上展示各种报表什么的,各种表格的都会出现。这里也将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" %>
3 <!DOCTYPE html>
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
该博文介绍的比较详细。
博客地址:
http://www.cnblogs.com/wolf-sun/
博客版权:如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。