最近项目中,根据客户的要求需要在页面上展示各种报表什么的,各种表格的都会出现。这里也将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代码:

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebTableForm.aspx.cs" Inherits="Wolfy.WebPage.WebTableForm" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>工程任务单</title>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<table border="2">
<tr>
<th colspan="2">定额</th>
<th rowspan="2">工程项目</th>
<th rowspan="2">工作内容</th>
<th rowspan="2">计量单位</th>
<th colspan="2">计划任务</th>
<th>实际完成</th>
<th>质量签订</th>
<th>调整单价</th>
<th>应付工资</th>
<!--这里应把多余的列删除,不然就会多出一些列-->
</tr>
<tr>
<td>页数</td>
<td>序号</td>
<td>工程数量</td>
<td>计价单价</td>
<td>验收数量</td>
<td></td>
<td></td>
<td></td>
<!--这里应把多余的列删除,不然就会多出一些列-->
</tr>
<tr>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>合计</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</form>
</body>
</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 该博文介绍的比较详细。

html中table的画法及table和div的区别的更多相关文章

  1. 网页制作中在头部固定悬浮table表头(thead)的方法

    这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...

  2. UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开

    正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏 ...

  3. Openvswitch原理与代码分析(5): 内核中的流表flow table操作

      当一个数据包到达网卡的时候,首先要经过内核Openvswitch.ko,流表Flow Table在内核中有一份,通过key查找内核中的flow table,即可以得到action,然后执行acti ...

  4. Lua中的weak表——weak table

    弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...

  5. Lua中的weak表——weak table(转)

    弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...

  6. ORACLE中RECORD、VARRAY、TABLE的使用详解(转)

    原文地址:ORACLE中RECORD.VARRAY.TABLE的使用详解

  7. 请说明SQLServer中delete from tablea & truncate table tablea的区别

    请说明SQLServer中delete from tablea & truncate table tablea的区别 解答:两者都可以用来删除表中所有的记录.区别在于:truncate是DDL ...

  8. 【转载】alter table move 和 alter table shrink space的区别

    move 和shrink 的共同点1.收缩段2.消除部分行迁移3.消除空间碎片4.使数据更紧密 shrink 语法:  alter table TABLE_NAME shrink space [com ...

  9. HTML table表格转换为Markdown table表格[转]

    举个栗子,当我想要把这个页面的第一个表格转换成Markdown Table时,怎么做更快,效率更高? 只需简单三步,请看示例: 第一步:复制包含HTML table标签的代码 复制table代码(HT ...

随机推荐

  1. JSTL 标签库 使用

    标签库概要: 一.C标签库介绍 1.1.<c:> 核心标签库  JSTL 核心标签库(C标签)标签共有13个,功能上分为4类:1.表达式控制标签:out.set.remove.catch2 ...

  2. [CareerCup] 13.5 Volatile Keyword 关键字volatile

    13.5 What is the significance of the keyword "volatile" in C 这道题考察我们对于关键字volatile的理解,顾名思义, ...

  3. 配置sonar、jenkins进行持续审查

    本文以CentOS操作系统为例介绍Sonar的安装配置,以及如何与Jenkins进行集成,通过pmd-cpd.checkstyle.findbugs等工具对代码进行持续审查. 一.安装配置sonar ...

  4. Web API 基于ASP.NET Identity的Basic Authentication

    今天给大家分享在Web API下,如何利用ASP.NET Identity实现基本认证(Basic Authentication),在博客园子搜索了一圈Web API的基本认证,基本都是做的Forms ...

  5. Ado.net 通用访问类

    public class DbHelperSQL { private static string connString = ConfigurationManager.ConnectionStrings ...

  6. 用css画出对话框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi

  7. 论Visual Studio和.NET Framework

    今天在工作的时候听到一席谈话感觉有点不可思议,微软真的是把开发人员惯的有点傻了,微软流水线式的产品让很多开发者认定了"唯一",这当然也说明了微软的成功,不扯太多题外话,今天只是简单 ...

  8. Linux下硬盘安装Windows系统。

    注意:本方法安装后会把Linux系统损坏,方法适用于完全不再需要Linux系统. 本方法在ubuntu 14.04,centos 6.5,debian 8测试成功. 安装方法是通过grub2引导Win ...

  9. 解决SourceGrid在某些系统上无法用鼠标滚轮滚动的问题

    4.40版源码,找到SourceGrid/SourceGrid/Common/CustomScrollControl.cs 这个文件 定位 CustomScrollWheel() 方法,把if条件判断 ...

  10. 通过Ajax——异步获取相关问题解答

    问题呈现: 解决方案: dataType定义的是接收的值的类型,及controller控制器返回什么类型的值,这就写成什么类型, 我写的是return content("...") ...