效果图：
代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table,th,td {
border: 1px solid #666;
}
table {
width: 60%;
height: 300px;
background-color: #00FF7F;
text-align: center;
margin:50px auto;
box-shadow:0 0 10px 10px #53868B;
}
table caption {
color: #228B22;
font-size: 1.4em;
font-weight: bolder;
margin-bottom: 20px;
}
tr>th {
background-color: #2E8B57;
}
#a{
width: 80px;
height: 60px;
padding: 5px;
}
td img {
border-radius: 50%;
box-shadow: 3px 3px 3px #458B00;
width: 100px;
}
.b {
background-color: #ADFF2F;
color: #CD853F;
font-weight: bolder;
}
</style>
</head>
<body>
<table >
<caption><h3>书法作品名家</h3></caption>
<tr>
<th id="a">朝代</th>
<th>代表人物</th>
<th>头像</th>
<th>作品形式</th>
<th>代表作品</th>
</tr>
<tr>
<td id="a">秦</td>
<td>李斯</td>
<td><img src="../0322/images/1.jpg"></td>
<td>小篆</td>
<td class="b">《秦山刻石》</td>
</tr>
<tr>
<td id="a">东汉</td>
<td>张芝</td>
<td><img src="../0322/images/2.jpg"></td>
<td>章草</td>
<td class="b">《草圣》</td>
</tr>
<tr>
<td id="a">魏</td>
<td>钟繇</td>
<td><img src="../0322/images/3.jpg"></td>
<td>楷书</td>
<td class="b">《宣示表》</td>
</tr>
<tr>
<td id="a">隋</td>
<td>智永</td>
<td><img src="../0322/images/4.jpg"></td>
<td>工草书</td>
<td class="b">《真书千文字》</td>
</tr>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
