最近项目中，根据客户的要求需要在页面上展示各种报表什么的，各种表格的都会出现。这里也将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. 说说C#中IList与List区别

    首先IList 泛型接口是 ICollection 泛型接口的子代,并且是所有泛型列表的基接口. 它仅仅是所有泛型类型的接口,并没有太多方法可以方便实用,如果仅仅是作为集合数据的承载体,确实,ILis ...

  2. Android中的异步网络请求

    本篇文章我们来一起写一个最基本的Android异步网络请求框架,借此来了解下Android中网络请求的相关姿势.由于个人水平有限,文中难免存在疏忽和谬误,希望大家可以指出,谢谢大家:) 1. 同步网络 ...

  3. Android 中 appcompat_v7与各类资源报错问题

    最近导一个项目进eclipse弄了一天都弄不好,先总结如下 首先按照网上其他同志的导入sdk/extras下的appcompat_v7项目.然后 发现 我们这里已经更新到6.0了,也就是说,我们报错的 ...

  4. 一次ssl的手动实现——加密算法的简单扫荡

    引言 最近LZ在公司里接了一个活,要发布一些服务给公司的合作伙伴调用.这种工作LZ可谓是轻车熟路,之前已经做了无数服务端.不过与以往不同的是,这次的服务是要发布在互联网上的,因此不能再像之前的套路一样 ...

  5. scikit-learn——快速入门

    scikit-learn——快速入门 sklearn 快速入门 环境: ubuntu 12.04, 64 bits python 2.7 sklearn 0.14 好几个月没有发博客了,平时的笔记都随 ...

  6. 08.C# System.Nulable<T>和空引用操作符(四章4.2-4.4)

    看了这3小节,发现作者讲得太详细了,把一个都在正常使用的用法说得太神密了,搞得不知是自己不懂作者的苦心,还是作者用意为之,这里给大家都简单讲下吧,太深的真心讲不下去. 1.可空类型的核心部分是Syst ...

  7. [C#]二维码(QR Code)生成与解析

    写在前面 经常在大街上听到扫码送什么什么,如果真闲着没事,从头扫到位,估计书包都装满了各种东西.各种扫各种送,太泛滥了.项目中从没接触过二维码的东东,最近要使用,就扒了扒网络,发现关于解析二维码的类库 ...

  8. 第二章：javascript： 数组

    数组是编程世界里最常见的数据结构.任何一种编程语言都包含数组,只是形式稍微有差异.数组是编程语言中的内建类型,通常效率都很高.可以满足不同需求的数据存储,本章将探索javascript中的数组工作原理 ...

  9. 每天一个linux命令（52）：scp命令

    scp 是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且 scp传输是加密的.可能会稍微影响一下速度.当你服 ...

  10. 警告: [SetContextPropertiesRule]{Context} Setting property 'source' to 'org.eclipse.jst.jee.server:CurrencyClientServe

    有的说: 在Servers视图里双击创建的server,然后在其server的配置界面中选中"Publish module contexts to separate XML files&qu ...