Как исправить эту проблему с пробелами между изображениями в HTML?

Требование

Я хочу создать изображение с несколькими гиперссылками и отправить его кому-нибудь по электронной почте.

Что я сделал

Я использовал метод нарезки Photoshop и добавил URL к срезам. Сохранил композицию для сети. Чтобы это работало на стороне моего получателя, я загрузил каждый фрагмент на веб-сайт онлайн-хостинга фотографий и отредактировал HTML-тег img src="local photo location" на img src = "online photo location". Но проблема в том, что я получаю несколько пробелов между каждым фрагментом, что искажает общее изображение.

Код

    <html>
    <head>
    <title>General Infosheet July 25</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (General Infosheet July 25.jpg) -->
    <table id="Table_01" width="800" height="1034" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <a href="http://facebook.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_01_zpsgxd25oae.jpg" width="539" height="158" border="0" alt=""></a></td>
            <td rowspan="2">
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_02_zpsmqhre1ll.jpg" width="260" height="452" alt=""></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="158" alt=""></td>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_03_zpsnfkulzvt.jpg" width="539" height="876" alt=""></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="294" alt=""></td>
        </tr>
        <tr>
            <td>
                <a href="http://twitter.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_04_zps239b1stn.jpg" width="260" height="144" border="0" alt=""></a></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="144" alt=""></td>
        </tr>
        <tr>
            <td>
                <a href="http://instagram.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_05_zpsuwqhoawm.jpg" width="260" height="134" border="0" alt=""></a></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="134" alt=""></td>
        </tr>
        <tr>
            <td>
                <a href="http://photobucket.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_06_zpsiwxkb9ty.jpg" width="260" height="304" border="0" alt=""></a></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="304" alt=""></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html> 

Вопрос

Я хочу удалить пробел между изображениями. Предоставьте изменения кода, которые помогут удалить эти пробелы.


person Shrijan Aryal    schedule 28.07.2016    source источник
comment
Выкинь код. Начинать с нуля. Не используйте таблицы для макета. Сейчас не 1997 год. Сейчас веб-браузеры хорошо поддерживают CSS. Также не пишите недопустимый HTML: validator.w3.org/nu   -  person Quentin    schedule 28.07.2016
comment
изображение содержит пробел   -  person LF00    schedule 28.07.2016
comment
@Quentin: В вопросе упоминается электронная почта, а не веб-браузеры. Теги должны быть закреплены.   -  person Nisse Engström    schedule 28.07.2016


Ответы (2)


Убедитесь, что отступ для каждой ячейки таблицы равен 0 пикселей, а затем установите для свойства border-spacing значение 0, а для свойства border-collapse значение collapse. Таблицы по умолчанию имеют пробелы, что приводит к пробелам.

person Arnav Borborah    schedule 28.07.2016

Ответить

Я смог решить эту проблему, проверив раздел тела письма в Hotmail, а затем вставив весь HTML-код в инспекторе. Таким образом, код интерпретируется не Outlook, а механизмом веб-браузера. Таким образом, это может быть решительным решением для тех, кто пытается отправить по электронной почте сложный HTML-код.

person Shrijan Aryal    schedule 02.08.2016