在HTML中图像具有行跨度的表中，文本之间存在较大的空间

我在表格中有文字和图片：

<table>
       <tr><td>Jon Kowalsky</td>
       <td rowspan="4"><img src="forrest.jpg"  height="150px"/></td></tr>
       <tr><td>Eagle Rock Ave</td></tr>
       <tr><td>New York</td></tr>
       <tr><td><a href="mailto:ja@jankowalski.pl">ja@jankowalski</a></td></tr>
</table>

乔恩·科瓦尔斯基
鹰岩大道
纽约

正如您所看到的，图片位于所有四行中，但它在文本之间留出了很大的空间[下图]

---

我是否可以将文本和图像保留在表格中，并缩小文本之间的间距？

由于图像有固定的

高度，因此表格行高度变化不大。减小图像的
高度
，或增加图像表格单元格的
行span
，并将
td的
行高度
设置为较低的值或0

<table>
       <tr><td>Jon Kowalsky</td>
       <td rowspan="6"><img src="forrest.jpg"  height="150px"/></td></tr>
       <tr><td>Eagle Rock Ave</td></tr>
       <tr><td>New York</td></tr>
       <tr><td><a href="mailto:ja@jankowalski.pl">ja@jankowalski</a></td></tr>
       <tr></tr>
       <tr></tr>
</table>

发生的情况是，左侧单元格中的文本将跨越单元格的整个高度，图片占据指定数量的行

一个可能的解决方案是使用带有CSS的其他html元素

例如：

<div class="details">
    <p>Jon Kowalsky</p>
    <p>Eagle Rock Ave</p>
    <p>New York</p>
    <p><a href="mailto:ja@jankowalski.pl">ja@jankowalski</a></p>
</div>
<img src="forrest.jpg"  height="150px"/></td>

<style>
.details {
    float: left;
}

.details p:first-child {
    margin-top: 20px;
}

.details p {
    margin: 0;
}
</style>


乔恩·科瓦尔斯基

鹰岩大道

纽约


.详情{
浮动：左；
}
.详情p：第一个孩子{
边缘顶部：20px；
}
.详情{
保证金：0；
}
请不要将表格用于布局，我们在2018年。左侧的表格单元格都是右侧单元格的四分之一高，因此可以看到空白。如果添加边框，您将看到发生了什么。
<div class="details">
    <p>Jon Kowalsky</p>
    <p>Eagle Rock Ave</p>
    <p>New York</p>
    <p><a href="mailto:ja@jankowalski.pl">ja@jankowalski</a></p>
</div>
<img src="forrest.jpg"  height="150px"/></td>

<style>
.details {
    float: left;
}

.details p:first-child {
    margin-top: 20px;
}

.details p {
    margin: 0;
}
</style>