如何使用HTML table表格实现图片画廊布局

你需要的参考布局可以通过原生HTML table标签的rowspan（跨行）和colspan（跨列）属性实现，以下是完整可运行的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义表格布局</title>
    <style>
        /* 基础表格样式，可按需调整 */
        table {
            /* 合并边框，实现单一线条效果 */
            border-collapse: collapse;
            width: 500px;
            text-align: center;
        }
        td {
            border: 1px solid #333;
            padding: 12px 8px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <!-- 第一列跨3行 -->
            <td rowspan="3">左侧大区域</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
            <td>第一行第四列</td>
        </tr>
        <tr>
            <!-- 跨2列 -->
            <td colspan="2">第二行跨2列区域</td>
            <td>第二行第四列</td>
        </tr>
        <tr>
            <td>第三行第二列</td>
            <!-- 跨2列 -->
            <td colspan="2">第三行跨2列区域</td>
        </tr>
    </table>
</body>
</html>

参数说明：

• rowspan：控制单元格纵向跨越的行数，按照你的布局需求调整数值即可
• colspan：控制单元格横向跨越的列数，根据实际排版修改数值即可
• 你可以调整样式中的宽度、内边距、边框颜色粗细等参数，匹配你需要的视觉效果。

内容的提问来源于stack exchange，提问作者Nauman khan