css
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UFT-8">
<title>用css控制表格</title>
<style type="text/css">
/*给整个表格及内部单元格加上边框*/
table,th,td{
border: 1px solid #333}
table{
/*将所有的边框折叠*/
border-collapse: collapse;
/*将单元格的元素居中*/
text-align: center;
width: 100px;
height: 50px;
margin: 50% auto;
width: 60%;
background-image: url(http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/02/38/2ad2ac07b1ccabf3ccc44d76cdd858b1.jpg);
/*不要设置背景重复*/
background-repeat: no-repeat;
/*背景缩放*/
background-size: cover;
}
td img{
/*将图片变成园状*/
border-radius: 50%;
box-shadow:2 2 8px #888
}
th,td{
/*内边距设置*/
padding: 8px;
}
table caption{
font-size: 1.5em;
font-weight: border;
margin:30px;
color: blue;
}
table > th{
background-color: rgba(166,123,166,3,5);
}
</style>
</head>
<body>
<div>
<table>
<caption>§ 明星信息 §</caption>
<tr>
<th>姓名</th>
<th>头像</th>
<th>性别</th>
<th>个性</th>
<th>特长</th>
<th colspan="2">操作</th>
</tr>
<tr>
<td>黎明</td>
<td><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=950098343,3485248653&fm=27&gp=0.jpg" width="30"></td>
<td>男</td>
<td>内向</td>
<td>唱歌</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>张杰</td>
<td><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3245692213,1642216249&fm=27&gp=0.jpg" width="30"></td>
<td>男</td>
<td>开朗</td>
<td>表演</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>成龙</td>
<td><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=268890064,2288411604&fm=27&gp=0.jpg" width="30"></td>
<td>男</td>
<td>活泼</td>
<td>能打</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
<tr>
<td>欧豪</td>
<td><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4064939248,2793600331&fm=27&gp=0.jpg" width="30"></td>
<td>男</td>
<td>腼腆</td>
<td>能歌善舞</td>
<td><a href="">编辑</a></td>
<td><a href="">删除</a></td>
</tr>
</div>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
