Границы таблицы в письме Outlook с использованием HTML

Вопрос или проблема

У меня есть макрос, который генерирует электронное письмо в Outlook. Одним из требований является добавление таблицы в письмо. Другим требованием является наличие первой части письма на французском, а второй части на английском языке. Поэтому я дублирую таблицу с разными заголовками. У меня все работает, за исключением того, что границы таблицы различаются, и я хотел бы сделать их одинаковыми.

Я самоучка и учусь тому, что могу найти на таких сайтах, но не могу понять, как сделать границы одинаковыми на обеих таблицах. Любая помощь или предложения были бы очень полезны. Заранее спасибо….

Вот код, который я использую:

TmpStr = ""
TmpStr = Trim(Workbooks(DataBook).Worksheets(1).Cells(r, 6))
            
strBeforeRows1 = ""
strRows1 = ""
             
strBeforeRows1 = "<head><style>table, th, td {border: 1px solid gray; border-collapse:" & _
"collapse;}</style></head><body>" & _
"<table style=""width:60%""><tr>" & _
"<th bgcolor=""#11ed69"">Поле 1</th>" & _
"<th bgcolor=""#11ed69"">Поле 2</th>" & _
"<th bgcolor=""#11ed69"">Поле 3</th>" & _
"<th bgcolor=""#11ed69"">Поле 4</th>" & _
"<th bgcolor=""#11ed69"">Поле 5</th>" & _
"<th bgcolor=""#11ed69"">Поле 6</th>"
                
Do While Trim(Workbooks(DataBook).Worksheets(1).Cells(r, 6)) = TmpStr
            
     DoEvents
                
//     Выполнить код для заполнения переменных для таблиц
  
strRows1 = strRows1 & "<tr>"
strRows1 = strRows1 & "<td ""col width=15%"" ""col align=center"">" & MyVIN & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=left"">" & MyPlate & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=center"">" & MyYear & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=center"">" & MyMake & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=center"">" & MyModel & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=center"">" & MySeries & "</td>"
strRows1 = strRows1 & "</tr>"
                
r = r + 1
                
Loop
            
strRows1 = strRows1 & "<tr>"
strRows1 = strRows1 & "<td ""col width=15%"" ""col align=center"">" & " " & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows1 = strRows1 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows1 = strRows1 & "</tr>"
            
strAfterRows1 = "</table></body>"
    
StrAll1 = strBeforeRows1 & strRows1 & strAfterRows1
            
StrBody = ""
StrBody2 = ""
StrBody3 = ""
StrBody4 = ""
StrBody5 = ""
StrBody6 = ""
StrBody7 = ""
   
//    Выполнить код для заполнения дополнительных переменных            

StrBody = "<font size=""3"" face=""Calibri"">" & "текст"
            
StrBody2 = "<font size=""3"" face=""Calibri"">" &  "подпись"
            
StrBody3 = "<font size=""3"" face=""Calibri"">" & StrBody & StrAll1 & StrBody2 
             
StrBody4 = "<font size=""3"" face=""Calibri"">" &  "английский текст"

strBeforeRows2 = ""
strBeforeRows2 = "<head><style>table, th, td {border: 1px solid gray; border-collapse:" & _
"collapse;}</style></head><body>" & _
"<table style=""width:60%""><tr>" & _
"<th bgcolor=""#11ed69"">Поле 1</th>" & _
"<th bgcolor=""#11ed69"">Поле 2</th>" & _
"<th bgcolor=""#11ed69"">Поле 3</th>" & _
"<th bgcolor=""#11ed69"">Поле 4</th>" & _
"<th bgcolor=""#11ed69"">Поле 5</th>" & _
"<th bgcolor=""#11ed69"">Поле 6</th>"
            
strRows2 = strRows2 & "<td ""col width=15%"" ""col align=center"">" & " " & "</td>"
strRows2 = strRows2 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows2 = strRows2 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows2 = strRows2 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows2 = strRows2 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows2 = strRows2 & "<td ""col width=10%"" ""col align=center"">" & " " & "</td>"
strRows2 = strRows2 & "</tr>"

