当前位置：首页 > news >正文

HTML：表格数据展示区

news 来源：原创 2025/5/21 9:05:59

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