在html中，所有元素都被描述成矩形盒子。盒模型通过4个属性来描述：padding，margin，content，border。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>会员管理</title>
<style type="text/css">
body{
background-color: floralwhite;
}
table,td,th{
border: 1px solid darkgray;
}
table{
border-collapse: collapse;
width: 600px;
margin: 0 auto;
background-image: url("https://img.php.cn//upload/image/543/183/884/1521734800901827.jpg");
background-repeat: no-repeat;
background-size: cover;
box-shadow: 3px 3px 5px #A9A9A9;
}
table img{
width: 30px;
border-radius: 50%;
box-shadow: 2px 2px 2px #A9A9A9;
}
table td{
text-align: center;
}
table caption {
text-align: center;
color: darksalmon;
font-size: 2em;
font-weight: bolder;
margin-top: 50px;
}
table th{
color: cornflowerblue;
}
.id{
color: crimson;
font-weight: bolder;
}
</style>
</head>
<body>
<table>
<caption>会员管理</caption>
<tr>
<th>id</th>
<th>用户名</th>
<th>昵称</th>
<th>头像</th>
<th>等级</th>
<th>经验</th>
<th>积分</th>
</tr>
<tr>
<td class="id">10001</td>
<td>md394845</td>
<td>一只大鸟</td>
<td><img src="https://img.php.cn//upload/image/263/349/466/1521734807614318.jpg" alt="头像" /></td>
<td>7</td>
<td>676</td>
<td>3465</td>
</tr>
<tr>
<td class="id">10002</td>
<td>ff4333ff</td>
<td>爱爱</td>
<td><img src="https://img.php.cn//upload/image/184/409/479/1521734810902468.jpg" alt="头像" /></td>
<td>5</td>
<td>654</td>
<td>634</td>
</tr>
<tr>
<td class="id">10003</td>
<td>gfsazxc22</td>
<td>JACK</td>
<td><img src="https://img.php.cn//upload/image/401/469/372/1521734812780507.jpg" alt="头像" /></td>
<td>6</td>
<td>734</td>
<td>855</td>
</tr>
<tr>
<td class="id">10004</td>
<td>qweasdzxc</td>
<td>黑人</td>
<td><img src="https://img.php.cn//upload/image/146/139/453/1521734814361085.jpg" alt="头像" /></td>
<td>4</td>
<td>537</td>
<td>234</td>
</tr>
<tr>
<td class="id">10005</td>
<td>zzre332</td>
<td>赵日天</td>
<td><img src="https://img.php.cn//upload/image/279/404/983/1521734816367857.jpg" alt="头像" /></td>
<td>5</td>
<td>231</td>
<td>534</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
images图片