strAfterRows2 = "</table></body>"
            
StrAll2 = ""
StrAll2 = strBeforeRows2 & strRows1 & strAfterRows1

StrBody5 = "<font size=""3"" face=""Calibri"">" & _ "английская подпись"
                
StrBody6 = "<font size=""3"" face=""Calibri"">" & StrBody4 & StrAll2 & StrBody5 
                
StrBody7 = "<font size=""3"" face=""Calibri"">" & StrBody3 & StrBody6

// код для генерации письма

Ответ или решение

Значение однородных границ таблиц в письме Outlook с использованием HTML

Когда вы создаете HTML-письмо в Outlook, особенно когда оно содержит несколько таблиц, важно, чтобы все элементы дизайна выглядели профессионально и последовательно. В вашем случае главная проблема заключается в том, что границы двух таблиц (одна с французскими заголовками, другая с английскими) не совпадают. В данной статье мы подробно рассмотрим, как добиться единообразия в оформлении таблиц с помощью HTML и CSS.

Основные принципы работы с таблицами в HTML для Outlook

  1. Использование CSS для стилизации: CSS (Cascading Style Sheets) — это стандартный способ стилизации HTML-контента. В вашем коде вы используете встроенные стили для обеих таблиц. Это хороший подход, поскольку Outlook поддерживает многие свойства CSS, включая границы таблиц.

  2. Убедитесь в согласованности стилей: Чтобы гарантировать, что границы таблиц будут выглядеть одинаково, вам нужно убедиться, что оба блока HTML содержат одни и те же стили. Измените ваш код, чтобы сохранять единый стиль для обеих таблиц.

Корректировка вашего кода

Вы можете улучшить ваш код следующим образом:

' Определите общий стиль для таблиц
Dim commonStyle As String
commonStyle = "<head><style>table, th, td {border: 1px solid gray; border-collapse: collapse;}</style></head>"

' Создание первой таблицы (французский текст)
strBeforeRows1 = commonStyle & "<body><table style=""width:60%"">" & "<tr>" & _
                  "<th bgcolor=""#11ed69"">Field 1</th>" & _
                  "<th bgcolor=""#11ed69"">Field 2</th>" & _
                  "<th bgcolor=""#11ed69"">Field 3</th>" & _
                  "<th bgcolor=""#11ed69"">Field 4</th>" & _
                  "<th bgcolor=""#11ed69"">Field 5</th>" & _
                  "<th bgcolor=""#11ed69"">Field 6</th>"

' Формирование строк таблицы
Do While Trim(Workbooks(DataBook).Worksheets(1).Cells(r, 6)) = TmpStr
    ' Ваш код для заполнения строк...
Loop

strAfterRows1 = "</table></body>"

' Создание второй таблицы (английский текст)
strBeforeRows2 = commonStyle & "<body><table style=""width:60%"">" & "<tr>" & _
                  "<th bgcolor=""#11ed69"">Field 1</th>" & _
                  "<th bgcolor=""#11ed69"">Field 2</th>" & _
                  "<th bgcolor=""#11ed69"">Field 3</th>" & _
                  "<th bgcolor=""#11ed69"">Field 4</th>" & _
                  "<th bgcolor=""#11ed69"">Field 5</th>" & _
                  "<th bgcolor=""#11ed69"">Field 6</th>"

' Формирование строк таблицы
' Ваш код для заполнения строк...

strAfterRows2 = "</table></body>"

' Объединение контента для отправки
StrBody3 = "<font size=""3"" face=""Calibri"">" & StrBody & StrAll1 & StrBody2
StrBody6 = "<font size=""3"" face=""Calibri"">" & StrBody4 & StrAll2 & StrBody5
StrBody7 = "<font size=""3"" face=""Calibri"">" & StrBody3 & StrBody6

Заключение

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

Также важно помнить, что минимизация использования встроенного стиля и применение единых стилей повысит удобство дальнейшего редактирования и масштабирования вашего кода. Используйте этот подход в будущих проектах для достижения лучшего визуального результата и читабельности.

Оцените материал
Добавить комментарий

Капча загружается...