做表格，加样式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS对表格的控制</title>
<style type="text/css">
/*第一步：给表格乃至内部的单元格加上边框*/
table,th,td{
border:1px solid #333;
}
/*第二步将所有的边框线进行折叠*/
table{
border-collapse: collapse;
text-align: center;
margin: 50px auto;
box-shadow:3px 3px 3px #888;
width: 60%;
background-image:url("../images/cka.jpg");
background-repeat: no-repeat;
background-size: cover;
}
table caption{
font-size: 1.5em;
font-weight:bolder;
margin-bottom:30px;
}
th,td{
padding: 10px;
}
table img{
border-radius: 50%;
box-shadow:2px 2px 2px #888;
}
th{
/*background-color: rgb(155,155,0);*/
background-color: rgba(155,155,0,0.3);
}
green{
font-size: 1.2em;
color: crimson;
font-weight: bolder;
}
</style>
</head>
<body>
<table>
<caption>当今武林高手排行榜</caption>
<tr>
<th>名次</th>
<th>姓名</th>
<th>江湖绰号</th>
<th>头像</th>
<th>独门绝技</th>
<th>所属门派</th>
<th class="green">英雄事迹</th>
</tr>
<tr>
<td>1</td>
<td>洪七公</td>
<td>北丐</td>
<td><img src="../images/3.jpg" width="40px"></td>
<td>降龙十八掌</td>
<td>丐帮</td>
<td class="green">就是浪</td>
</tr>
<tr>
<td>2</td>
<td>欧阳锋</td>
<td>吸毒</td>
<td><img src="../images/3.jpg" width="40px"></td>
<td colspan="2">下毒（下毒教）</td>
<td rowspan="2" class="green">杀人</td>
</tr>
<tr>
<td>3</td>
<td>黄药师</td>
<td>东邪</td>
<td><img src="../images/3.jpg" width="40px"></td>
<td>吹箫</td>
<td>桃花教</td>
</tr>
<tr>
<td>4</td>
<td>段智兴</td>
<td>南帝</td>
<td><img src="../images/3.jpg" width="40px"></td>
<td>一阳指</td>
<td>基督教</td>
<td class="green">就是浪</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
