1、代码实例：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS制作表格</title>
</head>
<style type="text/css">
/*给表格加边框*/
table,td,th{
border: 1px solid #888;
}
/*合并表格线*/
table{
border-collapse: collapse; /*折叠表格线*/
text-align: center; /*居中*/
width: 50%;
margin: 50px auto; /*表格居中*/
box-shadow: 3px 3px 3px #888;
font-family: "微软雅黑";
background-image: url(../image/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
table caption{
font-size: 1.6em;
font-weight: bolder;
margin-bottom: 20px;
}
th,td{
padding: 10px;
}
td img{
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
}
th{
background-color: rgba(155,155,0,0.3);
color: brown;
}
.list{
color: darkgreen;
font-weight: bolder;
font-size: 1.2em;
}
</style>
<body>
<table>
<caption>§ 世界美女排行榜 §</caption>
<tr>
<th>名次</th>
<th>姓名</th>
<th>头像</th>
<th>国籍</th>
<th>出生年月</th>
<th>代表作品</th>
</tr>
<tr>
<td>no1</td>
<td>奥黛丽·赫本</td>
<td><img src="../image/ao.png" width="50" height="50"></td>
<td>英国</td>
<td>1929年5月4日</td>
<td class="list">《罗马假日》</td>
</tr>
<tr>
<td>no2</td>
<td>全智贤</td>
<td><img src="../image/quan.png" width="50" height="50"></td>
<td>韩国</td>
<td>1981年10月30日</td>
<td class="list">《我的野蛮女友》</td>
</tr>
<tr>
<td>no3</td>
<td>黎姿</td>
<td><img src="../image/li.png" width="50" height="50"></td>
<td>中国</td>
<td>1971年10月1日</td>
<td class="list">《倚天屠龙记》</td>
</tr>
<tr>
<td>no4</td>
<td>克里斯汀·斯图尔特</td>
<td><img src="../image/ke.png" width="50" height="50"></td>
<td>美国</td>
<td>1990年4月9日</td>
<td class="list">《暮光之城》</td>
</tr>
<tr>
<td>no5</td>
<td>酒井美纪</td>
<td><img src="../image/jiu.png" width="50" height="50"></td>
<td>日本</td>
<td>1978年2月21日</td>
<td class="list">《情书》</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、手写代码：
