博客列表 >html 表格制作

html 表格制作

清雨的博客
清雨的博客原创
2018年03月16日 22:53:071042浏览

222.png

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工信息表</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" width="80%" align="center">
<caption><h3>员工信息表</h3></caption>
<tr bgcolor="#0D20F2">
<th colspan="2">部门及职位</th>
<th colspan="4">员工基本信息</th>
</tr>
<tr bgcolor="#08ECF8">
<th>部门</th>
<th>职位</th>
<th>照片</th>
<th>姓名</th>
<th>手机号</th>
<th>邮箱</th>
</tr>
<tr>
<td rowspan="4">行政部</td>
<td>总经理</td>
<td><img src="../0316/images/1.jpg" width="30" alt="李易峰"></td>
<td>李易峰</td>
<td>13888888888</td>
<td>liyifeng@163.com</td>
</tr>
<tr>
<td rowspan="3">职员</td>
<td><img src="../0316/images/2.jpg" width="30" alt="张三丰"></td>
<td>张三丰</td>
<td>15947263824</td>
<td>sanfeng@qq.com</td>
</tr>
<tr>
<td><img src="../0316/images/3.jpg" width="30" alt="张无忌"></td>
<td>张无忌</td>
<td>15848231142</td>
<td>wuji@qq.com</td>
</tr>
<tr>
<td><img src="../0316/images/4.jpg" width="30" alt="李莫愁"></td>
<td>李莫愁</td>
<td>18098423058</td>
<td>mochou@126.com</td>
</tr>
<tr>
<td rowspan="2">财务部</td>
<td>财务经理</td>
<td><img src="../0316/images/5.jpg" width="30" alt="小龙女"></td>
<td>小龙女</td>
<td>13394876328</td>
<td>longnv@qq.com</td>
</tr>
<tr>
<td>出纳</td>
<td><img src="../0316/images/2.jpg" width="30" alt="乔峰"></td>
<td>乔峰</td>
<td>15956943217</td>
<td>qiao@sina.com</td>
</tr>
<tr>
<td rowspan="2">市场部</td>
<td>经理</td>
<td><img src="../0316/images/2.jpg" width="30" alt="金毛狮王"></td>
<td>金毛狮王</td>
<td>15947263824</td>
<td>sanfeng@qq.com</td>
</tr>
<tr>
<td>市场专员</td>
<td><img src="../0316/images/2.jpg" width="30" alt="慕容复"></td>
<td>慕容复</td>
<td>15947263824</td>
<td>sanfeng@qq.com</td>
</tr>
</table>
</body>
</html>

第一遍(脱离电脑书写,进行纯手写,写的有点乱,最后检查发现有些东西忘记写最后进行了补充)

1.jpg2.jpg3.jpg

第二遍

1.jpg

2.jpg

3.jpg3.jpg

上一条:3-16下一条:第二天掌握语法
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议