HTML 테이블이 제대로 쌓이지 않았 음

HTML 메일을 만들려고합니다. 그 이유는 내가 테이블을 사용하고 있기 때문입니다. 나는 몇 가지 글 머리 기호가 뒤에 오는 시작 텍스트가있다. 그러나 시작 텍스트는 글 머리 기호를 정렬하는 대신 오른쪽으로 푸시됩니다. http://jsfiddle.net/wWxYg/HTML 테이블이 제대로 쌓이지 않았 음

내 HTML :

<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="15" align="left" valign="top"> 
      <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />   
     </td> 
     <td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;"> 
      <p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px"> 
       Title Section Goes Here 
      </p> 
      <p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros. 
      </p> 
      <p style="margin: 13px 0 13px; color: #585A63;"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros. 
      </p>  
      <p style="margin: 13px 0 13px; color: #585A63;"> 
       Sub Title Goes Here:<br /><br /> 
      </p> 
       </td> 
      </tr> 
      <tr> 
       <td> 

        <table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;"> 
         <tr> 
          <td width="5" height="15" valign="top">&bull;</td> 
          <td width="250" height="15" valign="top">Interesting point number 1</td> 
         </tr> 

         <tr><td>&nbsp;</td></tr> 

         <tr> 
          <td width="5" height="15" valign="top">&bull;</td> 
          <td width="250" height="15" valign="top">Interesting point number 2</td> 
         </tr> 

         <tr><td>&nbsp;</td></tr> 

         <tr> 
          <td width="5" height="15" valign="top">&bull;</td> 
          <td width="250" height="15" valign="top">Interesting point number 3</td> 
         </tr> 

         <tr><td>&nbsp;</td></tr> 

         <tr> 
          <td width="5" height="15" valign="top">&bull;</td> 
          <td width="250" height="15" valign="top">Interesting point number 4</td> 
         </tr> 
        </table> 

       </td> 
      </tr>     
</table>

출처

2013-05-03 Timothy Adams

당신이 다른 내부에 하나 개의 테이블을 중첩 때문인 것으로 보인다

여기에 간단한 바이올린입니다. 여기에 중첩되지 않은 바이올린이 있습니다. http://jsfiddle.net/wWxYg/1/

다음 코드도 있습니다.

<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="15" align="left" valign="top"> 
      <img src="images/spacer.gif" width="15" height="2" border="0" alt=" "/>   
     </td> 
     <td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;"> 

      <p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px"> 
      Title Section Goes Here 
      </p> 

      <p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros. 
      </p> 

      <p style="margin: 13px 0 13px; color: #585A63;"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros. 
      </p> 

      <p style="margin: 13px 0 13px; color: #585A63;"> 
      Sub Title Goes Here:<br /><br /> 
      </p> 
     </td> 
    </tr>     
</table> 

<table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;"> 
    <tr> 
     <td width="5" height="15" valign="top">&bull;</td> 
     <td width="250" height="15" valign="top">Interesting point number 1</td> 
    </tr> 

    <tr><td>&nbsp;</td></tr> 

    <tr> 
     <td width="5" height="15" valign="top">&bull;</td> 
     <td width="250" height="15" valign="top">Interesting point number 2</td> 
    </tr> 

    <tr><td>&nbsp;</td></tr> 

    <tr> 
     <td width="5" height="15" valign="top">&bull;</td> 
     <td width="250" height="15" valign="top">Interesting point number 3</td> 
    </tr> 

    <tr><td>&nbsp;</td></tr> 

    <tr> 
     <td width="5" height="15" valign="top">&bull;</td> 
     <td width="250" height="15" valign="top">Interesting point number 4</td> 
    </tr> 
</table>

출처

2013-05-03 01:53:19

가 실제로 중첩 테이블이 필요합니다. 내 외부 테이블에는 실제로 여러 개의 중첩 테이블이 있지만이 테이블이 문제를 일으키는 유일한 테이블입니다. –

외부 테이블에는 두 개의 행이 있습니다. 첫 번째 행에는 두 개의 열이 있고 두 번째 행에는 하나만 있습니다. 스페이서 이미지가 포함 된 첫 번째 행의 열을 제거하면 올바르게 정렬됩니다.

이 제거 :

<td width="15" align="left" valign="top"> 
     <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />   
    </td>

출처

2013-05-03 01:54:50 nolt2232

이것은 작동하지 않습니다. 시작 텍스트는 전체 행을 차지하는 반면 왼쪽 텍스트는 1/2 만 차지합니다. –

제목 섹션과 글 머리 기호 모두가 왼쪽을 차지하기를 원하십니까? 그렇다면 테이블 너비를 좁게하십시오. http://jsfiddle.net/fMaLx/ – nolt2232

첫 번째 행은 I 번째와 첫 번째 셀을 교환. 당신이 간격을 원하는 경우 당신은 padding-left:10px;

jsfiddle을 추가 할 수 있습니다http://jsfiddle.net/wWxYg/2/

출처

2013-05-03 02:12:07 Mal

HTML 테이블이 제대로 쌓이지 않았 음

답변

관련 문제