表格.ppt

1、第5章 表格 网页设计与制作实例教程知识要点n表格标记 n表格的基本结构 n表格的属性 n表格的结构标记 网页设计与制作实例教程实例5-1 表格的基本标记 姓名姓名班级班级成绩成绩张力三班85一个简单的表格是由四对标记组成的，分别是：1表格标记表格标记 定义一个表格，每一个表格只有一对和，一张页面中可以有多个表格。2表格行标记表格行标记 定义表格的行，一个表格可以有多行，所以和对于一个表格来说不是唯一的。3.表格单元格标记表格单元格标记 定义表格的一个单元格，每行可以有不同数量的单元格，在和之间是单元格的具体内容。定义表头单元格，位于与之间的文本默认以粗体居中显示。网页设计与制作实例教程表格的

2、基本结构 n定义表格n定义表行n定义表头nnn定义单元格nn网页设计与制作实例教程实例5-2 表格的宽和高 1表格的宽度表格的宽度Width属性 指定整个表格或表格的某一行和某个单元格的宽度。单位可以是百分比（%）或者像素（px）,百分比设置宽度的相对值，像素设置宽度的绝对值。2表格的高度表格的高度height属性：指定整个表格或表格中的某一行和某个单元格的高度。单位可以是百分比（%）或者像素（px）,百分比设置高度的相对值，像素设置高度的绝对值。苹果苹果香蕉香蕉西瓜西瓜喜欢一般不喜欢网页设计与制作实例教程实例5-3 表格的边框表格边框是通过border属性来设置的。网页设计与制作实例教程实例

3、5-4 表格的边框颜色 bordercolor属性可以指定表格或某一个单元格表格或某一个单元格的边框颜色，它也可以指定某一行的边框颜色，格式分别为、和。网页设计与制作实例教程实例5-5 表格的背景色和背景图像 bgcolor属性用于指定表格或某一个单元格表格或某一个单元格的背景颜色，background属性用于指定表格或某一个单元格表格或某一个单元格的背景图片。格式分别为和，和。网页设计与制作实例教程实例5-6 表格的对齐方式1.表格的水平对齐表格的水平对齐align属性：指定表格在窗口中的水平对齐方式，也可以指定某一行或某一个单元格里的内容（文本、图片等）相对于所在单元格的水平对齐方式。有三

4、个值，left、center和right，分别代表左对齐、居中对齐和右对齐。格式分别为、和和。2.单元格的垂直对齐单元格的垂直对齐valign属性：指定某一行或某一个单元格里的内容（文本、图片等）相对于所在单元格的内容（文本、图片等）相对于所在单元格的垂直对齐方式垂直对齐方式。有top、middle、bottom和baseline四个值，分别代表顶端对齐、居中对齐、底部对齐和基线对齐，格式为和。网页设计与制作实例教程实例5-7 表格间距和边距 单元格的间距（cellspacing属性）：指定表格中单元格之间的距离，格式为。单元格的边距（cellpadding属性）：指定单元格里的内容（文本、图

5、片等）距离单元格边框的距离，格式为。网页设计与制作实例教程实例5-8 单元格跨越列数 Colspan属性值表示当前单元格跨越的列数，格式为，“#”处输入列数值。网页设计与制作实例教程实例5-9 单元格跨越多行 rowspan属性值表示当前单元格跨越的行数,格式为,“#”处输入行数值。网页设计与制作实例教程实例5-10 表格结构标记，表的题头(Header)，指定表格题头部分的内容。，表的正文(Body)，指定位于表格主体部分的内容。.-表的脚注(Footer)，指定位于表格脚注部分的内容。网页设计与制作实例教程实例5-11 表格结构标记的作用 在设置整个表格主体、题头或脚注部分的属性时，表格结构标记的作用就显而易见了。只要对thead、tbody和tfoot标记的属性进行修改，就能对整个部分的所有单元格属性进行修改，从而省去了逐一修改单元格属性的麻烦，大大方便了操作。网页设计与制作实例教程实例5-12 综合实例 表格不仅可以清晰地显示数据，还可以实现文本、图像等网页元素在页面中的合理布局。2022/11/816表格的应用表格的应用注意：表格布局页面和定位元素时，如果希望表格顶着页面边线，可以设置表格的页面布局作用表格的页面布局作用 1.单级表格 2.重复单级表格 3.嵌套表格