本文介绍如何使用php接收用户输入的宽度和高度值，并动态生成具有指定单元格尺寸的html表格，包含表单修正、安全输出和基础实践要点。
本文介绍如何使用php接收用户输入的宽度和高度值，并动态生成具有指定单元格尺寸的html表格，包含表单修正、安全输出和基础实践要点。
在Web开发中，常需根据用户输入动态生成表格结构。上例中，目标是让用户自定义表格行数、列数、边框粗细以及每个单元格（<td>）的宽度（width）和高度（height）。但原始代码存在两个关键问题：一是表单字段 nom="widh" 和 nom="heig" 属于拼写错误（应为 name），导致PHP无法正确获取参数；二是直接拼接用户输入到HTML中存在潜在XSS风险，且未做基础校验。
以下是修正后的完整可运行代码（含必要防护建议）：
<form method="POST">
Nombre de Lignes: <input type="number" name="lign" min="1" max="100" required>
Taille de Bordure: <input type="number" name="border" min="0" max="10" value="1" required>
Nombre de Colonnes: <input type="number" name="ncol" min="1" max="50" required>
Largeur de Colonnes (px): <input type="number" name="widh" min="20" max="500" value="100" required>
Hauteur de Colonnes (px): <input type="number" name="heig" min="20" max="300" value="40" required>
<input type="submit" value="Générer le tableau">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
// 使用 intval() 强制转换为整数，防止非数字输入引发错误或注入
$rows = intval($_POST["lign"]) ?: 1;
$border = intval($_POST["border"]) ?: 1;
$cols = intval($_POST["ncol"]) ?: 1;
$width = intval($_POST["widh"]) ?: 100;
$height = intval($_POST["heig"]) ?: 40;
// 输出安全的 HTML 表格（注意：width/height 是过时属性，推荐用 CSS）
echo "<table border='$border' cellspacing='0' style='border-collapse: collapse;'>";
for ($i = 0; $i < $rows; $i++) {
echo "<tr>";
for ($j = 0; $j < $cols; $j++) {
// 推荐方式：使用内联 CSS 替代已废弃的 width/height 属性
echo "<td style='width: {$width}px; height: {$height}px; border: 1px solid #ccc; text-align: center; vertical-align: middle;'> </td>";
}
echo "</tr>";
}
echo "</table>";
}
?>✅ 关键改进说明：
- 修正 nom → name，确保表单数据可被PHP正确接收；
- 将 <input type="text"> 改为 <input type="number">，并添加 min/max/required 属性，提升用户体验与输入约束；
- 使用 intval() 过滤用户输入，避免类型混淆与潜在异常；
- 强烈建议弃用 <td width> 和 <td height>（HTML5中已废弃），改用 style="width: ...px; height: ...px" 实现更可靠、符合现代标准的布局控制；
- 添加 border-collapse: collapse 防止默认单元格间距影响尺寸表现。
⚠️ 注意事项：
立即学习“PHP免费学习笔记（深入）”；
- 生产环境中应进一步验证输入范围、过滤特殊字符，并考虑使用CSS类+外部样式表替代内联样式；
- 若需响应式支持，请改用相对单位（如 %, rem）或媒体查询；
- 对于复杂表格，建议结合前端JavaScript实现预览或实时调整功能。
掌握这一模式后，你可轻松扩展为支持背景色、内容填充、合并单元格等进阶功能。
