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