<!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. Linux自动同步时间

    一.安装时间同步工具 yum -y install ntp 二.同步时间 1.修改时区 cp -y /usr/share/zoneinfo/Asia/Shanghai /etc/localtime v ...

  2. LRU的实现（使用list）

    首先是LRU的定义,LRU表示最近最少使用,如果数据最近被访问过,那么将来被访问的几率也更高. 所以逻辑应该是每次都要将新被访问的页放到列表头部,如果超过了list长度限制,就将列表尾部的元素踢出去. ...

  3. 201871010121-王方《面向对象程序设计（Java）》第一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/wf-001128/ 作 ...

  4. 2019.10.02模拟赛T3

    题目大意: 设$S(n,m)$为第二类斯特林数,$F_i$表示斐波那契数列第$i$项. 给定$n,R,K$,求$\sum\limits_{i=1}^{n}(\sum\limits_{m=1}^{R}F ...

  5. 用arthas的watch方法观察执行方法的输入输出

    watch 的参数比较多,主要是因为它能在 4 个不同的场景观察对象 参数名称 参数说明 class-pattern 类名表达式匹配 method-pattern 方法名表达式匹配 express 观 ...

  6. 浏览器记住密码的自动填充Input问题完美解决方案

    1.input 前from和input占位隐藏 <form style="width:0;height:0;display:none;"> <input type ...

  7. Elastic：用Docker部署Elastic栈

    安装 因为我们需要使用docker来进行安装,我们必须安装: docker:根据不同的操作系统,请按照要求安装docker.可以到网站https://docs.docker.com/去安装 docke ...

  8. MongoDB 修改数据Cannot change the size of a document in a capped collection: * != *"

    MongoDB修改数据库数据的时候报错 原因: 集合被设置成了 固定集合 .固定集合的数据不能被修改.只能查找-删除-再插入,也就是创建集合的时候设置了capped参数为true 解决: 创建集合的时 ...

  9. 简单解决 VMWare “无法打开内核设备:\\Global\\vmx86”错误

    在“服务”后右击选择使用管理员打开.然后在一大串服务中找到vm开头的服务项,全部都启动.重新启动vm就ok了(vm需要以管理员身份打开).

  10. C#用Call代替CallVirt之后的测试用例

    一. C# 原始代码和直接结果 测试 C# 代码: class Program { static void Main(string[] args) { A c1 = new C(); c1.Foo() ...