第六章 表格解析.pptVIP

第六章　表格 第六章　表格 本章学习要点： 表格的插入 表格的编辑 表格属性的设置 整理表格和单元格内容的方法 表格的HTML标签 表格的布局模式 6.1 案例1使用表格制作学生成绩单 〖学习目标〗通过案例学习，掌握表格的插入、表格的属性设置及对表格的编辑。 〖知识要点〗插入表格；表格的属性设置；表格的拆分和合并等。案例效果如图所示。 操作步骤： 在页面中插入表格 设置表格属性 编辑表格 选择表格 合并或拆分单元格 添加或删除行和列 6.2 学习任务：表格标签 掌握表格标签的功能和应用，能使用标签选择器设置表格的属性。 表格标签主要有table、caption、tr、td和th。 6.2.1使用表格标签制作网页表格 html head title无标题文档/title /head body table width=364 height=140 border=1 cellpadding=0 bordercolor=#6600FF bgcolor=#FFFF66 tr td width=113div align=center class=STYLE3设计人员/div/td td width=119div align=center class=STYLE3工龄/div/td td width=118div align=center class=STYLE3联系电话/div/td /tr tr tddiv align=center class=STYLE2张玉华/div/td tddiv align=center class=STYLE210/div/td tddiv align=center class=STYLE213745672345/div/td /tr tr tddiv align=center class=STYLE2李秋月/div/td tddiv align=center class=STYLE212/div/td tddiv align=center class=STYLE213445670890/div/td /tr /table /body /html 6.2.2在标签选择器中设置表格的属性 6.3 案例2 利用表格布局网站页面 〖学习目标〗掌握使用表格进行网页布局的方法，根据网页内容所需，能够熟练地在页面中导入表格数据，并能对表格数据进行排序，熟悉导出表格数据的方法。 〖知识要点〗用表格布局网页；导入、导出表格数据；排序表格等。效果如图所示。 操作步骤： 使用表格进行网页布局 导入和导出表格数据 1．导入Microsoft Excel表格 2．导出表格 导入和导出表格式数据 排序表格 6.4 案例3 利用表格的布局模式实现复杂的页面布局 〖学习目标〗掌握利用表格布局模式进行页面布局的技能和方法。 〖知识要点〗布局模式下的布局表格和布局单元格等。案例效果如图所示。 操作步骤： 在表格布局模式下绘制表格或单元格 1．表格布局模式 2．绘制布局表格 3．绘制布局单元格 4．退出表格布局模式 利用布局表格布局网页 1．布局网页顶部 2．布局网页主体部分 3．布局网页底部 4．美化网页布局 谢 谢！ 网页设计与制作 网页设计与制作 代码解析：上面的HTML代码确定了插入的表格是3行3列的表格，表格“边框”为1，“背景颜色”为#FFFF66，“边框颜色”为#6600FF，单元格中输入的文本居中对齐。 设置表格的宽度 width all，显示表格所有内部线框 cols，只显示表格内部纵向线框 rows，只显示表格内部横向线框 groups，表格内部横向和纵向线框不显示 none，表格内部所有线框不显示 rules vsides，只显示左右边框 void，不显示边框 rhs，只显示右边框 lhs，只显示左边框 hsides，显示上下边框 box，显示上下左右边框 border，时显示上下左右边框 below，只显示下边框 above，只显示上边框 frame 设置表格的间距 cellspacing 设置表格的填充 cellpadding 设置表格的边框粗细 border 设置表格的背景颜色 bgcolor 表格的对齐方式，分为center（居中）、left（左对齐）、right（右对齐） align 含义 属性 表格的属性及含义