HTML 전자 메일에서 간단한 구분선을 만드는 가장 신뢰할 수있는 방법은 무엇입니까?

Question

빈 앵커 요소 이상을 포함하고 배경색을 가진 단일 열이있는 테이블 행을 사용하여 시도했습니다. 이것은 일부 클라이언트에서 작동하지만 대부분은 말하지 않습니다. 나는 또한 컬럼과 행의 경계선을 설정하려고 시도했으나 이것은 또한 매우 혼란스러운 결과를 가져온다. 또 다른 옵션은 이미지를 사용하는 것입니다 ...

이렇게하는 확실한 기술이 있습니까? 나는 상당히 새로운 이메일 디자인입니다.

Answer 1

전자 메일의 분할자를 원한다면 </hr> 태그를 사용하고 가로 규칙을 사용하면됩니다.

Answer 2

원하는 색상의 1px 테두리가있는 표 셀은 렌더링 할 때 가장 안정적인 방법입니다.

<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" style="margin:0;padding:0;"> 
<tr> 
<td style="border-bottom:1px solid #ffffff;"> 
Content Here 
</td> 
</tr> 
</table> 

관련하여 모든 이메일 클라이언트의 이미지에는 테두리가 작동하지 않는 것으로 나타났습니다.

Answer 3

여러 가지 방법 당신은 당신이 할 수있는 단락, 단락 전체 폭에 따라 수평 "규칙"을 원하는 경우 중 하나가 있습니다 :

<td bgcolor="#ffffff" style="border:none; border-bottom: 1px solid #cccccc;">My text plus at least two break tags for padding <br /><br /></td> 

또는

<tr> 
<td bgcolor="#FFFFFF" style="Verdana;">Some content text here with no break tag after it.</td> 
</tr> 
<tr> 
<td height="1" bgcolor="#ffffff" style="border:none; border-bottom: 1px solid #cccccc; font-size:1px; line-height:1px;">&nbsp;</td></tr> 

두 번째 방법은 두 개의 픽셀을 추가 할 수 있습니다 어떤 전자 메일 클라이언트 및 렌더링 방법이 사용되는지에 따라 레이아웃에 추가 할 수 있습니다. 그러나 텍스트에 "패딩"을 비 유적으로 추가하도록 높이를 설정할 수 있기 때문에 훨씬 더 신뢰할 수 있습니다. 모든 전자 메일 클라이언트에서 패딩이 일방적으로 작동하지는 않습니다.

더 복잡한 "패딩"옵션은, 그때 추가 "패딩"열 * 해킹 Outlook 용 font-size:1px; line-height:1px;" 플러스  을 사용하여 테이블을 중첩 클로징 <td>에 border-bottom을 추가하는 게 좋을 것.

Answer 4

분할 선이 두꺼운 픽셀이라고 가정 할 때 보통 10px x 40px라고하는 이미지를 사용하며 분할 선은 수직으로 가운데에 배치됩니다 (기술적으로는 1px x 40px가 작동하지만). 그런 다음 이미지를 표 셀의 전체 너비로 늘립니다.

키가 큰 이유는 이미지를 패딩에 사용하기 때문입니다. 여분의 '불필요한'픽셀은 이미지가 < 크기가 10px이므로 문제가되지 않습니다.

장점은 ...이 기술은 당신이 정확하게 전후에 수직 패딩을 제어 할 수 있습니다, 또한 내가 높은 19px 생각 Outlook에서 분 셀 높이 문제를 피할 수 있다는 것입니다