表格演示
<!DOCTYPE html>
<html>
<head>
<title>表格复习</title>
<style>
table{
width:400px;
height: 200px;
}
th,td{
box-shadow: 2px 2px 2px grey;
}
td{
padding-left: 6px;
}
tr:nth-child(odd){
background-color:lightcyan;
}
tr:nth-child(even){
background-color:lightgoldenrodyellow;
}
tr:hover .name::before{
content:'😊';
}
tr:hover .address::before{
content:'🚩';
}
tr:hover .phone::before{
content:'📞';
}
</style>
</head>
<body>
<h2>表格复习</h2>
<h3>Author:马老师</h3>
<hr>
<table>
<tr><th>编号</th><th>姓名</th><th>地址</th><th>手机</th></tr>
<tr><th>1</th><td class="name">张三</td><td class="address">航天六院</td><td class="phone">15891711111</td></tr>
<tr><th>2</th><td class="name">李四</td><td class="address">航天六院</td><td class="phone">15891722222</td></tr>
<tr><th>3</th><td class="name">王麻子</td><td class="address">航天六院</td><td class="phone">15891733333</td></tr>
</table>
</body>
</html>
