<!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. RF自动化测试之元素封装

    自动化测试均需要遵循由点到面的规则,然而对于UI自动化,点是最容易发生变化的,如果使用硬链接,那么每次元素的修改都必须修改代码,这对于代码功底薄弱的测试工程师来说,是较为困难的,所以自动化测试需要对底 ...

  2. 【CentOS7】CentOS7各个版本镜像下载地址（转）

    链接:https://www.cnblogs.com/caidingyu/p/10679422.html # CentOS7.6 下载地址       # CentOS-7-x86_64-DVD-18 ...

  3. testng.xml文件的配置

    ------Web自动化测试之Webdriver+TestNG--从零到熟练(系列) TestNG用来管理测试用例的是testng.xml配置文件,我们可以通过配置这个文件来达到组织测试用例,输出测试 ...

  4. HTML连载43-还原字体和字号、文字界面

    一.还原字体和字号 1.利用fireworks切片以及文本添加的功能可以用来定位我们想要的文字是什么字体,行高又是多少,但其实很low,是我们人工挑选出来的. 2.注意点:在企业开发中,如果一个盒子中 ...

  5. 栈与后缀表达式C实现

    #include<stdio.h> #include<stdlib.h> typedef char datatype; typedef struct stack { int t ...

  6. [算法]LeetCode 120：三角形最小路径和

    题目描述: 给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3]]自顶向下的最小路径和 ...

  7. 【IDEA】(1)---MAC下常用快捷键

    IDEA常用快捷键 IDEA是一个很好的开发工具,用好它能大大提高我们的开发效率,所以这里学习总结下有关IDEA实用的一些教程,比如常用快捷键,如何自定义代码模版,如何debug异常断点,或者说多线程 ...

  8. 百度ai语音识别

    //语音识别功能 var APP_ID = "149**323"; var API_KEY = "N1Po****o6WPUeU8er"; var SECRET ...

  9. hello tensorflow，我的第一个tensorflow程序

    上代码: import tensorflow as tf if __name__=='__main__': g = tf.Graph() # add ops to the user created g ...

  10. Java生鲜电商平台-API请求性能调优与性能监控

    Java生鲜电商平台-API请求性能调优与性能监控 背景 在做性能分析时,API的执行时间是一个显著的指标,这里使用SpringBoot AOP的方式,通过对接口添加简单注解的方式来打印API的执行时 ...