HTMLCSSJavaScript网页制作教学课件作者刘瑞新第3章节网页布局与交互课件.pptVIP

HTML+CSS+JavaScript网页制作 机械工业出版社同名教材 配套电子教案 3.1 案例：网络花店购物车信息统计——表格 3.2 案例：网银在线支付步骤及版权信息—— 分区和局部信息 3.3 案例：网络花店会员注册页面——表单 3.4 实训：使用表格布局技术制作用户注册表单 第3章 网页布局与交互 【案例展示】使用表格布局技术制作网络花店购物车信息统计页面，本例文件3-1.html在浏览器中的显示效果，如图3-1所示。 3.1 案例：网络花店购物车信息统计——表格 3.1.1 表格的结构 表格是由行和列组成的二维表，每个表格均有若干行，每行有若干列，行和列围成的区域是单元格，单元格的内容是数据，也称数据单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示如图3-1所示。 3.1 案例：网络花店购物车信息统计——表格 行 列 单元格 3.1.2 表格的基本语法 表格主要通过3个标签来构成：table、tr和td。 表格的语法格式为： table border=n width=x|x% height=y|y% cellspacing=i cellpadding=j caption align=left|right|top|bottom valign=top|bottom标题/caption tr th表头1/th th表头2/th th…/th th表头n/th/tr tr td表项1/td td表项2/td td…/td td表项n/td/tr … tr td表项1/td td表项2/td td…/td td表项n/td/tr /table 3.1 案例：网络花店购物车信息统计——表格 3.1.3 表格修饰 表格是网页布局中的重要元素，它有丰富的属性，可以对其设置进而美化表格。 1．设置表格的边框 可以使用table标签的border属性为表格添加边框并设置边框宽度及颜色。表格的边框按照数据单元将表格分割成单元格，边框的宽度以像素为单位，默认情况下表格边框为0。 2．设置表格大小 如果需要表格在网页中占用适当的空间，可以通过width和height属性指定像素值来设置表格的宽度和高度，也可以通过表格宽度占浏览器窗口的百分比来设置表格的大小。 3.1 案例：网络花店购物车信息统计——表格 3.1.3 表格修饰 3．设置表格背景颜色 表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。 4．设置表格背景图像 表格背景图像可以是GIF、JPEG或PNG三种图像格式。设置background属性，可以设定表格背景图像。 5．设置表格单元格间距 使用cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。 3.1 案例：网络花店购物车信息统计——表格 3.1.3 表格修饰 6．设置表格单元格边距 单元格边距是指单元格中的内容与单元格边框的距离，使用cellpadding属性可以调整单元格中的内容与单元格边框的距离。 7．设置表格在网页中的对齐方式 表格在网页中的位置有3种：居左、居中和居右。使用align属性设置表格在网页中的对齐方式，在默认的情况下表格的对齐方式为左对齐。格式为： table align=left|center|right 3.1 案例：网络花店购物车信息统计——表格 3.1.3 表格修饰 8．表格数据的对齐方式 （1）行数据水平对齐 使用align可以设置表格中数据的水平对齐方式。 （2）单元格数据水平对齐 如果在某个单元格的td标签中使用align属性，那么align属性将影响该单元格数据水平对齐方式。 （3）行数据垂直对齐 如果在tr标签中使用valign属性，那么valign属性将影响整行数据单元的垂直对齐方式，这里的valign值可以是top、middle、bottom、baseline。它的默认值是middle。 3.1 案例：网络花店购物车信息统计——表格 3.1.4 不规范表格 1．设置单元格跨行 跨行是指单元格在垂直方向上合并，语法如下： table tr td rowspan=所跨的行数单元格内容/td /tr /table 其中，rowspan表示跨行的意思。 【演示3-1-2】制作一个跨行展示的鲜花分类销量表格。 3.1 案例：网络花店购物车信息统计——表格 3.1.4 不规范表格 2．设置单元格跨列 跨列是指单元格在水平方向上合并，