Blogger Information
Blog 46
fans 1
comment 1
visits 30308
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月16日作业
笨鸟先飞
Original
654 people have browsed it

第一次制作像样得表格!!!

代码:

实例

实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习表格</title>
</head>
<body>
   <table border="1"  cellspacing="0"  cellpadding="5"   align="center" width="80%" >
      <caption><h2>通讯录 <small><a href="">新增</a></small></h2></caption>
     <!-- <colgroup span="1" bgcolor="red"></colgroup>
      <colgroup span="1" bgcolor="lightgreen"></colgroup>
      <colgroup span="2" bgcolor="brown">
       <col bgcolor="yellow">
        <col>
      </colgroup>
      <colgroup span="1" bgcolor="cyan"></colgroup>-->
      
      <thead>
        <tr bgcolor="yellow">
           <th colspan="3">姓名</th>
           <th colspan="3">相关信息</th>
           <th colspan="2" rowspan="2" >编辑</th>
        </tr>
        <tr  bgcolor="yellow"> 
         <th>ID</th>
         <th>曾用名</th>
         <th>现用名</th>
         <th>电话号码</th>
         <th>关系</th>
         <th>备注</th>
         <!--<th>编辑</th>-->
        </tr>
       </thead>
       <tbody>
        <tr>
         <td>01</td>
         <td><img src="images/1.jpg" width="20">张大山</td>
         <td><img src="images/1.jpg" width="20">张大山</td>
         <td>12345678901</td>
         <td>同学</td>
         <td>张三</td>
         <td><a href="">添加</a></td>
         <td><a href="">删除</a></td>
        </tr>
        <tr>
         <td>02</td>
         <td><img src="images/2.jpg" width="20">李海</td>
         <td><img src="images/2.jpg" width="20">李海</td>
         <td>12345678902</td>
         <td>同事</td>
         <td>李四</td>
         <td><a href="">添加</a></td>
         <td><a href="">删除</a></td>
        </tr>
        <tr>
         <td>03</td>
         <td><img src="images/3.jpg" width="20">王长明</td>
         <td><img src="images/3.jpg" width="20">王长明</td>
         <td>12345678903</td>
         <td>大学同学</td>
         <td>王麻子 </td>
         <td><a href="">添加</a></td>
         <td><a href="">删除</a></td>
        </tr>
        <tr>
         <td>04</td>
         <td><img src="images/4.jpg" width="20">陈东</td>
         <td><img src="images/4.jpg" width="20">陈东</td>
         <td>12345678904</td>
         <td>不认识</td>
         <td>陈不知</td>
         <td><a href="">添加</a></td>
         <td><a href="">删除</a></td>
        </tr>
        <tr>
         <td>05</td>
         <td><img src="images/5.jpg" width="20">覃正红</td>
         <td><img src="images/5.jpg" width="20">覃正红</td>
         <td>12345678905</td>
         <td>亲人</td>
         <td>红红</td>
         <td><a href="">添加</a></td>
         <td><a href="">删除</a></td>
        </tr>
        </tbody>
       <!-- <tfoot>
        <tr bgcolor="green">
         <td>06</td>
         <td colspan="2">不知道填啥</td>
         <td>10086</td>
         <td>用户</td>
         <td>坑人</td>
        </tr>
        </tfoot>-->
    </table>
    <p>
     <a href="">首页</a>
        <a href="">上一页</a>
        <a href="">...</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">...</a>
        <a href="">下一页</a>
        <a href="">尾页</a>
    </p>

运行实例 »

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


手写代码:

作业图片IMG_2937_meitu_1.jpg作业图片IMG_2938_meitu_2.jpg作业图片IMG_2939_meitu_3.jpg作业图片IMG_2940_meitu_4.jpg作业图片IMG_2941_meitu_5.jpg作业图片IMG_2942_meitu_6.jpg

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post