总结
width 宽
height 高
table里的图片
将方形框或图片变成圆形 border-radius=50%
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>赛跑排名</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 32px;
}
caption{
color: red;
margin-bottom: 20px;
}
table{
box-shadow: 3px 3px 5px 4px #ccc;
margin: 10px auto;
border-collapse: collapse;
/*合并边框*/
}
table,th,td{
border: 1px solid black;
text-align: center;
}
th,td{
padding: 2px;
width: 300px;
height: 100px;
}
tr:nth-child(1){
background-color: #ccc;
}
img{
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow:0 1px 5px 3px #ccc;
}
</style>
</head>
<body>
<table>
<caption>§ 赛跑排名 §</caption>
<tr>
<th>照片</th>
<th>名字</th>
<th>年龄</th>
<th>名次</th>
</tr>
<tr>
<td><img src="https://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg"></td>
<td>html</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td><img src="https://img.php.cn/upload/manual/000/000/001/59100fa44850f635.jpg"></td>
<td>js</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td><img src="https://img.php.cn/upload/manual/000/000/001/59100f14e23b7926.jpg"></td>
<td>css</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td><img src="https://img.php.cn/upload/manual/000/000/001/591010919d269341.jpg"></td>
<td>ajax</td>
<td>6</td>
<td>2</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
