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

Alex_Shen
2021-05-17 / 0 评论 / 0 点赞 / 79 阅读 / 928 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-06,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

代码: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;
    在这里插入图片描述

四、结果与分析

项目一:制作成绩登记表
在这里插入图片描述
项目二:制作产品宣传页面
在这里插入图片描述
项目三:简化版“江苏教育电子政务网站”
在这里插入图片描述

0

评论区