博主信息
博文 71
粉丝 1
评论 1
访问量 102117
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
316-HTML列表
小威的博客
原创
1101人浏览过
  • 表1 效果图

1.jpg

  • 表1代码如下:


  • 实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" name="keywords" content="手机">
    <title>中国手机</title>
    </head>
    <body>
    
    
    <table border="2"  background="../images/pt1.jpg" cellspacing="0" cellpadding="5" width="80%">
    <caption><h3>中国手机销售TOP50排行榜    <small><a href="http://top.zol.com.cn/">数据收集:中关村</a></small></h3></caption>
    
            
            <colgroup span="1" bgcolor="lighryellow"></colgroup>
            <colgroup span="1" bgcolor="lightgreen"></colgroup>
            <thead>
            <tr bgcolor="skyblue">
             <th colspan="2">信息</th>
             <th colspan="3">数据</th>
    <th colspan="3" rowspan="2">操作</th>
            </tr>
            <tr bgcolor="skyblue">
    <th>排名</th>
    <th>品牌</th>
    <th>综合评分</th>
    <th>市场占比</th>
    <th>销售量(台)</th>
    </tr>
       </thead>
       <tbody>
    <tr style="font-weight:bold">
    <td><font color="red">01</td>
    <td><img src="../images/1.jpg" width="100" height="30"><font color="blue">     vivo</font></td>
    <td>99.2</td>
    <td>17.2%</td>
    <td>850W</td>
    <th><a href="http://www.vivo.com" target="_blank">官方网站</th>
    <th><a href="http://shop.vivo.com.cn/" target="_blank">在线购买</th>
    </tr>
    <tr style="font-weight: bold;">
    <td><font color="red">02</td>
    <td><img src="../images/2.jpg" width="100" height="30"><font color="blue">      oppo</font></td>
    <td>96.8</td>
    <td>12.4%</td>
    <td>700W</td>
    <th><a href="http://www.oppo.com/" target="_blank">官方网站</th>
    <th><a href="https://www.opposhop.cn/" target="_blank">在线购买</th>
    </tr>
    <tr style="font-weight: bold;">
    <td><font color="red">03</td>
    <td><img src="../images/3.jpg" width="100" height="30"><font color="blue">      小米</font></td>
    <td>94.4</td>
    <td>11.6%</td>
    <td>680W</td>
    <th><a href="https://www.mi.com" target="_blank">官方网站</th>
    <th><a href="https://www.mi.com" target="_blank">在线购买</th>
    </tr>
    <tr style="font-weight: bold;">
    <td><font color="red">04</td>
    <td><img src="../images/4.jpg" width="100" height="30"><font color="blue">      苹果</font></td>
    <td>92.3</td>
    <td>10.2%</td>
    <td>400W</td>
    <th><a href="https://www.apple.com" target="_blank">官方网站</th>
    <th><a href="https://apple.tmall.com" target="_blank">在线购买</th>
    </tr>
    <tr style="font-weight: bold;">
    <td><font color="red">05</td>
    <td><img src="../images/5.jpg" width="100" height="30"><font color="blue">      三星</font></td>
    <td>87.6</td>
    <td>9.2%</td>
    <td>100W</td>
    <th><a href="http://www.samsung.com" target="_blank">官方网站</th>
    <th><a href="https://www.samsungshop.com.cn" target="_blank">在线购买</th>
    </tr>
    </table>
    </tbody>
    
    </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.jpg

2.jpg

  • 表2的效果图如下:

2.jpg

  • 表2的代码如下:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="keywords" content="兵器">
<title>江湖</title>
</head>
<body>


    <thead>
<table border="3" background="../images/jh.jpg"  cellspacing="0" cellpadding="5" width="80%" style="margin-top: 5px; line-height: 20px;" bgcolor="red">
<tr style="background: #3c4d82;color: #ffffff;font-weight: bold;">
<td colspan="8">江湖门派排行榜</td>
</tr>
    <colgroup span="1" bgcolor="lighryellow"></colgroup>

<tr bgcolor="skyblue">
<th>排名</th>
<th>门派名称</th>
<th>等级</th>
<th>活跃度</th>
<th>掌门</th>
<th>门派战力</th>
<th>人数</th>
<th>操作</th>
</tr>
    </thead>
    <tbody>
     <tr style="color:#FF00FF;font-weight:bold">
     <td>01</td>
     <td>少林</td>
     <td>10</td>
     <td>100</td>
     <td>达摩</td>
     <td>1000w</td>
     <td>100w</td>
     <td><a href="">申请加入</td>
     </tr>
     <tr style="color:#FF00FF;font-weight: bold">
     <td>02</td>
     <td>武当</td>
     <td>09</td>
     <td>90</td>
     <td>张三丰</td>
     <td>900W</td>
     <td>90W</td>
     <td><a href="">申请加入</td>
     </tr>
     <tr style="color:#FF00FF;font-weight: bold">
     <td>03</td>
     <td>峨眉</td>
     <td>08</td>
     <td>80</td>
     <td>灭绝师太</td>
     <td>800w</td>
     <td>80w</td>
     <td><a href="">申请加入</td>
     </tr>
     <tr style="color:#FF00FF;font-weight: bold">
     <td>04</td>
     <td>昆仑</td>
     <td>07</td>
     <td>70</td>
     <td>一元祖师</td>
     <td>700w</td>
     <td>70w</td>
     <td><a href="">申请加入</td>
     </tr>
     <tr style="color:#FF00FF;font-weight: bold">
     <td>05</td>
     <td>崆峒</td>
     <td>06</td>
     <td>60</td>
     <td>木灵子</td>
     <td>600w</td>
     <td>60w</td>
     <td><a href="">申请加入</td>
     </tr>
     <tr style="color:#FF00FF;font-weight: bold">
     <td>06</td>
     <td>华山</td>
     <td>05</td>
     <td>50</td>
     <td>风清扬</td>
     <td>500W</td>
     <td>50W</td>
     <td><a href="">申请加入</td>
     </tr>
     <tr style="color:#FF00FF;font-weight: bold">
     <td>07</td>
     <td>嵩山</td>
     <td>04</td>
     <td>40</td>
     <td>左冷禅</td>
     <td>400w</td>
     <td>40w</td>
     <td><a href="">申请加入</td>
     </tr>
     <tr style="color:#FF00FF;font-weight: bold">
     <td>08</td>
     <td>丐帮</td>
     <td>03</td>
     <td>30</td>
     <td>洪七公</td>
     <td>300w</td>
     <td>30w</td>
     <td><a href="">申请加入</td>
     </tr>
     <tr style="color:#FF00FF;font-weight: bold">
     <td>09</td>
     <td>逍遥</td>
     <td>02</td>
     <td>20</td>
     <td>逍遥子</td>
     <td>200w</td>
     <td>20w</td>
     <td><a href="">申请加入</td>
     </tr>
     <tr style="color:#FF00FF;font-weight: bold">
     <td>10</td>
     <td>衡山</td>
     <td>01</td>
     <td>10</td>
     <td>莫大</td>
     <td>100w</td>
     <td>10w</td>
     <td><a href="">申请加入</td>
     </tr>

    </tbody>


</table>

</body>
</html>

运行实例 »

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

  • 手抄代码如下:

3.jpg

4.jpg


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学