300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > EduCoder-Web程序设计基础-html5— 简历表页面的制作-第1关:简历表页面的结构设计

EduCoder-Web程序设计基础-html5— 简历表页面的制作-第1关:简历表页面的结构设计

时间:2020-03-11 21:52:33

相关推荐

EduCoder-Web程序设计基础-html5— 简历表页面的制作-第1关:简历表页面的结构设计

目录

任务描述相关知识测试说明代码示例

任务描述

本关任务:通过表格的相关标签制作一个简单的简历表。

相关知识

为了完成本关任务,你需要掌握:1.表格标签及其属性设置,2.项目表头单元格标签和数据单元格标签,3.单元格合并的方法。

表格标签及其属性设置

在HTML网页中,所有的元素都是通过标签定义的,要想创建表格,就需要使用表格相关的标签。基本语法格式如下:

... ...1.标签的属性 1

2.标签的属性

1

3.标签的属性

1

4.标签的属性

标签用来设置表头,其文本默认加粗居中显示。

表格单元格的合并

1.水平方向单元格的合并

将两个或多个水平方向的单元格合并,可以在th或td标签中使用colspan属性来设置,属性的取值为合并的单元格的数目。

用法示例:

示例如下:

姓名 签到 备注 2.垂直方向单元格的合并 将两个或多个垂直方向的单元格合并,可以在th或td标签中使用rowspan属性来设置,属性的取值为合并的单元格的数目。 用法示例: 领导讲话 大会主题报告 分会专题报告 总结报告 专家报告 分组讨论 # 编程要求 任务描述效果图如下: 1

根据任务描述的效果图,在 Begin-End 区域内补充代码,创建一个7行5列的表格,具体要求如下:

1.将第1行的5个单元格合并,单元格中的内容为简历表,设置类名为“one two”

2.第2行的第1和第3个单元格中的文本分别为“姓名”和“民族”,类名设置为“one”;第2、4列单元格中无文本,也不设置类名;第5个单元格中文本为“照片”,并将该单元格与其下方的5个单元格合并。

3.第3-6行除了文本内容的变化外,单元格结构与第2行类似,且类名均为“one”。

5.第7行第1个单元格中文本为“目前所在地”,类名设置为“one”,将第2个单元格右侧的4个单元格合并。

测试说明

补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。

越努力越幸运,祝你成功!

代码示例

<!doctype html><html><head><meta charset="utf-8"><title>简历表</title></head><body><!-- ********* Begin ********* --><table><tr><td colspan="5" class="one two">简历表</td></tr><tr><td class="one">姓名</td><td></td><td class="one">民族</td><td></td><td rowspan="5">照片</td></tr><tr><td class="one">籍贯</td><td></td><td class="one">身高</td><td></td></tr><tr><td class="one">婚姻状况</td><td></td><td class="one">电子邮件</td><td></td></tr><tr><td class="one">联系电话</td><td></td><td class="one">QQ号码</td><td></td></tr><tr><td class="one">出生年月</td><td></td><td class="one">国籍</td><td></td></tr><tr><td class="one" >目前所在地</td><td colspan="4"></td></tr></table><!-- ********* End ********* --></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。