博客列表 >第二次作业,通讯录

第二次作业,通讯录

瘦不下来的博客
瘦不下来的博客原创
2018年03月17日 23:01:45771浏览

PHP网络可第二课

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>部门通讯录</title>
</head>
<body>
<!-- 表格的属性,cellspacing 是边框与边框之间的间隙大小 ;cellpadding 属性规定的是单元边沿与单元内容之间的空间;border 属性规定规定围绕表格的边框的宽度,border 属性会为每个单元格应用边框,并用边框围绕表格。如果 border 属性的值发生改变,那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。-->
<table border="1" cellspacing="0" cellpadding="5" width="65%">
<!-- caption 元素定义表格标题。caption 标签必须紧随 table签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 -->
<caption><h3>通讯录 <small><a href="">添加</a></small></h3></caption>
<!--<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。<colgroup> 标签只能在 table 元素中使用。
在 <colgroup> 标签中使用 span,可获得第一个列组的类型。span 属性的值是 <colgroup> 标签能够影响到的列数。-->
<colgroup span="2" bgcolor="red"></colgroup>
<colgroup span="1" bgcolor="grey"></colgroup>
<colgroup span="3" bgcolor="yellow"></colgroup>

    <!-- thead,tbody,tfoot没有样式,仅仅是分区标识 -->
<thead>
<tr bgcolor="gold">
<th colspan="3">信息</th>
<th>联络方式</th>
<!-- colspan 水平方向的合并 ,rowspan 竖直合并-->
<th colspan="2" rowspan="2">操作</th>

</tr>
<tr bgcolor="skybule">
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>手机号码</th>

</tr>
</thead>

<tbody>
    <tr>
<td>01</td>
<td><img src="../image/8.jpg" width="25" alt="人物头像">阿大</td>
<td>男</td>
<td>123456789</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>

<tr>
<td>02</td>
<td><img src="../image/8.jpg" width="25" alt="人物头像">阿二</td>
<td>男</td>
<td>132456789</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>

</tr>

<tr>
<td>03</td>
<td><img src="../image/8.jpg" width="25" alt="人物头像">殿军</td>
<td>男</td>
<td>142356789</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>

<tr>
<td>04</td>
<td><img src="../image/8.jpg" width="25" alt="人物头像">阿三</td>
<td>女</td>
<td>098765432</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>

<tr>
<td>05</td>
<td><img src="../image/8.jpg" width="25" alt="人物头像">阿幺</td>
<td>男</td>
<td>098765432</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
    </tbody>
</table>
<p>
<a href="">第一页</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">。。。</a>
<a href="">10</a>
<a href="">底页</a>

</p>


</body>
</html>

手抄:

1.png

2.png


3.png

4.png

5.png

6.png

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