【Web开发及人机交互导论】表格

代码：Github仓库地址

一、实验目的

1. 掌握制作表格的各种标记及其属性语法
2. 掌握表格行标记的属性及设置方法
3. 掌握表格单元格的各种属性及设置方法
4. 学会利用表格进行Web页面表局设计、设计形式多样、风格各异的页面

二、实验环境

Windows10
HBuilderX

三、实验步骤

项目一：制作成绩登记表

1. 根据提供的CSS&HTML5框架，构建8行8列表格的框架
   合理使用rowspan，colspan属性完成单元格的合并。
   完成如下框架图。
   
2. 插入指定文字
   *拓展与提高
   1.将<tr>第一行第二行以及最后一行添加class=“blue”
   将成绩不合格<td>单元格添加class="red”
   2.添加CSS属性color: xxx；
   
3. 修改边框颜色，及宽度
   border-width: 3px;
   border-collapse: collapse;
   border-left-color: pink;
   …
   

项目二：制作产品宣传页面

1. 根据提供的CSS&HTML5框架，构建7行2列表格的框架
   在相应行数中，嵌套N行2列表格
   合理使用rowspan，colspan属性完成单元格的合并。
   完成如下框架图。
   
2. 插入指定文字与提供的CSS样式
   
3. 微调
   修改图片长和宽，使画面更协调
   width=“650px” height=“500px”
   微调字体格式大小
   

项目三：简化版“江苏教育电子政务网站”

1. 根据提供的CSS&HTML5框架，构建4行3列表格的框架
   在相应行数中，嵌套1行6列表格作为导航栏，4行1列表格作为目录
   合理使用rowspan，colspan属性完成单元格的合并。
   完成如下框架图。
   
2. 添加提供的CSS样式
3. 对比目标网页，精调

1. 导航栏宽度设置不正确，width应设置为1002/6=167px，这样可以平铺
2. 目录栏宽度太窄，且边框无颜色
   width=“200px” style=“text-align: center;” border=“1px” bordercolor=“white”
3. 超链接动态颜色为白色，无提示效果。改为黑色。
4. 优化字体，更改为“黑体”。
5. 最后一栏未居中text-align: center;
   

四、结果与分析

项目一：制作成绩登记表

项目二：制作产品宣传页面

项目三：简化版“江苏教育电子政务网站”