第03章表格的应用和布局

1、第第3章章表格的应用和布局表格的应用和布局2君子耻其言而过其行学历是铜牌学历是铜牌能力是银牌能力是银牌人脉是金牌人脉是金牌思维是王牌思维是王牌3讨论请说一下文字格式类的标签有哪些？请说一下文字格式类的标签有哪些？ 回顾与作业点评样设置一个段落文字的对齐方式？样设置一个段落文字的对齐方式？有序列表用什么标签，无序列表用什么标签？有序列表用什么标签，无序列表用什么标签？怎样指定要显示的图片？怎样指定要显示的图片？超链接中的超链接中的hrefhref属性都有什么作用属性都有什么作用? ?4预习检查表格、表格的行和单元格分别用什么标签来创建？怎么样创建带标题的表格？怎么设置单元格的内容与其边框的空隙？

2、怎么设置单元格边框之间的间隙？怎么设置单元格的跨行和跨列5内容进度表格表格标签属性页面表格布局创建表格67表格表格表格概述 表格是行和列排列而成的结构，常用来组织和展现数据8表格表格表格作用 按照行和列来给用户呈现数据 使用表格进行页面布局内容进度表格表格标签属性页面表格布局创建表格910创建表格创建表格表格元素 表格有三类元素构成，依次是table表格元素、tr行元素和td/th单元格元素，元素是由相应的标签和内容组成 table元素用来定义表格，整个表格包含在和标签中 tr元素用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由和标签表示 td元素和th元素用来定义单元格，

3、所有单元格在行元素内，每个单元格由一对和标签或一对和标签表示，具体的表格内容放置在这一对标签之中11创建表格创建表格基本语法 1行1列的内容 1行2列的内容 2行1列的内容 2行2列的内容 案例代码12创建表格创建表格带标题表格 align属性 一、二季度小说类图书销售情况 值值描描 述述示意图示意图left标题对应表格水平居左标题对应表格水平居左right标题对应表格水平居右标题对应表格水平居右top标题在表格上部显示标题在表格上部显示bottom标题在表格下部显示标题在表格下部显示13创建表格创建表格带表头表格 表头，就是表格的第一行，一般用以对各列进行简要说明。因为表头的特殊性，所以在H

4、TML中通过标签加以定义，默认以粗体、居中的方式显示 案例代码课堂练习00:20314课堂练习 练习内容 完成本节“图书销售情况”表格的所有任务K练习内容练习时间：20分钟K=15内容进度表格表格标签属性页面表格布局创建表格1617标签属性属性属性可取值可取值描述描述alignleft、center、right定义表格相对周围元素的对齐方式定义表格相对周围元素的对齐方式borderpixels定义表格边框的宽度定义表格边框的宽度widthpixels、%定义表格的宽度定义表格的宽度bordercolor颜色的三种表示方法颜色的三种表示方法定义表格边框的颜色定义表格边框的颜色bgcolor颜色的

5、三种表示方法颜色的三种表示方法定义表格的背景颜色定义表格的背景颜色backgroundURL定义表格背景图像定义表格背景图像cellpaddingpixels、%定义单元格边沿与其内容之间的空白定义单元格边沿与其内容之间的空白cellspacingpixels、%定义单元格之间的空白定义单元格之间的空白framevoid、above、below、hsides、lhs、rhs、vsides、box、border描述表格外侧边框的哪个部分是可见的描述表格外侧边框的哪个部分是可见的rulesnone、groups、rows、cols、all描述表格内侧边框的哪个部分是可见的描述表格内侧边框的哪个部分

6、是可见的summarytext定义表格的摘要定义表格的摘要表格标签属性表格标签属性18align、border、width属性bordercolor、bgcolor、background属性 案例代码cellspadding和cellspacing属性 案例代码 一、二季度小说类图书销售情况 表格标签属性表格标签属性19标签属性属性属性可取值可取值描述描述alignright、left、center、justify定义表格行中内容的水平对齐方式定义表格行中内容的水平对齐方式valigntop、middle、bottom、baseline（基线对齐）（基线对齐）定义表格行中内容的垂直对齐方式定义

7、表格行中内容的垂直对齐方式bgcolor颜色的三种表示方法颜色的三种表示方法规定表格行的背景颜色规定表格行的背景颜色表格标签属性表格标签属性20valign属性值值描描 述述示意图示意图top对内容进行上对齐对内容进行上对齐middle对内容进行居中对齐（默认值）对内容进行居中对齐（默认值）bottom对内容进行下对齐对内容进行下对齐baseline与基线对齐与基线对齐表格标签属性表格标签属性21标签属性属性属性可取值可取值描述描述alignleft、right、center、justify定义单元格中内容的水平对齐方式定义单元格中内容的水平对齐方式valigntop、middle、botto

8、m、baseline定义单元格中内容的垂直对齐方式定义单元格中内容的垂直对齐方式bgcolor颜色的三种表示方法颜色的三种表示方法定义表格行的背景颜色定义表格行的背景颜色heightpixels、%定义单元格的高度定义单元格的高度widthpixels、%定义单元格的宽度定义单元格的宽度colspannumber规定单元格可横跨的列数规定单元格可横跨的列数rowspannumber规定单元格可横跨的行数规定单元格可横跨的行数nowrapnowrap规定单元格中的内容是否折行规定单元格中的内容是否折行表格标签属性表格标签属性22nowrap属性 案例代码表格标签属性表格标签属性23单元格跨行跨列

9、的基本语法 单元格内容/td 单元格内容/td案例代码跨行跨列的表格跨行跨列的表格课堂练习00:3032425课堂练习课堂练习K练习内容练习时间：30分钟K=练习内容 完成上一页所示表格页面的效果 完成如图显示的网上商城注册页表格 从本次上机任务开始，为了提高页面开发效率，可使用Dreamweaver作为网页设计和开发工具内容进度表格表格标签属性页面表格布局创建表格27表格布局 产品列表页表格布局 表单提交页表格布局页面表格布局页面表格布局28使用表格布局 从大的格局来说，可以使用一个三行两列的表格对页面进行布局 案例代码 为了方便显示，各区域内设置了背景颜色页面表格布局页面表格布局29使用表格布局 区域2（3行3列）和区域4（6行1列）则还需要进行微布局，也就是嵌套的表格布局，以达到显示效果 案例代码页面表格布局页面表格布局课堂练习00:2033031练习内容 完成上一页表格布局页面的效果课堂练习课堂练习K练习内容练习时间：20分钟K=本章总结表格、表格的行和单元格分别用什么标签来创建？表格、表格的行和单元格分别用什么标签来创建？怎么样创建带标题的表格？怎么样创建带标题的表格？ 怎么设置单元格的内容与其边框