html中table的画法及table和div的区别
最近项目中，根据客户的要求需要在页面上展示各种报表什么的，各种表格的都会出现。这里也将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的区别的更多相关文章
- 网页制作中在头部固定悬浮table表头(thead)的方法
这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...
- UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开
正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏 ...
- Openvswitch原理与代码分析(5): 内核中的流表flow table操作
当一个数据包到达网卡的时候,首先要经过内核Openvswitch.ko,流表Flow Table在内核中有一份,通过key查找内核中的flow table,即可以得到action,然后执行acti ...
- Lua中的weak表——weak table
弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...
- Lua中的weak表——weak table（转）
弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...
- ORACLE中RECORD、VARRAY、TABLE的使用详解(转)
原文地址:ORACLE中RECORD.VARRAY.TABLE的使用详解
- 请说明SQLServer中delete from tablea & truncate table tablea的区别
请说明SQLServer中delete from tablea & truncate table tablea的区别 解答:两者都可以用来删除表中所有的记录.区别在于:truncate是DDL ...
- 【转载】alter table move 和 alter table shrink space的区别
move 和shrink 的共同点1.收缩段2.消除部分行迁移3.消除空间碎片4.使数据更紧密 shrink 语法: alter table TABLE_NAME shrink space [com ...
- HTML table表格转换为Markdown table表格[转]
举个栗子,当我想要把这个页面的第一个表格转换成Markdown Table时,怎么做更快,效率更高? 只需简单三步,请看示例: 第一步:复制包含HTML table标签的代码 复制table代码(HT ...
随机推荐
- JS 之DOM range对象
DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...
- IOS开发之——意见反馈UITextView的使用+不能输入字符输入
@interface DMFeedbackViewController ()<UITextViewDelegate,UIAlertViewDelegate>@property (nonat ...
- Linux c实现服务端与客户端聊天
主要利用socket通信实现,具体代码如下 客户端: #include <stdio.h> #include <stdlib.h> #include <string.h& ...
- 通过词法分析实现的指出C程序中包含的头文件
在阅读有些程序的源码时,很希望能够马上弄清楚源码中到底包含了哪些头文件,以确定是否需要为了特殊的函数而手动加入#include.借助flex的词法分析实现了这一功能,本质上就是对正则表达式的匹配.注意 ...
- Django1.8教程——从零开始搭建一个完整django博客（二）
在上一节中,我们已经创建了一个Django模型Post,并使Post模型与数据库同步.这一节中,我们将介绍Django管理站点,通过Django管理站点来管理我们创建的Post模型实例. 为你的模型创 ...
- springmore-让编程更容易
这是我多年项目的总结,并将其抽象出来,形成一个开源的项目 部分借鉴springside,将更多的实践总结进来 基于spring+ibatis+springMVC springmore-core专注于一 ...
- 喝咖啡写脚本,顺便再加一点点CSS语法糖 2.五分钟学会Less
CoffeeScript + Html5 + Less这个新组合,看上去Less更容易拿下,先尝尝糖吧. Less这么小个东西,竟然要FQ,真是没有天理,简直不可理喻,先不管那么多了,那就看这个吧.h ...
- Dandelion - Distributed Computing on GPU Clusters
linq on GPUs 非常期待中 看起来很cool,期望早点面世
- [C#]Hosting Process (vshost.exe)
写在前面 最近在群里,有朋友问起这个vshost.exe进程到底是什么?当时确实不知道是个什么东东,给人的感觉是,经常看到它,就是在启动一个项目的时候,经常看到它,就是没细研究它是啥玩意儿.既然遇到了 ...
- 团队项目作业第二项：利用NABCD模型进行竞争性需求分析
项目需求分析与建议--NABCD模型(王鲁跃负责) N (Need 需求) 对于现在的学生来说,我们认为打字是很重要的.不管在什么方面都需要进行电脑打字,例如文员.QQ.MSN.制作,论文等等,都需要 ...