Как настроить ширину колонок при формировании таблицы в HTML для отправки в письме

← На главную

При формировании электронных писем из 1С программисты часто сталкиваются с ситуацией, когда сверстанная таблица выглядит корректно в браузере, но «разваливается» или игнорирует настройки ширины при открытии в почтовом клиенте, таком как Outlook или Gmail. Это происходит из-за особенностей движков рендеринга почтовых программ, которые значительно ограничены по сравнению с современными веб-браузерами. В этой статье мы подробно рассмотрим, как программно управлять внешним видом таблиц и обеспечивать фиксацию ширины колонок при отправке писем из 1С.

Метод 1: Использование штатных возможностей табличного документа

Самый простой и зачастую наиболее эффективный способ — доверить генерацию HTML-кода самой платформе 1С. Если у вас уже сформирован отчет или печатная форма в объекте ТабличныйДокумент, вы можете сохранить его в формате HTML. Платформа постарается максимально точно перенести визуальные настройки (ширину колонок, шрифты, цвета) в код.

Разберем по шагам программную реализацию этого метода:


ИмяВременногоФайла = ПолучитьИмяВременногоФайла("html");
// Допустим, ТабДок — это уже заполненный ТабличныйДокумент
ТабДок.Записать(ИмяВременногоФайла, ТипФайлаТабличногоДокумента.HTML);

ЧтениеТекста = Новый ЧтениеТекста(ИмяВременногоФайла);
ТекстHTML = ЧтениеТекста.Прочитать();
ЧтениеТекста.Закрыть();

УдалитьФайлы(ИмяВременногоФайла);

// Далее этот текст вставляется в тело письма
Сообщение = Новый ПочтовоеСообщение;
Сообщение.Тексты.Добавить(ТекстHTML, ТипТекстаПочтовогоСообщения.HTML);

Преимущество этого метода: вам не нужно вручную вычислять пиксели или проценты. 1С автоматически создаст блок стилей и применит классы к ячейкам. Однако помните, что при очень большом количестве колонок почтовые клиенты могут все равно сжимать таблицу под ширину окна просмотра. Также критически важно, чтобы блок style не вырезался почтовым сервером, что иногда случается в веб-интерфейсах почты.

Метод 2: Ручная генерация HTML с использованием фиксированной разметки

Если динамика формирования таблицы сложная (например, колонки добавляются по условиям в цикле) и штатный экспорт не дает нужного результата, проанализируем ситуацию с ручным созданием тегов. Основная ошибка заключается в использовании атрибута width без указания алгоритма отрисовки таблицы.

Рассмотрим применение стиля table-layout: fixed. По умолчанию таблицы используют алгоритм auto, который определяет ширину колонок исходя из объема содержимого. Если в одной ячейке текста больше, она «раздуется», игнорируя ваши настройки. Чтобы этого избежать, используем следующий подход:

Устанавливаем для тега table стиль table-layout: fixed.
Обязательно задаем общую ширину таблицы (в пикселях или 100%).
Используем специальный блок colgroup для предварительного объявления ширины каждой колонки.

Посмотрим на пример кода, который формирует такую структуру:


ТекстHTML = "<table style=""table-layout: fixed; width: 100%; border-collapse: collapse;"" border=""1"">";
// Определяем ширину колонок заранее
ТекстHTML = ТекстHTML + "<colgroup>";
ТекстHTML = ТекстHTML + "<col style=""width: 200px;"">"; // Для номенклатуры
ТекстHTML = ТекстHTML + "<col style=""width: 80px;"">";  // Для единицы измерения
ТекстHTML = ТекстHTML + "<col style=""width: 120px;"">"; // Для цены
ТекстHTML = ТекстHTML + "</colgroup>";

// Формируем шапку
ТекстHTML = ТекстHTML + "<tr><td>Товар</td><td>Ед.</td><td>Цена</td></tr>";

