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> 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> 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> 步行者</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> 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> 凯尔特人</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> 活塞</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> 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> 魔术</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> 热火</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> 篮网</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> 奇才</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> 尼克斯</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> 骑士</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> 老鹰</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> 公牛</span></th> <td class="th3">7/24</td> <td class="th3">15.5</td> </tr> </table> </body> </html>
结果：
