HTML 表格 - 如何调整大图像下方的单元格大小？答案

【问题标题】：HTML Tables - How can cells below a large image be resized?HTML 表格 - 如何调整大图像下方的单元格大小？
【发布时间】：2014-10-28 08:11:21
【问题描述】：

如何调整大图像下方的多个表格单元格的大小以适合图像正下方？

这是我正在谈论的问题的一个示例。在此示例中，表格顶部有一个大图像，后面是包含两个文本单元格的行。第一个单元格的宽度与图像的宽度相同，并将第二个单元格从图像下方推出。

这是首选结果的示例。在此示例中，文本单元格都已调整大小（使用图像编辑器）以适合图像下方。

我已搜索此问题的解决方案，但未找到任何专门针对此特定问题的结果。我尝试过使用各种元素，例如 colspan、rowspan 和 width，但我一定不能正确使用它们。处理这个特定问题的正确方法是什么？

这里是有问题的 HTML：

<body>
    <table>
        <tr>
            <td><img src="http://blog.bookgator.com/wp-content/uploads/2012/11/CreativeCommonsLogo.jpg"></td>
        </tr>
        <tr>
            <td>TEXT</td>
            <td>TEXT</td>
        </tr>

    </table>
</body>

【问题讨论】：

尝试使用colspan 属性

标签： html image html-table

【解决方案1】：

将 colspan="2" 属性赋予包含 Image 的 <TD>。

colspan 属性，表示“列跨度”将跨越指定单元格数量的单元格。

这是更新后的代码：

<table border="1">
    <tr>
        <td colspan="2"><img src="http://blog.bookgator.com/wp-content/uploads/2012/11/CreativeCommonsLogo.jpg"></td>
    </tr>
    <tr>
        <td>TEXT</td>
        <td>TEXT</td>
    </tr>

</table>

这是工作小提琴：http://jsfiddle.net/hmvfem07/

【讨论】：

【解决方案2】：

    <table>
    <tr>
        <td colspan="2"><img src="http://blog.bookgator.com/wp-content/uploads/2012/11/CreativeCommonsLogo.jpg"></td>
    </tr>
    <tr>
        <td>TEXT</td>
        <td>TEXT</td>
    </tr>

    </table>

fiddle

【讨论】：