// Цикл по данным
Для Каждого СтрокаДанных Из ТЗДанные Цикл
    ТекстHTML = ТекстHTML + "<tr>";
    ТекстHTML = ТекстHTML + "<td>" + СтрокаДанных.Номенклатура + "</td>";
    ТекстHTML = ТекстHTML + "<td>" + СтрокаДанных.Ед + "</td>";
    ТекстHTML = ТекстHTML + "<td>" + СтрокаДанных.Цена + "</td>";
    ТекстHTML = ТекстHTML + "</tr>";
КонецЦикла;

ТекстHTML = ТекстHTML + "</table>";

Метод 3: Борьба с ограничениями Outlook (движок MS Word)

Выясним причину, почему даже при правильном HTML таблица может выглядеть плохо. Microsoft Outlook (начиная с 2007 года) использует для отображения писем движок текстового редактора Word. Этот движок игнорирует многие CSS-свойства. Проанализируем рекомендации для обеспечения максимальной совместимости:

Дублирование атрибутов. Для Outlook лучше указывать ширину дважды: и через CSS-стиль, и через старый HTML-атрибут width. Например: <td width=""150"" style=""width: 150px;"">. При этом значения должны быть в пикселях, так как проценты Word обрабатывает не всегда корректно в многоколоночных таблицах.

Принудительный разрыв строк. Если в колонку попадает длинное значение (например, артикул без пробелов), оно может «растянуть» колонку вопреки всем запретам. Чтобы этого не произошло, добавим в стили ячеек свойства управления переносом текста:


СтильЯчейки = "style=""width: 150px; word-wrap: break-word; word-break: break-all; overflow: hidden;""";
ТекстHTML = ТекстHTML + "<td " + СтильЯчейки + " width=""150"">" + Значение + "</td>";

Метод 4: Использование невидимых «распорок» (Spacer GIF)

Если почтовый клиент все равно игнорирует ширину пустых или малозаполненных колонок, мы можем применить проверенный временем метод верстки — использование прозрачных изображений. Суть метода заключается в том, чтобы поместить внутрь ячейки картинку размером 1x1 пиксель, но принудительно растянутую до нужной ширины.

Рассмотрим пример:


// Внутри ячейки  добавляем невидимую картинку
ТекстHTML = ТекстHTML + "<td>";
ТекстHTML = ТекстHTML + "<img src=""cid:spacer"" width=""200"" height=""1"" style=""display: block;"">";
ТекстHTML = ТекстHTML + СодержимоеЯчейки;
ТекстHTML = ТекстHTML + "</td>";

Этот метод гарантирует, что ячейка не сожмется меньше, чем на 200 пикселей, так как графический элемент имеет жестко заданные размеры. Однако это требует включения картинки в ресурсы письма.

Важные рекомендации по оформлению стилей

Проанализируем еще один критический момент — инлайнинг (inlining) стилей. Большинство почтовых сервисов (особенно Gmail) крайне подозрительно относятся к блокам <style> в заголовке <head> или в начале тела письма. Если стилей слишком много, сервис может просто их вырезать.

Для надежности всегда переносите стили непосредственно внутрь тегов (атрибут style). Если вы используете штатный экспорт из 1С через Записать(..., HTML), платформа может генерировать внешнюю таблицу стилей. В таком случае желательно программно обработать полученный текст, заменяя названия классов на их содержимое в атрибутах style каждой ячейки.

Резюмируем последовательность действий для гарантированного результата:

Всегда устанавливайте border-collapse: collapse для таблицы, чтобы границы колонок не двоились.
Используйте пиксели (px) вместо процентов, если таблица сложная и содержит много колонок.
Применяйте table-layout: fixed для родительского тега table.
Для каждой ячейки первой строки (или через colgroup) задавайте ширину явно.
Добавляйте word-break: break-all для предотвращения растягивания ячеек длинными строками.

Соблюдение этих правил позволит вам создавать профессионально выглядящие отчеты в теле письма, которые будут одинаково хорошо отображаться как на десктопных версиях Outlook, так и в мобильных приложениях.

← На главную