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="styles.css">
</head>
<body>
<table>
<thead>
<!-- thead 表示表格中的表头 -->
<tr>
<!-- tr 表示表格中的行 ,一个tr就是一行-->
<!-- th 表示表格中的表头单元格,会加粗 -->
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>头像</th>
<th>入职日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<!-- td 表示表格中的单元格 -->
<td>25</td>
<td>前端开发</td>
<td><img src="CSS//img/1.png" alt="Avatar" width="50"></td>
<td>2023-01-01</td>
<td>
<!-- 这里删除按钮无法实现动态删除功能，仅作展示 -->
<button>删除</button>
<button>添加</button>
<!-- 文字居中 -->
</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>后端开发</td>
<td><img src="CSS//img/1.png" alt="Avatar" width="50"></td>
<td>2022-05-15</td>
<td>
<button>删除</button>
<button>添加</button>
</td>
</tr>
</tbody>
</table>
</body>
<body>
<!-- 页面主体内容 -->
<footer>
<p>北京大学</p>
<p>邮箱：pku@edu.cn 电话：010 - 12345678</p>
</footer>
</body>
</html>
复制代码
body {
font-family: Arial, sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
footer {
/* 设置背景色为灰色，这里使用十六进制颜色码 #808080，你也可以根据喜好调整 */
background-color: #808080;
/* 上下内边距为 20px，左右内边距为 0 */
padding: 20px 0;
/* 文本居中显示 */
text-align: center;
/* 让 footer 固定在页面底部（如果有需要），可根据实际情况调整 */
width: 100%;
}
footer p {
/* 上下外边距为 5px，左右外边距为 0 */
margin: 5px 0;
/* 字体颜色为白色，和灰色背景形成对比 */
color: white;
/* 字体大小为 14px */
font-size: 14px;
}
