92 lines
2.3 KiB
HTML
92 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>简易学生表</title>
|
||
<link rel="stylesheet" href="tableTitle.css">
|
||
<style>
|
||
.tou {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.shou {
|
||
|
||
background-color: yellowgreen;
|
||
|
||
}
|
||
|
||
.odd {
|
||
|
||
background-color: #CDF8F9;
|
||
|
||
}
|
||
|
||
.even {
|
||
|
||
background-color: #FDEFBB;
|
||
|
||
}
|
||
|
||
|
||
td,
|
||
th {
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<table border="1" width="600" height="400" align="center" cellspacing="0" cellpadding="5"
|
||
style="border-collapse: collapse;">
|
||
<caption>简易学生表</caption>
|
||
|
||
<!-- 表头行：姓名、单位、学号 -->
|
||
<tr class="tou">
|
||
<td></td>
|
||
<th>姓名</th>
|
||
<th>单位</th>
|
||
<th>学号</th>
|
||
</tr>
|
||
|
||
<!-- 数据行1：基数行，背景色#CDF8F9（由伪类控制） -->
|
||
<tr class="odd">
|
||
<td rowspan="4" class="shou">2024-2025学年</td>
|
||
<td>王小品</td>
|
||
<td>商学院</td>
|
||
<td>110204</td>
|
||
</tr>
|
||
|
||
<!-- 数据行2：偶数行，背景色#FDEFBB（由伪类控制） -->
|
||
<tr class="even">
|
||
<td>李中</td>
|
||
<td>财经学院</td>
|
||
<td>120204</td>
|
||
</tr>
|
||
|
||
<!-- 数据行3：基数行，含跨行单元格（rowspan="2"） -->
|
||
<tr class="odd">
|
||
<!-- 跨行单元格：“2024-2025学年”跨2行，对应实验“单元格跨行”要求 -->
|
||
|
||
<td>胡三</td>
|
||
<td>大数据学院</td>
|
||
<td>130504</td>
|
||
</tr>
|
||
|
||
<!-- 数据行4：偶数行，因上一行有跨行单元格，本行少1个td -->
|
||
<tr class="even">
|
||
<td>李白</td>
|
||
<td>人工智能学院</td>
|
||
<td>100244</td>
|
||
</tr>
|
||
|
||
<!-- 数据行5：含跨列单元格（colspan="3"），对应实验“单元格跨列”要求 -->
|
||
<tr>
|
||
<!-- 跨列单元格：“重庆城市科技学院”跨3列 -->
|
||
<td colspan="4">重庆城市科技学院</td>
|
||
</tr>
|
||
</table>
|
||
</body>
|
||
|
||
</html> |