第7章使用表格布局网页.PDFVIP

第7章 使用表格布局网页 《网页设计与制作案例教程》 （第3版） 本章学习内容  7.1 案例1 设计学生成绩单  7.2 学习任务：表格标签  7.3 案例2 使用表格布局图书资源网  7.4 案例3 设计旅游信息网  7.5 实训 《网页设计与制作案例教程》 （第3版） 7.1 案例1 设计学生成绩单  学习目标：通过本案例的学习，熟练掌握创建 表格、设置表格的属性、编辑表格等操作，为 使用表格布局网页打好基础。  知识要点：创建表格，表格的属性设置，选择 表格或表格单元格，插入、删除行和列，表格 的拆分和合并等。案例效果如图7-1所示。 《网页设计与制作案例教程》 （第3版） 7.1 案例1 设计学生成绩单 图7-1 学生成绩单 《网页设计与制作案例教程》 （第3版） 7.1 案例1 设计学生成绩单 7.1.1 创建表格 表格是由若干行和列组成的。表格横向叫行， 纵向叫列，行列交叉的区域是单元格，如下图。 表格的基本组成 《网页设计与制作案例教程》 （第3版） 7.1 案例1 设计学生成绩单 一般以单元格为单位来插入网页元素，以行和列为 单位来修改性质相同的单元格。单元格中的内容和 单元格边框的距离叫边距，单元格和单元格之间的 距离叫间距，整个表格边缘叫边框。 《网页设计与制作案例教程》 （第3版） 7.1 案例1 设计学生成绩单 创建表格时，打 开的 “表格”对 话框如图所示。 “表格”对话框 《网页设计与制作案例教程》 （第3版） 7.1 案例1 设计学生成绩单 “表格”对话框中各项含义： • 行数：设置表格的行数。 • 列数：设置表格的列数。 • 表格宽度：以像素为单位或按占浏览器窗口宽 度的百分比指定表格的宽度。 • 边框粗细：设置表格边框的宽度（以像素为单 位）。若希望浏览器不显示边框，可将其值设 置为0像素。 • 单元格边距：用于设置单元格内容与单元格边 框之间的像素数。 《网页设计与制作案例教程》 （第3版） 7.1 案例1 设计学生成绩单 • 单元格间距：用于设置相邻的表格单元格之间的 像素数。 • “标题”栏：用于设置表格标题的样式。 “无” 对表格不启用列或行标题； “左”将表格的第一 列作为标题列； “顶部”将表格的第一行作为标 题行； “两者”能够在表格中输入列标题和行标 题。 • “辅导功能”栏：其中的 “标题”用于设置显示 在表格外的表格标题； “摘要”给出对表格的内 容摘要，屏幕阅读器可以读取摘要文本，但是该 文本不会显示在用户的浏览器中。 《网页设计与制作案例教程》 （第3版） 7.1 案例1 设计学生成绩单 7.1.2 设置表格属性 表格 “属性”面板如下图所示。 表格 “属性”面板 表格 “属性”面板中主要参数含义： • “表格”下拉列表框：用于输入表格的ID标识， 以方便脚本引用该表格。 • 行、列：用于显示并设置表格中行数、列数。 《网页设计与制作案例教程》 （第3版） 7.1 案例1 设计学生成绩单 • 宽：以像素为单位或按浏览器窗口宽度的百分比 指定表格的宽度。 • 填充：也称单元格边距，是单元格内容和单元格 边框之间的像素数。对于大多数浏览器来说，此 选项的值设