本文详解如何基于嵌套数组数据，用 php 动态构建符合语义的 html 表格，并正确实现跨行（rowspan）布局，解决多值字段（如兴趣、技能）与单值字段（如姓名、年龄）对齐难题。
本文详解如何基于嵌套数组数据，用 php 动态构建符合语义的 html 表格，并正确实现跨行（rowspan）布局，解决多值字段（如兴趣、技能）与单值字段（如姓名、年龄）对齐难题。
在 Web 开发中，常需将具有“一对多”关系的数据（例如一名学生拥有多项爱好和多项技能）渲染为结构清晰的 HTML 表格。此时，若直接按每条子项生成独立行，会导致姓名、年龄等单值字段重复冗余；而合理使用 <td rowspan="N"> 可让父级信息纵向合并，提升可读性与专业性。<p>但关键难点在于：<strong>rowspan 值必须基于该行所有关联子项的最大数量统一计算，且后续子行（tr）需严格对应列结构，避免表格错位</strong>。原代码中错误地对 <code>hobi 和 keahlian 数组使用 implode('
<tr> 出现在 <code><td> 内），同时未控制子行数量与列对齐逻辑。<p>以下是推荐的健壮实现方案：</p>
<pre class="brush:php;toolbar:false;"><?php $data = [
['nama' => 'Asyah', 'hobi' => ['Bola', 'Voly', 'Renang'], 'umur' => '10 Tahun', 'keahlian' => ['Bernyanyi', 'Menari']],
['nama' => 'Rian', 'hobi' => ['Bola'], 'umur' => '10 Tahun', 'keahlian' => ['Main musik', 'Menari']],
['nama' => 'Boby', 'hobi' => ['Basket', 'Voly'], 'umur' => '10 Tahun', 'keahlian' => ['Bernyanyi', 'Menari', 'Coding']]
];
function renderSpannedTable($data) {
echo '</pre>
<table border="1" style="border-collapse: collapse; width: 100%;">';
echo '<thead><tr>';
echo '<th>Nama</th>
<th>Hobi</th>
<th>Umur</th>
<th>Keahlian</th>';
echo '</tr></thead>
<tbody>';
foreach ($data as $item) {
$hobiCount = count($item['hobi']);
$keahlianCount = count($item['keahlian']);
$rowspan = max($hobiCount, $keahlianCount);
// 第一行：显示姓名、首个爱好、年龄、首个技能，并设置 rowspan
echo '<tr>';
echo '<td rowspan="' . $rowspan . '">' . htmlspecialchars($item['nama']) . '</td>';
echo '<td>' . ($hobiCount > 0 ? htmlspecialchars($item['hobi'][0]) : '') . '</td>';
echo '<td rowspan="' . $rowspan . '">' . htmlspecialchars($item['umur']) . '</td>';
echo '<td>' . ($keahlianCount > 0 ? htmlspecialchars($item['keahlian'][0]) : '') . '</td>';
echo '</tr>';
// 后续行：仅填充剩余爱好和技能，保持列结构一致（空单元格占位）
for ($i = 1; $i ';
echo '<td>' . ($i ';
echo '</td>
<td></td>'; // Umur 列已由 rowspan 覆盖，此处留空
echo '<td>' . ($i ';
echo '';
}
}
echo '</td>
</tbody>
</table>';
}
renderSpannedTable($data);
?><p>✅ <strong>核心要点说明：</strong> </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>
<strong>rowspan 计算准确</strong>：以 <code>max(count(hobi), count(keahlian)) 确保姓名与年龄能完整覆盖该学生所有子项行数；
<td> 占位），避免列偏移； <li>
<strong>安全防护</strong>：使用 <code>htmlspecialchars() 防止 XSS，尤其当数据来自用户输入或数据库时； count() > 0 和 $i 判断确保数组访问安全，避免 <code>Undefined offset；
<thead> / <code><tbody> 明确划分表头与主体，利于可访问性与样式控制。<p>⚠️ <strong>注意事项：</strong> </p>
<ul>
<li>若某学生无任何爱好或技能（空数组），<code>max(0, 0) 将得 0，导致 rowspan="0"（非法）。建议预处理数据，至少保证 rowspan >= 1； hobi 与 keahlian 是唯一需要展开的多值字段；若新增类似字段（如 nilai），需同步扩展 rowspan 计算逻辑与列结构； table-layout: fixed）及现代框架（如 DataTables）进一步增强体验。通过以上方法，即可生成结构正确、语义合规、易于维护的动态 rowspan 表格，真正实现数据与呈现的精准对齐。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
