나란히 나란히 표 만들기

Question

내가 알 수있는 한, 내가 여기서 생각하고있는 문제는 쉽게 Googleable의 솔루션을 갖고 있지 않은 것입니다. 아마도 나는 내 검색을 흐리게하고/또는 내가보고있는 것을 이해하지 못하고 있지만 실제로 아무것도 찾을 수 없었습니다.

이것은 기본적으로 모바일 친화적 인 이메일 템플릿의 구조입니다. 모바일 장치에서 볼 때 모든 내용을 단일 열이되게하려면 테이블에 모든 내용을 수집해야합니다. 불행히도, 우리 모두가 알듯이, 테이블은 자연스럽게 이웃들의 높이까지 늘어나지 않습니다. 그들은 분명히 아래 내용을 아래로 밀어 넣을 수 있지만 이웃 사람은 그것을 일치시킬 수 없습니다.

분명히 정상적인 구조에서는 TR 내부의 모든 것을 TD로 구성하여 해결할 수 있지만 필자에게 보여주고있는 구조는 필수 항목이며 그 내용이되기까지 오랜 시간이 걸렸습니다. 나는 (적어도 상향 조정에 관한 한) 유연하게 할 수있는 여지는 충분하지 않지만, 집중적 인 구조 조정이 필요한 솔루션의 경우, 어떻게 작동하게하는지 명확히하려고 노력할 것이다.

모든 의견을 깊은 평가와 솔루션은 천 골드 Krugerands 보상을받을 것입니다.

아래의 코드 샘플은 전체 예제 here입니다.

<!-- CONTENT CLOSE -->    
</td> 
<!-- CONTENT WRAPPER CLOSE -->   
</tr> 
</table> 
<!-- COLUMN CLOSE -->  
</td> 
</tr> 
</table> 

<!-- COLUMN --> 
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: transparent;"> 
<tr > 
<td border="0" cellpadding="0" cellspacing="0" style="width: 100%; border: 0; padding: 0px; margin: 0px"> 

<!-- CONTENT WRAPPER -->  
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top; background-color: #000;"> 
<tr > 

<!-- CONTENT --> 
<td border="0" cellpadding="0" cellspacing="0" style="padding: 0px; vertical-align: top; margin:0px;"> 

<!-- CONTENT CLOSE -->    
</td> 
<!-- CONTENT WRAPPER CLOSE -->   
</tr> 
</table> 
<!-- COLUMN CLOSE -->  
</td> 
</tr> 
</table> 

<!-- COLUMN --> 
<table border="0" cellpadding="0" cellspacing="0" valign="top" style="width: 50%; background-color: transparent; vertical-align: top; clear: left;" align="left"> 
<tr > 
<td valign="top" style="width: 100%; border: 0; vertical-align: top; padding: 10px;" > 

<!-- CONTENT WRAPPER -->  
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top; background-color: #0e616d; " > 
<tr > 

<!-- CONTENT --> 
<td style="padding: 10px; vertical-align: top; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b;"> 

<p style="margin: 0px; text-align: center; font-size: 72px; font-family: Tahoma, Geneva, sans-serif; color: #24ccca; font-weight: bold;">LONG</p> 
<p style="margin: 0px; text-align: center; font-size: 16px; color: #fff;">I'm dragging out this sentence so that I can provide a good example that properly illustrates the issue I'm having. I've also upped the font size because I really shouldn't be making this example so elaborate, but I'm kinda having fun.</p> 

<!-- CONTENT CLOSE -->    
</td> 
<!-- CONTENT WRAPPER CLOSE -->   
</tr> 
</table> 
<!-- COLUMN CLOSE -->  
</td> 
</tr> 
</table> 




<!-- COLUMN --> 
<table border="0" cellpadding="0" cellspacing="0" valign="top" style="width: 50%; background-color: transparent; vertical-align: top; " align="left"> 
<tr > 
<td valign="top" style="width: 100%; border: 0; vertical-align: top; padding: 10px;" > 

<!-- CONTENT WRAPPER -->  
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top; background-color: #0e616d; " > 
<tr > 

<!-- CONTENT --> 
<td style="padding: 10px; vertical-align: top; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b;"> 

<p style="margin: 0px; text-align: center; font-size: 72px; font-family: Tahoma, Geneva, sans-serif; color: #24ccca; font-weight: bold;">SHORT</p> 

<p style="margin: 0px; text-align: center; font-size: 16px; color: #fff;">See the column to the left for an explanation for why this column is so dang short.</p> 

<!-- CONTENT CLOSE -->    
</td> 
<!-- CONTENT WRAPPER CLOSE -->   
</tr> 
</table> 
<!-- COLUMN CLOSE -->  
</td> 
</tr> 
</table> 


<!-- COLUMN --> 
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: transparent;"> 
<tr > 
<td border="0" cellpadding="0" cellspacing="0" style="width: 100%; border: 0; padding: 0px; margin: 0px"> 

<!-- CONTENT WRAPPER -->  
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top; background-color: #000;"> 
<tr > 

<!-- CONTENT --> 
<td border="0" cellpadding="0" cellspacing="0" style="padding: 0px; vertical-align: top; margin:0px;"> 

<!-- CONTENT CLOSE -->    
</td> 
<!-- CONTENT WRAPPER CLOSE -->   
</tr> 
</table> 
<!-- COLUMN CLOSE -->  
</td> 
</tr> 
</table> 



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

Answer 1

나는 이메일 제작 템플릿을 볼 수 있습니다.

<table> 
<tr> 
    <td colspan=4>cell</td> 
    </tr> 
    <tr> 
    <td colspan=2>cell</td> 
    <td colspan=2>cell</td> 
    </tr> 
    <tr> 
    <td colspan=4> 
    <table> 
     <tr> 
     <td>cell</td> 
     <td>cell</td> 
     <td>cell</td> 
     </tr> 
    </table> 
    </td> 
    </tr> 
    <tr> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    </tr> 
    <tr> 
    </tr> 
</table> 

그리고 일부 CSS :

table { 
    border-spacing: 2px; 
} 
td { 
    background: #999; 
    text-align: center; 
} 

table table { 
    width: 100%; 
    border-spacing: 2px; 
} 
table table td { 
    width: 33%; 
} 

내가 옳다 경우, 가장 좋은 방법은 colspans 및 rowspans으로 하나의 테이블에 그것을 해결하려고 표 안에 적절한 테이블, 그래서보다는 중첩 테이블을 만드는 것입니다

스타일을 올바르게 지정하면됩니다.

working example

업데이트 : 글쎄, 어쩌면, exatcly 하나의 테이블이 아니다,하지만 적절한 구조를 가지고있다.