本文介绍如何通过 CSS 类精准控制从数据库读取的数据行（）和单元格（）的样式，替代过时的 bgcolor 属性，实现可维护、响应式且语义清晰的表格美化方案。
本文介绍如何通过 css 类精准控制从数据库读取的数据行（`
在现代 Web 开发中，直接在 HTML 标签中使用 bgcolor（如
✅ 推荐实践：使用 CSS 类 + PHP 动态渲染
首先，在
<style>
/* 表头行样式 */
.table-header {
background-color: #b366ff;
color: white;
font-weight: bold;
}
/* 数据行基础样式 */
.table-row {
background-color: #f8f9fa;
transition: background-color 0.2s ease;
}
.table-row:hover {
background-color: #e9d5ff;
}
/* 单元格内边距与对齐 */
.table-cell {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
/* 可选：奇偶行交替色（斑马纹） */
.table-row:nth-child(even) {
background-color: #f5f0ff;
}
</style>然后，在 PHP 循环中为每行和每个单元格添加对应类名（注意：PHP 中双引号内需转义双引号，或改用单引号）：
<table class="table">
<tr class="table-header">
<th class="table-cell">Game</th>
<th class="table-cell">Date</th>
<th class="table-cell">Score</th>
<th class="table-cell">Venue</th>
</tr>
<?php
$sql = "SELECT * FROM game WHERE username = ? AND savename = ?";
$stmt = mysqli_prepare($connection, $sql);
mysqli_stmt_bind_param($stmt, "ss", $users, $saves);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
echo '<tr class="table-row">';
echo '<td class="table-cell">' . htmlspecialchars($row['team']) . '</td>';
echo '<td class="table-cell">' . htmlspecialchars($row['date']) . '</td>';
echo '<td class="table-cell">' . htmlspecialchars($row['score']) . '</td>';
echo '<td class="table-cell">' . htmlspecialchars($row['venue']) . '</td>';
echo '</tr>';
}
?>
</table>⚠️ 关键注意事项
- 安全性：务必使用 htmlspecialchars() 对输出内容进行转义，防止 XSS 攻击；
- SQL 安全：原代码中字符串拼接 SQL 存在严重注入风险，已升级为预处理语句（mysqli_prepare + bind_param），强烈推荐；
- 语义化：避免滥用 bgcolor，优先使用 class 配合 CSS 控制样式；
-
可访问性：为表头使用
并确保对比度达标（如 #b366ff 与白色文字满足 WCAG AA 标准）； - 性能：CSS 类应复用而非为每行生成唯一类名，便于浏览器渲染优化。
通过以上方式，你不仅能优雅地美化数据库表格，还能提升代码安全性、可维护性与可访问性——这才是专业级 Web 表格开发的标准实践。
立即学习“前端免费学习笔记（深入）”；
