继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

html中table的画法及table和div的区别

繁星coding
关注TA
已关注
手记 197
粉丝 10
获赞 54

    最近项目中,根据客户的要求需要在页面上展示各种报表什么的,各种表格的都会出现。这里也将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架构的页面框架是用软件“拖”出来的,代码里会有大量的tabletrtd,没有人愿意修改这样的代码,即使是代码的作者,这种布局下,调整一个很简单的栏目都需要寻找很久才能定位到代码,而由于制作成本较低和难维护,许多企业网站建好后就成了“死站”,要做小的调整或修改时根本找不到人,即便是专业的建站公司也不愿接收这样的网站来维护。

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

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

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP