Как разделить тд?

Question

Я пытаюсь создать таблицу с изображениями, и я хочу, чтобы в первом случае изображение было большим, а во втором - на 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

Разделите его на 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>

Answer 2

Как сказал 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/