第7章 表格与页面布局.pptVIP

第7章 表格与页面布局 本章要点 1.表格的功能和基本结构 2.表格在页面布局中的作用 3.在Dreamweaver中制作各种表格 4. CSS 布局概述 5.使用 AP 元素进行布局 6.使用框架进行布局 1.表格的功能和基本结构 表格的基本功能是用来显示行列分明的数据，例如列车时刻表、体育比赛积分表、日程表等。 Table Caption表格标题/Caption TR TH第一行第一个单元格/TH TH第一行第二个单元格/TH ….. /TR TR TD第二行第一个单元格/TD TD第一行第二个单元格/TD …. /TR /Table 1.1表格标记符及其属性 Table/Table 定义整个表格，表格中的所有内容都必须位于Table/Table之间。 1.1表格标记符及其属性 属性： Align：对齐方式 Bordercolor：设置表格边框的颜色 Bgcolor：设置背景颜色 Background：设置背景图案 控制边框和分隔线 Frame：控制表格最外层的四条边框 Rules：控制是否显示及如何显示单元格之间的分隔线 控制单元格空白 Cellspacing：控制单元格之间的空白。（像素） Cellpadding：控制表格分割线与数据之间的空白。（像素） 控制表格的高度或宽度 Width：设置表格列宽，可取像素或百分比 Height：设置表格行高，可取像素或百分比 1.1表格标记符及其属性 Frame：控制表格最外层的四条边框 1.1表格标记符及其属性 Rules：控制是否显示及如何显示单元格之间的分隔线 值： none-缺省值，表示无分隔线 rows表示仅有行分隔线 cols表示仅有列分隔线 all 表示包括所有分隔线 1.1表格标记符及其属性 TR：定义表格的一行 属性： Height：设置当前行的高度，取值为像素 Width：设置当前行的宽度，取值为像素 Bgcolor：设置当前行的背景色 Background：设置当前行的背景图案 Bordercolor：设置当前行的边框颜色 1.1表格标记符及其属性 THTD 定义表格行列单元格内容 属性： Rowspan：行合并，其取值表示纵向方向上合并的行数 Colspan：列合并，其取值表示横向方向上合并的列数。 Align：控制单元格内容的水平对齐 Valign：控制单元格内容的垂直对齐 Height：控制单元格高度，取值为像素数 Width：控制单元格宽度，取值为像素数 Bgcolor：设置背景颜色 Background：设置背景图案 2 表格在页面布局中的作用 布局表格中包含若干多个布局单元格，只能在布局单元格中添加网页内容，例如，文本、图片以及其他的一些多媒体信息等，这样通过布局表格与布局单元格的相互配合，就形成了页面的布局。 设计网页布局实际就是要设计布局表格与布局单元格，这两者之间位置排列、表格大小以及前后顺序的设计，往往直接决定了整个布局的质量。 表格效果样例: 表格可以实现多种多样的效果 练习：请画出下面HTML文件在浏览器中的显示效果 Table border=“1” TR TD colspan=3aaa TDbbb TDccc TR TDddd TD rowspan=3eee TDfff TD rowspan=2 colspan=2ggg TR TDhhh TDiii TR TDjjj TDkkk TDmmm TDnnn /Table 练习：编写HTML代码，完成下表 3.在Dreamweaver中制作各种表格 使用插入栏中的布局类别中的表格按钮添加表格，此外还可以使用属性检查器修改表格的各种基本属性(主要指行、列属性其他属性可以使用定义CSS 样式的方式来修饰)。 3.1 制作简单表格 演示 3.2 制作嵌套表格 嵌套表格是指表格单元格中的内容是另外一个表格，通常用于实现复杂的布局效果。 演示 3.3 制作复制表格 复杂表格是指包含合并单元格的表格。 演示 3.4 表格网页布局示例 演示1 演示2 4. CSS 布局概述 CSS 页面布局使用层叠样式表技术，对页面内容进行组织。CSS 布局基本构造块是 div 标记符，在大多数情况下用作文本、图像或其他页面元素的容器。 设计者创建 CSS 布局时，应将 div 标记符