效果图：
//代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>学生信息</h2>
<p>将数据渲染到页面中...</p>
<table>
<caption>学生列表</caption>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>家乡</td>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>18</td>
<td>男</td>
<td>河北省</td>
</tr>
<tr>
<td>2</td>
<td>小王</td>
<td>18</td>
<td>女</td>
<td>河南省</td>
</tr>
<tr>
<td>3</td>
<td>小段</td>
<td>21</td>
<td>男</td>
<td>河南省</td>
</tr>
<tr>
<td>4</td>
<td>小贺</td>
<td>21</td>
<td>女</td>
<td>新疆省</td>
</tr>
</table>
<script>
</script>
</body>
</html>
<style>
table{
width: 600px;
text-align: center;
}
table,th,td{
border: 1px solid #ccc;
/* 为表格设置合并边框模型 */
border-collapse: collapse;
}
caption {
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
tr{
height: 40px;
cursor: pointer;
}
table tr:nth-child(1) {
background-color: #ddd;
}
/* 行 高亮 */
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>