简历表页面的制作

是小鹿呀
232 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

第1关：简历表页面的结构设计

相关知识

表格标签及其属性设置

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

<table>    
    <tr>      
        <td>单元格内的文字</td>     
        ...   
    </tr>   
    ...
</table>
1.<table>标签的属性

1

2.<tr>标签的属性

1

3.<td>标签的属性

1

4.<th>标签的属性

<th></th>标签用来设置表头，其文本默认加粗居中显示。

表格单元格的合并

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

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

<tr>   
    <th>姓名</th>   
    <th colspan="4">签到</th> 
    <th>备注</th>
</tr>
2.垂直方向单元格的合并

将两个或多个垂直方向的单元格合并，可以在th或td标签中使用rowspan属性来设置，属性的取值为合并的单元格的数目。 用法示例：

<tr> 
    <td rowspan="2">领导讲话 </td> 
    <td>大会主题报告</td> 
    <td>分会专题报告</td> 
    <td rowspan="2">总结报告</td>
</tr>
<tr>  
    <td>专家报告</td> 
    <td>分组讨论</td>
</tr>

编程要求

任务描述效果图如下：

1

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

  1. 将第1行的5个单元格合并，单元格中的内容为简历表，设置类名为“one two”
  2. 第2行的第1和第3个单元格中的文本分别为“姓名”和“民族”，类名设置为“one”；第2、4列单元格中无文本，也不设置类名；第5个单元格中文本为“照片”，并将该单元格与其下方的5个单元格合并。
  3. 第3-6行除了文本内容的变化外，单元格结构与第2行类似，且类名均为“one”。
  4. 第7行第1个单元格中文本为“目前所在地”，类名设置为“one”，将第2个单元格右侧的4个单元格合并。

通关代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简历表</title>
</head>
<body>
<!-- ********* Begin ********* -->
<table>
    <tr>
        <td align="center" colspan="5" class="one two">简历表</td>
    </tr>
    <tr>
        <td class = "one">姓名</td>
        <td></td>
        <td class = "one">民族</td>
        <td></td>
        <td rowspan = "5"class = "one">照片</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>

第2关：简历表页面的样式设计

相关知识

CSS控制表格样式

除了表格标签自带的属性外，还可用CSS的边框、宽高、颜色等来控制表格样式。此外，CSS中还提供了表格专用属性，以便控制表格样式。 1

1.CSS控制表格边框

CSS代码如下所示：

table{ 
    width:280px;   
    height:280px; 
    border:1px solid #F00;    /*设置table的边框*/
}
td,th{
    border:1px solid #F00; 
}    /*为单元格单独设置边框*/
2.CSS控制表格边距

CSS代码如下所示：

th,td{
    border:1px solid #30F;  /*为单元格单独设置边框*/
    padding:20px; /*为单元格内容与边框设置20px的内边距*/
    margin:20px;   /*为单元格与单元格边框之间设置20px的外边距*/
}
3.CSS控制单元格宽高

CSS代码如下所示：

td{   
    width:20px;  
    Height:20px;
}

编程要求

根据任务描述提示的目标效果，在右侧编辑器补充代码，具体要求如下：

  1. 设置table的边框为1像素、实线、且颜色为#ccc。
  2. 设置table的宽度高度分别为600像素和40像素。
  3. 用两个参数设置外边距：上下为0像素、左右居中。
  4. 运用border-collapse属性将表格的双边框合并为一个单一边框。
  5. 设置table中字体大小为14像素。

通关代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简历表</title>
<!-- ********* Begin ********* -->
<style type="text/css">
table{
    border: 1px solid #ccc;    /*设置table的边框*/
    width: 600px;
    height: 40px;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 14px;
    }
td{
    width:80px;
    border:1px solid #ccc;
    }
.one{background:#eee;}
.two{
    text-align:center;
    font-size:20px;
    font-weight:bold;
    }
</style>
<!-- ********* End ********* -->
</head>
<body>
<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>
</body>
</html>
avatar
文章
阅读
粉丝