<!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. 《数据挖掘导论》实验课——实验二、数据处理之Matplotlib

    实验二.数据处理之Matplotlib 一.实验目的 1. 了解matplotlib库的基本功能 2. 掌握matplotlib库的使用方法 二.实验工具: 1. Anaconda 2. Numpy, ...

  2. 0day2安全——笔记4(修改临界变量)

    第二章 修改临界变量 #include <stdio.h> #include <string.h> #define PASSWORD "1234567" i ...

  3. [ Python入门教程 ] Python文件基本操作_shutil模块

    shutil模块是对os模块中文件操作的补充,提供文件和目录的移动.复制.打包.压缩.解压等功能 shutil常用函数   shutil.copyfile(src, dst)   复制文件, 如果ds ...

  4. DevExpress中TreeList树样式调整

    DevExpress的TreeList默认是没有树状线的,修改TreeLineStyle属性无效,这对于Tree并不好看. 解决方案一 官方解释说对于DevExpress的标准主题是不支持TreeLi ...

  5. 第04组 Beta冲刺（5/5）

    队名:new game 组长博客 作业博客 组员情况 鲍子涵(队长) 过去两天完成了哪些任务 动画优化 接下来的计划 等待答辩 还剩下哪些任务 让游戏本体运行 遇到了哪些困难 时间太少了 有哪些收获和 ...

  6. 立足于运维与监控的前端框架 NoahV

    NoahV是一个致力于解决中后台前端效率问题的前端框架,立足于运维和监控的应用场景,使用当前前端最新的技术栈并结合团队在项目开发中的最佳实践从而推出的前端开发框架. NoahV提供的功能覆盖了从开发到 ...

  7. 用Python做个海量小姐姐素描图

    素描作为一种近乎完美的表现手法有其独特的魅力,随着数字技术的发展,素描早已不再是专业绘画师的专利,今天这篇文章就来讲一讲如何使用python批量获取小姐姐素描画像.文章共分两部分: 第一部分介绍两种使 ...

  8. 接口测试用例yaml格式数据

    1. login.yaml yaml文件 - name # 添加减号可以把用例转为list,每一部分是一个字典 url: /api/user/login method: post data: # 存放 ...

  9. Flink on Yarn的两种模式及HA

    转自:https://blog.csdn.net/a_drjiaoda/article/details/88203323 Flink on Yarn模式部署始末:Flink的Standalone和on ...

  10. Zookeeper集群的"脑裂"问题处理 - 运维总结

    关于集群中的"脑裂"问题,之前已经在这里详细介绍过,下面重点说下Zookeeper脑裂问题的处理办法.ooKeeper是用来协调(同步)分布式进程的服务,提供了一个简单高性能的协调 ...