本文介绍如何通过CSS类为PHP动态生成的数据库表格添加样式，替代过时的bgcolor属性，实现更灵活、可维护的行与单元格样式控制。
本文介绍如何通过css类为php动态生成的数据库表格添加样式，替代过时的`bgcolor`属性，实现更灵活、可维护的行与单元格样式控制。
在Web开发中，直接在HTML标签中使用bgcolor（如
以下是一个结构清晰、安全且易于扩展的实现方案：
✅ 推荐写法（分离样式与逻辑）：
<style>
/* 表头行统一深紫色背景 + 白色文字 */
.table thead th {
background-color: #b366ff;
color: white;
padding: 12px 16px;
text-align: left;
}
/* 数据行交替背景色（增强可读性） */
.table tbody tr:nth-child(odd) {
background-color: #f9f5ff; /* 浅紫灰 */
}
.table tbody tr:nth-child(even) {
background-color: #ffffff; /* 纯白 */
}
/* 单元格基础样式 */
.table td {
padding: 10px 16px;
border-bottom: 1px solid #eee;
}
/* 可选：悬停高亮整行 */
.table tbody tr:hover {
background-color: #e6d7ff !important;
cursor: pointer;
}
</style>
<table class="table">
<thead>
<tr>
<th>Game</th>
<th>Date</th>
<th>Score</th>
<th>Venue</th>
</tr>
</thead>
<tbody>
<?php
// ✅ 使用预处理语句防止SQL注入（强烈推荐）
$stmt = $connection->prepare("SELECT team, date, score, venue FROM game WHERE username = ? AND savename = ?");
$stmt->bind_param("ss", $users, $saves);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . htmlspecialchars($row['team']) . "</td>";
echo "<td>" . htmlspecialchars($row['date']) . "</td>";
echo "<td>" . htmlspecialchars($row['score']) . "</td>";
echo "<td>" . htmlspecialchars($row['venue']) . "</td>";
echo "</tr>";
}
$stmt->close();
?>
</tbody>
</table>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 安全性优先： 原始代码中直接拼接$users和$saves存在严重SQL注入风险，务必改用mysqli_prepare()预处理语句；
- XSS防护： 使用htmlspecialchars()转义输出内容，避免恶意HTML/JS注入；
-
语义化结构： 明确使用/
提升可访问性与SEO友好度；
- 响应式兼容： 如需移动端适配，可配合@media规则或Bootstrap .table-responsive容器；
- 性能提示： 若数据量大，建议添加分页（LIMIT/OFFSET）并索引username和savename字段。
通过CSS控制样式而非内联属性，不仅让HTML更简洁、CSS更易维护，也为后续引入JavaScript交互（如行点击事件、排序、筛选）打下坚实基础。
