WEbUI表格相关操作总结.ppt_第1页
WEbUI表格相关操作总结.ppt_第2页
WEbUI表格相关操作总结.ppt_第3页
WEbUI表格相关操作总结.ppt_第4页
WEbUI表格相关操作总结.ppt_第5页
免费预览已结束,剩余53页可下载查看

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、第7章表格,主要内容,熟悉表格的常见属性,制作表格,使用表格来容纳表格数据,使用表格来布局页面,7.1表格介绍,表格在网站中广泛使用,几乎所有的网页都或多或少使用表格。表格可以方便灵活的实现网页的布局,并且可以集中定位相关的信息元素,让浏览网页的人可以清晰悦目。因此,要制作一个好的网页,就必须学好表格,熟练掌握和运用表格的各种属性。7.2.1表格基本标记,表格标记在超文本标记语言语法中,表格主要由三个标记组成:基本语法:7.2.1表格基本标签,定义星期一、星期二、星期三、星期四和星期五的表格部分,大学英语高等数学数据结构实验第12节网络开发,大学英语高等数学数据结构数据结构实验第34节网络开发

2、,7.2.1表格基本标签,7.2.2表格标题,这些都是表格内容的简单描述,都是通过标签实现的。基本语法:7.2.2表格标题,课程部分周一周二周三周五,7.2.2表格标题,7.2.3表格标题,标题指表格的第一行,文本样式以中间粗体显示,通过标签实现。基本语法:7.2.3表头、课程章节周一、周二、周三、周四和周五、7.2.3表头、7.2.4设置表格的分割结构。为了清楚地区分表格结构,表格在网页上显示为三个部分。超文本标记语言规定、三个标签分别对应表头、表体和表尾。基本语法:7.2.4设置具有分区结构的表,定义表结构的时间表,星期一,星期二,星期三,星期四和星期五,适用时间:2008-2009年第一

3、学期083007课,7.2.4设置具有分区结构的表,第12节体育大学英语中高等数学数据结构的实验网络开发,第34节大学英语中高等数学数据结构的实验网络开发,7.2.4设置分区结构的表,7.3修改表,表是网页中的一个重要元素7.3.1设置表格的边框属性。默认情况下,表格的边框为0。您可以通过向表格添加属性和属性值来设置边框线并美化表格。常见属性如表7-2所示。基本语法:7.3.1设置表格的边框属性,7.3.2设置表格的宽度和高度。默认情况下,表格的宽度和高度会根据内容自动调整。基本语法:7.3.2设置表格的宽度和高度,7.3.2设置表格背景,7.3.4设置表格背景图像,可以是GIF、JPEG或P

4、NG。基本语法:7.3.5设置边框样式。当我们之前使用边框属性时,边框出现在每个单元格和表格本身之间。我们可以使用框架属性来控制应该显示哪些表格边框,使用规则属性来控制应该显示哪些内部边框。基本语法:7.3.5设置边框样式,7.3.5设置边框样式,7.3.6设置表格单元格间距,7.3.6设置表格单元格间距,7.3.7设置表格单元格边距,即单元格内容与其边框之间的距离。基本语法:7.3.7设置表格单元格边距,7.3.7设置表格单元格边距,7.3.8设置表格的水平对齐属性。水平对齐是在水平方向。您可以将表格的对齐模式设置为左对齐、居中对齐和右对齐。如果没有特别设置,默认情况下会在左侧排列。基本语法

5、:7.4.1行内容水平对齐,基本语法:设置表格水平对齐课程部分星期一星期二星期三星期四,7.4.1行内容水平对齐,星期五,第12节,体育大学高等数学数据结构实验网站开发,第34节,大学英语高等数学数据结构实验网站开发,适用时间:083007班,2008-2009年第一学期,7.4.1行水平对齐,7.4.2行垂直对齐,基本语法: 设置表格行垂直对齐的时间表,7.4.2行内容垂直对齐,适用时间:2008-2009年第一学期083007课,7.4.2行内容垂直对齐,7.5设置表格中某个单元格的属性,用于设置表格中某个单元格的属性,7.5.1设置单元格为跨行,合并跨行单元格的行跨度属性,实现跨行合并(

6、垂直合并)。 基本语法:7.5.1设置单元格跨线,每周一、二、三、四、五设置表格跨线日程,第12节体育,7.5.1设置单元格跨线,第34节大学英语高等数学数据结构网络开发,第34节大学英语高等数学数据结构网络开发实验适用时间:083007班,2008-2009年第一学期,7.5.1设置单元格跨行,7.5.2设置单元格跨列,以及跨列合并列跨度属性基本语法:7.5.2设置单元格交叉列,设置交叉列的表格课程。第十二节体育大学英语高等数学。7.5.2设置单元格交叉栏。数据结构第34节大学英语高等数学数据结构数据结构实验网页开发实验适用时间:083007班,2008-2009年第一学期,7.5.2设置单

7、元格为跨列,7.6表格嵌套,表格嵌套是在表格的某个单元格中根据插入元素的需要插入几行几列的表格。嵌套表可以像任何其他表一样格式化,但是它的宽度受它所在单元格的宽度限制。利用表格嵌套,一方面可以编辑复杂精致的效果,另一方面可以根据版面要求实现精确的编排。然而,应该注意的是,嵌套层次越多,网页的加载速度就越慢。7.6表格嵌套,表格嵌套课程083007,7.6表格嵌套,周一,周二,周三,周五第12节体育大学英语中高等数学数据结构的网络开发,7.6表格嵌套,第34节网络开发实验课083008,表格嵌套,在7.7中,一些设计者喜欢使用表格进行页面布局,因为它的效果在不同的浏览器中更容易保持一致,尽管使用“DIV CSS”技术进行页面布局更流行。7.7小示例,利用表单实现页面布局,网站标志广告栏,7.7小示例,内容一,内容二,版权信息,7.7小示例,摘要,本章主要介绍了表格制作中常用的属性和值,并在此提出两点注意事项:1。在创建一个复杂的表格之前,最好计划一下,例如,你可以先用笔在纸上设计页面;2.使用表格排版网页时,尽量细化表格,不要将整个网页放在一个大表格中,因为当表格中有一些加载缓慢的元素(如计数器)时,整个表格的显示往往会延迟。这是由工业工程的显

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论