如何通过遍历文件名数组扩展HTML表格，展示双列目录图片？

先修正你代码里的几个错误：

• <th>标签里多了一个前引号，正确写法是 <th>heading1</th>
• 不存在<tc>标签，单元格需要用<td>标签

下面是完善后的代码，实现每列对应一个目录、每个单元格一张图片的效果，同时添加基础样式保证图片整齐对齐：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图表展示</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        td img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>目录1图表</th>
        <th>目录2图表</th>
    </tr>
    <!-- 第一行图片 -->
    <tr>
        <td><img src="你的目录1路径/image1_1.png" alt="图表1-1"></td>
        <td><img src="你的目录2路径/image2_1.png" alt="图表2-1"></td>
    </tr>
    <!-- 第二行图片 -->
    <tr>
        <td><img src="你的目录1路径/image1_2.png" alt="图表1-2"></td>
        <td><img src="你的目录2路径/image2_2.png" alt="图表2-2"></td>
    </tr>
    <!-- 后续图片行按此格式重复添加 -->
</table>
</body>
</html>

关键说明： #

• 路径替换：把代码里的你的目录1路径和你的目录2路径替换成实际的文件夹路径，比如图片存在./charts/folder1和./charts/folder2，就写成./charts/folder1/image1_1.png
• 样式作用：CSS设置让表格边框合并、单元格内容居中，图片自适应单元格宽度并居中显示，确保不同尺寸的图片都能整齐排列
• 批量优化：如果图片数量多，你可以用Python脚本遍历两个目录的图片文件，自动生成对应的<tr>和<td>代码段，不用手动逐行编写

内容的提问来源于stack exchange，提问作者doctor-pow-bow