<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表格与表单01</title>

        <style>

            table{

                width: 300px;

                height: 40px;

                margin: 100px auto;

                border-collapse: collapse;

            }

            .th2{

                float: left;

                padding-top: 5px;

                padding-bottom: 5px;

            }

            .th1{

                background: darkblue;

                color: sandybrown;

                padding: 5px 20px;

            }

            .th4{

                background: darkblue;

                color: #5F9EA0;

                padding: 5px 20px;

            }

            .th3{

                background: #4682B4;

                color: #5F9EA0;

                padding: 5px 20px;

            }

            .box1{

                width: 15px;

                height: 15px;

                background: orange;

                padding: 1px 2px;

                float: left;

                color: #FFFFFF;

            }

            .box2{

                width: 15px;

                height: 15px;

                background: #A9A9A9;

                padding: 1px 2px;

                float: left;

                color: #FFFFFF;

            }

        </style>

    </head>

    <body>

        <table>

            <tr>

                <th colspan="2" class="th1"><span class="th2">排名队名</span></th>

                <td class="th1">胜/负</td>

                <td class="th1">胜差</td>

            </tr>

            <tr>

                <th colspan="2" class="th3"><span class="th2"><div class="box1">1</div>&nbsp;&nbsp;y-猛虎</span></th>

                <td class="th3">23/9</td>

                <td class="th3">0.0</td>

            </tr>

            <tr>

                <th colspan="2" class="th4"><span class="th2"><div class="box1">2</div>&nbsp;&nbsp;y-雄鹿</span></th>

                <td class="th4">20/9</td>

                <td class="th4">1.5</td>

            </tr>

            <tr>

                <th colspan="2" class="th3"><span class="th2"><div class="box1">3</div>&nbsp;&nbsp;步行者</span></th>

                <td class="th3">20/11</td>

                <td class="th3">2.5</td>

            </tr>

            <tr>

                <th colspan="2" class="th4"><span class="th2"><div class="box2">4</div>&nbsp;&nbsp;76人</span></th>

                <td class="th4">20/12</td>

                <td class="th4">3.0</td>

            </tr>

            <tr>

                <th colspan="2" class="th3"><span class="th2"><div class="box2">5</div>&nbsp;&nbsp;凯尔特人</span></th>

                <td class="th3">18/11</td>

                <td class="th3">3.5</td>

            </tr>

            <tr>

                <th colspan="2" class="th4"><span class="th2"><div class="box2">6</div>&nbsp;&nbsp;活塞</span></th>

                <td class="th4">14/14</td>

                <td class="th4">7.0</td>

            </tr>

            <tr>

                <th colspan="2" class="th3"><span class="th2"><div class="box2">7</div>&nbsp;&nbsp;y-黄蜂</span></th>

                <td class="th3">14/15</td>

                <td class="th3">7.5</td>

            </tr>

            <tr>

                <th colspan="2" class="th4"><span class="th2"><div class="box2">8</div>&nbsp;&nbsp;魔术</span></th>

                <td class="th4">14/15</td>

                <td class="th4">7.5</td>

            </tr>

            <tr>

                <th colspan="2" class="th3"><span class="th2"><div class="box2">9</div>&nbsp;&nbsp;热火</span></th>

                <td class="th3">13/16</td>

                <td class="th3">8.5</td>

            </tr>

            <tr>

                <th colspan="2" class="th4"><span class="th2"><div class="box2">10</div>&nbsp;&nbsp;篮网</span></th>

                <td class="th4">14/18</td>

                <td class="th4">9.0</td>

            </tr>

            <tr>

                <th colspan="2" class="th3"><span class="th2"><div class="box2">11</div>&nbsp;&nbsp;奇才</span></th>

                <td class="th3">12/19</td>

                <td class="th3">10.5</td>

            </tr>

            <tr>

                <th colspan="2" class="th4"><span class="th2"><div class="box2">12</div>&nbsp;&nbsp;尼克斯</span></th>

                <td class="th4">9/23</td>

                <td class="th4">14.0</td>

            </tr>

            <tr>

                <th colspan="2" class="th3"><span class="th2"><div class="box2">13</div>&nbsp;&nbsp;骑士</span></th>

                <td class="th3">8/23</td>

                <td class="th3">14.5</td>

            </tr>

            <tr>

                <th colspan="2" class="th4"><span class="th2"><div class="box2">14</div>&nbsp;&nbsp;老鹰</span></th>

                <td class="th4">7/23</td>

                <td class="th4">15.0</td>

            </tr>

            <tr>

                <th colspan="2" class="th3"><span class="th2"><div class="box2">15</div>&nbsp;&nbsp;公牛</span></th>

                <td class="th3">7/24</td>

                <td class="th3">15.5</td>

            </tr>

        </table>

    </body>

</html>

结果：

Html学习之十七（表格与表单学习--排行版制作）的更多相关文章

  1. Html学习之十八（表格与表单学习--统计表制作）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. html学习记录之表格、表单基础

    ①编码:charset="utf-8": ​②描述及关键词:name="description":name="keywords": ③a标签 ...

  3. html+css学习笔记 5[表格、表单]

    表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头 ...

  4. Html学习之十九（表格与表单学习--邮箱注册页面设计）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Html学习之十六（表格与表单学习--课程表制作）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. DOM之表格与表单基础分享

    我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...

  7. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  8. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

  9. 框架，表格，表单元素，css基础以及基本标签的结合

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

随机推荐

  1. AcWing 46. 二叉搜索树的后序遍历序列

    地址 https://www.acwing.com/solution/acwing/content/3959/ 题目描述输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果. 如果是则返回t ...

  2. Eclipse的使用需要注意的问题

    一.修改/设置字符集编码 设置工作空间编码格式 Window--Preference--General--Workspace下,面板''Text file encoding"选择UTF-8格 ...

  3. 注意设置httpclient连接数

    在使用Httpclient的过程中,当访问量增大的时候,会发现本地的连接等待时间急剧增加,例如从400ms增加到 78000ms,之前一直以为是航信系统问题,后面经过检查才发现,原来是本地httpcl ...

  4. 给那些迷茫的人学习JAVA的一些建议？

    前语:我用了3年的时间,一步一步走到了现在,半途也有了解过其他的技能,也想过要转其他的言语,可是最终仍是坚持下来走Java这条路,希望我的经历能够帮忙到后来的人,要是觉得对你有帮忙的话,能够注重一下和 ...

  5. js a 标签 通过download 实现下载功能

    download 属性规定被下载的超链接目标. 在 <a> 标签中必须设置 href 属性. 该属性也可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展 ...

  6. iOS: 线程中那些常见的锁

    一.介绍 在多线程开发中,锁的使用基本必不可少,主要是为了解决资源共享时出现争夺而导致数据不一致的问题,也就是线程安全问题.锁的种类很多,在实际开发中,需要根据情况选择性的选取使用,毕竟使用锁也是消耗 ...

  7. jquery 全选样例

    代码: $(function(){ $("#checkAllOld").click(function() { $("input[id^='box_old_']" ...

  8. 使用 Powershell 远程连接 windows server

    使用 Powershell 远程连接 windows server Intro 最近我们的开发环境增加了一个 windows 服务器,没有界面的,不能直接远程桌面连上去管理,需要使用 Powershe ...

  9. css 行内水平均等排布方式

    <div class="justify"> <span>测试1</span> <span>测试2</span> < ...

  10. Ajax的快速入门

    1.什么是ajax ajax是技术名词的缩写: Asynchronous:异步: JavaScript:JavaScript语言: And:和.与: XML:数据传输格式 ajax是客户端通过HTTP ...