教你从0开始学习制作网.ppt_第1页
教你从0开始学习制作网.ppt_第2页
教你从0开始学习制作网.ppt_第3页
教你从0开始学习制作网.ppt_第4页
教你从0开始学习制作网.ppt_第5页
已阅读5页,还剩19页未读 继续免费阅读

下载本文档

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

文档简介

第8章:表格的应用,1. 建立表格,表格是HTML非常重要的一项功能,利用其多种属性能够设计出多样化的表格,进行网页排版。表格是网页排版的灵魂。 添加表格 -table, tr, td 表格一般通过三个标记来创建。分别是表格标记, 行标记和单元格标记,这三对标记是需要遵循一定的嵌套规则的, 文字1 文字2 文字3 文字4 ,文字1 文字2 文字3 文字4,说明: 标记和标记分别标志着一个表格的开始和结束。 标记和标记分别标志着表格中一行的开始和结束。因此标记对必须嵌套在标记对中。表格中有几组标记对,就表示表格有几行。 标记表示一个单元格的起始和结束,也即表示一行中有几列。因此标记对必须嵌套在标记对中。,2. 表格的基本属性,表格宽度 width和高度 height 默认的情况下,表格的宽度和高度是与表格内的文字相关的。是根据内容自动调整的。如果想制定表格的宽度使用 width属性,制定表格的高度使用height属性。语法: 表格的宽度和高度可以使具体的数值(单位是像素)也可以是百分比。,表格的对齐方式 align 表格的对齐方式是整个表格在网页中的位置。 语法: 对齐方式包括 left,center和right三种。,练习:,在网页中创建如下表格,3. 表格的边框,除了可以设置基本属性外,表格还可以设置边框效果,包括颜色宽度等。 边框宽度 border 默认情况下,表格是不显示边框的。为了使得表格更加清晰可以使用border参数设置边框的宽度。语法: ,边框的颜色 bordercolor 默认的情况下,边框的颜色是灰色的。设置边框颜色的前提是边框的宽度border不能设为0 语法: ,内框的宽度 cellspacing 表格的内框宽度是指表格各个单元格之间的宽度。 语法:,表格内文字与边的距离 cellpadding 默认情况下,表格内的文字会紧贴着表格的边框。有时可以使用cellpadding参数来调整这一距离。,练习,更改前一练习中表格的属性 设置颜色为#9933cc 设置边框宽度为2,设置内框宽度为10,设置文字与边框的距离为3 再修改内框宽度为0,体验一下修改后的效果。,4. 设置表格背景,为了突出表格还可以为表格设置与页面不同的背景 设置背景颜色 bgcolor 语法:,设置表格的背景图像 除了为表格设置背景色外,还可以设置背景图像,语法: ,练习:,1.将前一练习中的表格背景颜色更改为#77ffee 2. 使用课件文件夹中的图片素材设置表格的背景图片。,5. 修改表格的行属性,设定了表格的整体属性后,还可以对单独的一行表格进行属性设置。 高度的控制 height 当遇到一些表格中某一行的高度和其他行不同时,就需要使用height参数。该参数只对这一行有效。 语法: ,边框的颜色 与表格相同,对表格的行来说,也可以单独设置其外框的颜色 语法: 行背景: 语法: ,行文字的水平对齐方式 align 语法: 行文字的垂直对齐方式valign 语法:,8. 调整单元格属性,水平跨度 colspan 在一些复杂表格中水平跨度属性特别有用。 单元格水平跨度是指某个单元格可以跨多少列。也可以说是一个单元格向右打通的列的个数。 语法:, 成绩表 赵一 87 90 77 钱二 67 78 76 孙三 89 88 83 ,垂直跨度 rowspan 单元格除了可以在水平方向跨列,还可以在垂直方向上跨行。语法:,举例:, 图书分类 类

温馨提示

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

评论

0/150

提交评论