实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0322作业</title>
<style>
*{
margin: 0px;
padding: 0px;
}
table,th,td{
border: 1px solid #cccccc;
}
table{
/*折叠表格线*/
border-collapse: collapse;
margin: 50px auto;
text-align: center;
width: 70%;
box-sizing: border-box;
/*border-radius: 10px;*/
box-shadow: 3px 3px 3px cadetblue;
background-image: url(../0319源码/images/8.jpg);
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
}
table>caption{
font-weight: bold;
font-size: 25px;
margin-bottom: 20px;
}
th {
background-color: rgba(255,115,0,0.3);
color: brown;
}
th,td{
text-align: center;
padding: 20px;
}
.image_text>div{
width: 100px;
height: 50px;
padding: 10px;
box-sizing: border-box;
}
.image_text>div>img{
float: left;
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
}
.image_text>div>span{
float: right;
display: inline-block;
height: 30px;
width: 50px;
line-height: 30px;
}
.west{
text-align: left;
color: forestgreen;
font-size: 30px;
padding: 10px;
}
.number{
color: #c93652;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>
NBA2017-2018赛季常规赛排名
</caption>
<tr >
<td colspan="9" class="west">西部联盟</td>
</tr>
<tr>
<th>排名</th>
<th>球队</th>
<th>胜</th>
<th>负</th>
<th>胜率</th>
<th>胜差</th>
<th>得分</th>
<th>主场战绩</th>
<th>客场战绩</th>
</tr>
<tr>
<td class="number">1</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>火箭</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
<tr>
<td class="number">2</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>勇士</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
<tr>
<td class="number">3</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>开拓者</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
<tr>
<td class="number">4</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>雷霆</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
<tr>
<td class="number">5</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>鹈鹕</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
<tr>
<td class="number">6</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>马刺</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
<tr>
<td class="number">7</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>森林狼</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
<tr>
<td class="number">8</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>爵士</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
<tr>
<td>9</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>掘金</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
<tr>
<td>10</td>
<td class="image_text">
<div>
<img src="//www.sinaimg.cn/lf/sports/2017nba/583ecda6-fb46-11e1-82cb-f4ce4684ea4c.png" alt="" width="30">
<span>快船</span>
</div>
</td>
<td>58</td>
<td>14</td>
<td>80.6%</td>
<td>0</td>
<td>113.47</td>
<td>28胜6负</td>
<td>30胜8负</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
