Html 如何拆分td？

我正在尝试创建一个包含图片的表格，我希望在第一个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>
</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>

---

正如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>

---

示例：不要将表格用作布局。

<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>

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

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