手写链接：https://www.llheng.com/img/index.html
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table,th,td{
border: 1px solid #696969;
color: #fff;
}
table{
font-family: microsoft yahei;
border-collapse: collapse;
text-align: center;
width: 50%;
margin: 40px auto;
box-shadow: 3px 3px 3px #888;
background-image: url(https://www.llheng.com/img/0323/6.jpg);
background-repeat: no-repeat;
background-size: cover;
}
table caption {
font-size: 30px;
color:#000;
}
th,td{
padding: 12px;
}
th{
background-color: rgba(47,79,79,0.6);
}
td img {
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
width: 50px;
}
#dec{
color:#FA8072;
}
.inc{
color: #00FF7F;
}
</style>
</head>
<body>
<table>
<caption><h3>Programming language rankings</h3></caption>
<tr>
<th>2018.1</th>
<th>Pic</th>
<th>Language</th>
<th>Rating</th>
<th>Change</th>
</tr>
<tr>
<td>1</td>
<td><img src="https://www.llheng.com/img/0323/1.jpg" ></td>
<td>Java</td>
<td >14.21%</td>
<td class="inc">+3.06</td>
</tr>
<tr>
<td>2</td>
<td><img src="https://www.llheng.com/img/0323/2.jpg"></td>
<td>C</td>
<td>11.03%</td>
<td class="inc">+1.60</td>
</tr>
<tr>
<td>3</td>
<td><img src="https://www.llheng.com/img/0323/3.jpg" ></td>
<td>C++</td>
<td>5.60%</td>
<td id="dec">-0.70</td>
</tr>
<tr>
<td>4</td>
<td><img src="https://www.llheng.com/img/0323/4.jpg" ></td>
<td>Python</td>
<td>4.67%</td>
<td class="inc">+1.21%</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
