实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cssbox</title>
<style type="text/css">
table,th,td {
border: 1px solid lightblue;
}
table {
border-collapse: collapse;
text-align: center;
width: 50%;
margin: 20px auto;
box-shadow: 3px 3px 10px #888;
background-image: url(./img/tree.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#title {
font-size: 1.3em;
font-weight: bolder;
margin-bottom: 20px;
}
th {
background-color: lightyellow;
}
th,td {
padding: 10px;
}
td img {
border-radius: 50%;
box-shadow: 2px 2px 3px #888;
}
th {
background-color: rgba(166,166,0,0.3);
}
.delete {
background-color: red;
font-weight: bolder;
font-size: 1.1em;
}
</style>
</head>
<body>
<table>
<caption id="title">§同学通讯录</caption>
<thead>
<tr>
<th colspan="2">个人名称</th>
<th colspan="3">联系信息</th>
<th colspan="2" rowspan="2">操作</th>
</tr>
<tr>
<th>id</th>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><img src="./img/head1.jpg" width="30">张三</td>
<td>男</td>
<td>南京</td>
<td>1658</td>
<td><a href="">修改</a></td>
<td class="delete"><a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="./img/head2.jpg" width="30">张强</td>
<td>男</td>
<td>北京</td>
<td>2282</td>
<td><a href="">修改</a></td>
<td class="delete"><a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="./img/head3.jpg" width="30">李嘉</td>
<td>女</td>
<td>成都</td>
<td>3337</td>
<td><a href="">修改</a></td>
<td class="delete"><a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
图片：
