html5动态表格.docx
《html5动态表格.docx》由会员分享，可在线阅读，更多相关《html5动态表格.docx（8页珍藏版）》请在冰豆网上搜索。
html5动态表格
竭诚为您提供优质文档/双击可除
html5,动态表格
篇一：
html5表格元素
第6章表格元素
学习要点：
1.表格元素总汇
2.构建表格解析
本章主要探讨html5中表格元素的用法。
表格的主要用途是以网格的形式显示二维数据。
一．表格元素总汇
表格的基本构成最少需要三个元素：
、、，其他的一些作为可选辅助存在。
元素名称说明
table表示表格
thead表示标题行
tbody表示表格主体
tfoot表示表脚
tr表示一行单元格
th表示标题行单元格
td表示单元格
col表示一列
colgroup表示一组列
caption表示表格标题
二．构建表格解析
1.构建基础表格
张三
男
未婚
李四
女
已婚
解释：
元素表示一个表格的声明，元素表示表格的一行，元素表示一个单元格。
默认情况下表格是没有边框的，所以，在元素增加一个border属性，设置为1即可显示边框。
2.为表格添加标题单元格
姓名
性别
婚姻
张三
男
未婚
李四
女
已婚
解释：
元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。
这里使用了一个通用属性style，主要用于css样式设置，以后会涉及到。
均属于单元格，包含两个合并属性：
colspan、rowspan等。
3.添加表头
姓名
性别
婚姻
解释：
元素就是限制和规范了表格的表头部分。
尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。
4.
foot>添加表脚
统计：
共两名
解释：
元素为表格生成表脚，限制在表格的底部。
5.添加表主体
张三
男
未婚
李四
女
已婚
解释：
元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续css和javascript的控制。
6.添加表格标题
这是一个人物表
解释：
元素给表格添加一个标题。
7.设置列
解释：
元素是为了处理某个列，span属性定义处理哪些列。
1表示第一列，
2表示前两列。
如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第二位，再处理第二个即可。
8.更灵活的设置列
解释：
元素表示单独一列，一个表示一列，控制更加灵活。
如果设置了span则，控制多列。
篇二：
html5和jquery动态饼状图表插件
篇三：
动态html教程（1-5）
动态html教程
（一）
经过微软和netscape关于浏览器大战新闻发布会以及种种传闻和无休止的辩论之后，你从新发布的这两种4.0版的浏览器中得到了什么呢？
只是一个占据了你的硬盘40-mb空间的庞大怪物？
还是可以推动媒体发展的令人兴奋倍受鼓舞的充满活力的新生事物？
除了一些有能力制定4.0版本规格的大型站点之外，实际上动态html还没有真正广泛应用于互联网。
你应该了解动态html的含义，它就一种超文本接术。
还应该了解dhtml只能应用于最新版的浏览器，即internetexplorer4和netscapenavigator4。
这两种浏览器对于动态html的支持并不相同，所以目前缺少一种编写dhmtl网页的通用方式。
这就是动态html不能在互联网中得到广泛应用的原因。
网站开发者为了使自己的网页让尽量多的人看到，宁可使网页的编写臃肿不堪也不敢使用动态html使自己的网页具备更高的效率。
因为用动态html编写的网页在这两种广泛使用的浏览器中显示的效果有很大的区别。
我们将学习使用串接样式表编写网页并利用javascript给网页加入动画。
如果某些用户认为在网页中加入满天飞的动画实在是无益的劳动，那么我还要讲授一些只有动态html才能做到的非常实用的动态用户界面。
我们将充分结合我们大脑两个半球的优势编写动态的事件驱动的动画，这种动画可以根据用户的指令进行变化，如果这些还不足够吸引你，我们还将应用结构、数组循环、对象引用以及更多的串接样式表使你拥有编写可以令任何梦想都变成现实的结构化网页编程能力。
坦白的地说，动态hmtl不是为初学者准备的教程。
要引用动态html，你必须熟悉3中不同的技术：
html、样式表和javascript。
动态html网页实际上就是这3种技术的集
成。
所以第1天的课程只是一堂复习课。
你的作业就是要重温以前所了解的关于这3种技术的知识。
不是很难，但你至少要掌握这3种技术的语法。
对于javascript,我建议你阅读javascript教程。
你应该特别注意学习一下第2日教程中关于变量的知识，第3日教程中文件对象模块（dom）的知识，第4日教程中的循环和数组，以及在表单中通过引用来控制对象的技巧。
关于串接样式表的内容，你可以阅读5日精通样式表教程熟悉一下样式表的语法。
你还应该阅读css定位一文，学习如何利用样式表布局页面。
至于html，你应该熟悉
和标签以及不再有giF文字一文。
我并不希望你阅读和记住所有这些内容，你只需浏览一下，知道所需要的知识在什么位置可以找到就可以了。
这里是本教程所要讲授的内容：
第2日：
利用css定位生成在两种浏览器都可以浏览的网页布局，以及如何将文字和图象叠放在彼此之上。
第3日利用你的布局并制作动画效果。
第4日用动态html建立用户界面，以及如何隐藏和显示界面的元素。
第5日：
更深入地了解动态html以及常见的问题。
明天见。
动态html教程
（二）
动态hmtl网页利用串接样式表布局，并利用javascript控制网页元素。
实际并不复杂或有很多的规定。
我们所需要作的只是要给网页加入样式，
能使其运动，并且在两种主要的浏览器中都能正确显示。
精通我们将用css-p布局网页，这是学习动态html的第1步。
学习完定位元素之后，我们将接着学习编写使其动态显示的脚本。
大多数用于设计和页面布局的程序或文件格式必须现生成box，它们的
宽度和高度可以改变，它们还能使你控制将对象叠放在对象之上。
css-p
的原理与其相似，你先用html定义一个容器（为了便于具备跨平台应用的
兼容性，你最好实用或标签），设置其水平和垂直位置，然
后设定哪个对象应该叠放在哪个对象之上。
真的很简单，它能象大多数人（尤其那些利用表格定位和布局的人）希
望的那样让html发挥功能。
你只需以一种不同的思维角度来思考网页的布
局，本教程将重点讲述一些基本的布局技巧明天我们将利用javascript控
制你的网页布局。
动态html中大多数的内容都要用到标签作为容器。
（在串接样式表和css定位的规范草案中规定可以将任何对象定位，但netscape的浏览器还不支持这项规定。
所以你必须用标签作为类属容器），在容器内加入对象然后再定位。
我们先为本教程中的范例生成一个box。
在本教程的范例中我们将用网猴的一个编辑tim作为范例中的主角：
dramatispersonae
#tim{position:
absolute;left:
10px;top:
10px;width:
140px;
height:
91px;}
-->
这里是box的显示结果（为了辨认的方便，我给它加了一个红色边框）
现在我们有了一个空的box，其id名称为tim，其位置在距窗口左边10个像素，距窗口顶部10个像素的位置。
现在它还没有体现出动态html的魅力，
所以我们在这个box中填入tim的图片，并给它加一点说明：
tim,
thehero.webmonkeyeditorandresidentbanjo-picker.
在3.2版本的html的网页（即不能支持动态html的网页）中，你将会注意到文字一直流到屏幕边缘之外，而tim的图片朝左浮动。
tim,thehero.webmonkeyeditorandresidentbanjo-picker.
实际上是它浮动到了本文所在的表格单元的左边。
这是一个重要的区别。
当你将html放在一个已经被定位了的之内时，你可以把它看作是放在了一个表格单元中（或者象在其他出版系统之内的制作方法那样）。
在支持html3.2以后的版本的网页中，你可以看到文字自动回行：
tim,thehero.webmonkeyeditorandresidentbanjo-picker.
现在这个标签里已经填充了内容，让我们利用css-p的leFt和top选项技将其定位。
dramatispersonae
#tim{
position:
absolute;
left:
300px;
top:
10px;
width:
140px;
height:
91px;
}
-->
显示结果:
tim,thehero.webmonkeyeditorandresidentbanjo-picker.
你可能会注意到在本例中我使用了相对定位。
在相对定位和绝对定位中有一个很微妙但确确实实的区别。
当你将一个对象用绝对定位指令定位时，你实际将其从你的html文件流中抽了出来，将其直接根据网页的左上角的位置进行定位。
这种情况下各个对象有可能互相重叠在一起。
相对定位并不指根据百分比值或其他某个元素的位置来定位这个元素的位置。
它实际占据的就是它在这个html文件中的位置，它的定位起点基于html页所在的位置，这里是一个例子：
tim,thehero.webmonkeyeditorandresidentbanjo-picker.
tim,thehero.webmonkeyeditorandresidentbanjo-picker.
这两个句子中，单词webmonkey都定位在距左边200像素的位置。
第1个句
升级会员 