Reputation: 687
HTML table giving me trouble
I tried creating the table below using 2 tables side by side (300 width and 300 width for each), however, because of the layout, if I create it as one table which is what I am trying to achieve, the left and right heights get all jumbled up because the cells on the left extend to the height of the cells on the right.
How can I achieve this (it's for a HTML email newsletter so no div's)?
My two table layout that I would prefer doing in one table
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: left; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-top-left.png" width="300" height="74" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td height="163" style="border-collapse: collapse;vertical-align: top;">
<p class="l1" style="margin-left: 25px; margin-bottom: 0; margin-right: 0; margin-top: 0; color: #ed1c24; font-family: arial, serif; font-size: 26.5px; line-height: 26.5px;">Content left</p>
</td></tr>
<tr><td valign="top" style="border-collapse: collapse;">
<img style="vertical-align: top; outline: none; text-decoration: -ms-interpolation-mode: bicubic;" border="0" src="images/content-bottom-left.png" width="300" height="75">
</td></tr>
<tr><td valign="top" style="background-color: #a4000f; height: 148px; border-collapse: collapse;" bgcolor="#a4000f">
<img border="0" src="images/content-bottom-left-2.png" width="300" height="146" style="vertical-align: top; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="300" style="float: right; display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr><td style="border-collapse: collapse;"><img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"></td></tr>
<tr><td style="border-collapse: collapse;">
<img align="top" border="0" src="images/content-bottom-right.png" width="300" height="138" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;">
</td></tr>
<tr><td width="292" height="158" valign="top" style="background-color: #a4000f; padding-top: 0; padding-left: 0; padding-bottom: 0; padding-right: 8px; height: 160px; border-collapse: collapse;margin-top:0;" bgcolor="#a4000f">
<p class="c1" style="margin-left: 0; margin-bottom: 0.5em; margin-right: 0; text-align: left; color: #fff; font-family: arial, serif; font-size: 15px; line-height: 15px; font-weight: 500;" align="left">The right content<span style="font-size: 10px; line-height: 10px; vertical-align: text-top;">*</span></p>
</td></tr>
</table>
Upvotes: 0
Views: 231
Answers (3)
Reputation: 382
Example of 1 table with 2 columns where content stacked:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="300">
<div>
<img align="top" border="0" src="images/content-top-left.png" width="300" height="74"
style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
</div>
<div>
<p class="l1" style="margin-left: 25px; margin-bottom: 0; margin-right: 0; margin-top: 0;
color: #ed1c24; font-family: arial, serif; font-size: 26.5px; line-height: 26.5px;">
Content left</p>
</div>
<div>
<img style="vertical-align: top; outline: none; text-decoration: -ms-interpolation-mode: bicubic;"
border="0" src="images/content-bottom-left.png" width="300" height="75" />
</div>
<div>
<img border="0" src="images/content-bottom-left-2.png" width="300" height="146" style="vertical-align: top;
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
</div>
</td>
<td valign="top" width="300">
<div>
<img border="0" align="top" src="images/right.png" height="162" width="300" style="outline: none;
text-decoration: none; -ms-interpolation-mode: bicubic;" />
</div>
<div>
<img align="top" border="0" src="images/content-bottom-right.png" width="300" height="138"
style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;" />
</div>
<div>
<p class="c1" style="margin-left: 0; margin-bottom: 0.5em; margin-right: 0; text-align: left;
color: #fff; font-family: arial, serif; font-size: 15px; line-height: 15px; font-weight: 500;"
align="left">
The right content<span style="font-size: 10px; line-height: 10px; vertical-align: text-top;">*</span></p>
</div>
</td>
</tr>
</table>
Upvotes: 0
Reputation: 25030
I would simply use a table with one row and two cells, one for each column. Stack all the content in each cell.
If you need to nest another table inside each cell to put paddings around the text, that's easy to do.
For an example (off the top of my head, I haven't done this in a long time!)
with single table:
<table width="600">
<tr>
<td width="300">
<img src="top_left.png"><br>
Text goes here<br>
<img src="left.png"><br>
<img src="bottom_left.png">
</td>
<td width="300">
<img src="top_right.png"><br>
<img src="right.png"><br>
More text goes here
</td>
</tr>
</table>
or with two tables:
<table width="600">
<tr>
<td width="300">
<table>
<tr><td><img src="top_left.png"></td></tr>
<tr><td style="padding: 20px;">text goes here</td></tr>
<tr><td><img src="left.png"></td></tr>
<tr><td><img src="bottom_left.png"></td></tr>
</table>
</td>
<td width="300">
<table>
<tr><td><img src="top_right.png"></td></tr>
<tr><td><img src="right.png"></td></tr>
<tr><td style="padding: 20px;">more text goes here<td></tr>
</table>
</td>
</tr>
</table>
(of course I left off all the other HTML email tricks like display:block and widths and heights on all the images, but you can fill those in)
Upvotes: 2
Reputation: 13709
I guess you might be able to use div tags. But for html tables check the following table with 5 rows 2 columns, all rows of same height.
<table>
<tr height="20%">
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr height="20%">
<td></td>
<td></td>
</tr>
<tr height="20%">
<td></td>
<td></td>
</tr>
<tr height="20%">
<td></td>
<td></td>
</tr>
<tr height="20%">
<td></td>
<td></td>
</tr>
</table>
You can also give the options for alignment in general or to specifc cell if required.
Edit
You can't specify different height for 2 cells in same row. I guess the rowspan would be helpful here.
Sameple code
<table>
<tr>
<td>Content</td>
<td rowspan="2">Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
Adjust this as per your need.
Upvotes: 0