Html学习之十七（表格与表单学习--排行版制作）

<!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>

结果：