如何拆分td？

Question

我试图创建一个带有图片的表格，我希望在第一个 tr 图片会很大，而在第二个图片中它们将会缩小50％。 如何删除它们之间的空间？

HTML

<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0;  border: 1; width: 100%;" >
    <tr>
        <td><img src="Dad.jpg" alt="dad" /></td>
        <td><img src="gili.jpg" alt="gili" /></td>
        <td><img src="me2.jpg" alt="me" /></td>
    </tr>
    <tr style="border-collapse: collapse;">
        <td><img src="Hotrack.jpg" alt="hotrack" /></td>
        <td><img src="shir.jpg" alt="shir" /></td>

        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>

    </tr>

</table>

图片说明：

Answer 1

正如SeaSarp所说，不要使用桌子。您可以改用ul和li元素。要存档您想要的内容，您可以创建两个列表（每行一个）并将图像放在每个li中。像这样：

<ul>
    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>
</ul>

<ul>
    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>

    <li>
        <img src="http://image_url" />
    </li>
</ul>

默认情况下，列表具有垂直布局和其他一些细节，您可以使用css更改它：

ul {
    list-style:none; /* Do not show list points */
    display: flex; /* All elements together */
}

ul li {
    display:inline-block; /* All elements inline */
}

示例：http://jsfiddle.net/xe9a1ev9/

Answer 2

将其拆分为2个表格：

<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0;  border: 1; width: 100%;" >
    <tr>
        <td><img src="Dad.jpg" alt="dad" /></td>
        <td><img src="gili.jpg" alt="gili" /></td>
        <td><img src="me2.jpg" alt="me" /></td>
    </tr>
</table>
<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0;  border: 1; width: 100%;" >
    <tr style="border-collapse: collapse;">
        <td><img src="Hotrack.jpg" alt="hotrack" /></td>
        <td><img src="shir.jpg" alt="shir" /></td>

        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>
        <td><img src="" alt="Poppy" /></td>

    </tr>

</table>