<!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;
}
