博客列表 >表格制作(3月16日作业)

表格制作(3月16日作业)

箭里飘香
箭里飘香原创
2018年03月18日 18:52:08859浏览

第二次课程作业

效果图如下:

效果图.png


实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>领导信息表</title>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="20" width="70%">
<caption><h1>XX公司领导信息表</h1></caption>
<thead bgcolor="lightblue">
<tr>
<th colspan="4">基本信息</th>
<th colspan="2">联系方式</th>
<th colspan="2" rowspan="2">操作<small><a href="">添加</a></small></th>
</tr>
<tr>
<th>ID</th>
<th>姓名</th>
<th>星座</th>
<th>头像</th>
<th>电话</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>张总</td>
<td>白羊座</td>
<td><img src="images/baiyang.jpg" width="100"></td>
<td>156XXXXXXXX</td>
<td>zhang@163.com</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>02</td>
<td>李总</td>
<td>天蝎座</td>
<td ><img src="images/tianxie.jpg" width="100"></td>
<td>188XXXXXXXX</td>
<td>li@163.com</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<p>
<a href="">首页</a>
<a href="">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">...</a>
<a href="">下一页</a>
<a href="">尾页</a>
</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄作业1:IMG_20180318_183848.jpg

手抄作业2:

2.jpg


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