I created a mockup which includes a content area and two expandable/collapsible ads on the left and right.
<table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
<tr>
<td style="background:blue; text-align:right;"><img src="http://www.citiesmatter.org/vertical/Sites/%7BC2C0C8B8-8BB9-430D-B364-373386495DE7%7D/uploads/%7B42CEE0EB-39AA-469A-8A71-F6733F2A9172%7D.GIF" style="width:100%;" /></td>
<td style="width:400px; background:red;">
<p>Content</p>
</td>
<td style="background:blue;"><img src="http://www.citiesmatter.org/vertical/Sites/%7BC2C0C8B8-8BB9-430D-B364-373386495DE7%7D/uploads/%7B42CEE0EB-39AA-469A-8A71-F6733F2A9172%7D.GIF" style="width:100%;" /></td>
</tr>
</table>
http://jsfiddle.net/DVevt/1/
Is it possible to do this with only divs?
Related
I am coding a custom email template HTML/CSS and I need to replicate the attached image.
My question is about the blue background color element, which goes beyond two table rows, one would be the "Welcome to the family", and the other would contain the video.
How can I implement that?
<!-- BEGIN MODULE: BODY CONTENT // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top" style="background-color:#1D75B9; border:0;">
<h2 style="margin:40px 20px; text-transform:capitalize; text-align:center;">Welcome to the family!</h2>
</td>
</tr>
<tr>
<td valign="top">*|YOUTUBE:[$vid=fj77lSG6Bl8, $max_width=500, $ratings=N, $views=N, $border=N, $title=N, $trim_border=N]|*
</td>
</tr>
</table>
<!-- // END MODULE: BODY CONTENT -->
Any example that makes the same thing would be helpful to me.
thank you
You can do like this :
<body style="margin:0px; padding:0px;">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top">
<img src="WvLArjpg6991210.png">
</td>
</tr>
<tr>
<td valign="top">
<img src="second.png" width="461">
</td>
</tr>
</table>
</div>
</body>
You have cut images into pieces and use in <tr><td><img src></td></tr>
http://imgur.com/a/fKv2H
I need banner with height 100px. and img inside it with height 120px. So the picture comeee out my banner for 20px;
Its for emails.
Also i need text column right before picture, so that text in column with background f4f4f4
<table>
<tr>
<td>
<img src="" style="margin-top:-20px;" />
</td>
<td>
banner text here
</td>
</tr>
</table>
You can do this two ways, one involved slicing the image into two and the other is using two more tables. I have added the code below for you to decide which one you want to go with.
Option 1:
This option has the image as one piece sitting in an outer table with 3 columns. The outer two columns have a table with white background to cater for the heads/hats popping out of the grey area. I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
<td width="171" valign="top"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Option 2
For this option, you will need to slice the top part of the image (with white background) and place both the images in one table with two rows. Both images are centered and I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#ffffff"><img src="http://i64.tinypic.com/lz7f6.png" style="display: block;">
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#f4f4f4"><img src="http://i68.tinypic.com/4qo1mu.png" style="display: block;"></td>
</tr>
</tbody>
</table>
The final outcome for both codes should look like this:
Let me know which option best suits you.
** UPDATE **
Your question asked if you can have option 1 with image to the left and text on the right, here is the example:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="171" valign="top" style="padding-left:20px;"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
<tr>
<td style="font-family:Arial; font-size:12px; color:#000000; padding:5px 10px;">This is some text for your email</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I added colors so you could see that it was outside the table. I gave the image a height of 120px, width of auto. Made the td's have a max-height of 100px; And I left your -20px margin on the image.
<body style="background-color:pink">
<table style="background-color:orange;">
<tr>
<td style="max-height:100px; overflow-y:initial;">
<img src="https://i.imgur.com/ZESO4DT.png" style="margin-top:-20px; height:120px; width:auto;" />
</td>
<td style="max-height:100px;overflow-y:initial;">
banner text here
</td>
</tr>
</table>
</body>
I'm trying to get the image to align to the right and the rows with text on the left in my table using colspan. This method usually works when the image is on the left but now I want it on the right it wont work. Please keep in mind this is for outlook email so you cannot use floats, align="right" etc.
heres my code:
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="580" style="border: 1px solid;">
<tr>
<td style="font-size: 10px;">sdfsdfsdfsdfdsdfhhhhhhhhlklkjlkj</td>
<td></td>
</tr>
<tr>
<td>sdfsdf</td>
</tr>
<tr>
<td rowspan="3" ><img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400"></td>
</tr>
</table>
</td>
</tr>
</table>
https://jsfiddle.net/yk3fanoq/1/
You need to put the text and image in two columns (td)
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<tr>
<td align="left">
sdfsdfsdfsdfdsdfhhhhhhhhlklk
sdfsdf
</td>
<td rowspan="3" align="right">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400">
</td>
</tr>
</td>
</tr>
</table>
The text I have on top in the table row is somehow affected by the second column below it..cant seem to have it take up the entire width of the table.
http://jsfiddle.net/PmWBw/2/
Sorry I know I am the only one still working in tables. HTML emails still exist.
<table width="800" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">
<table>
<tr style="width: 800px;">TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</tr>
</table>
<td valign="top" width="260" class="leftColumnContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
</td>
</tr>
</table>
</td>
<td valign="top" width="260" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />
</td>
</tr>
</table>
</td>
</table>
For starters, your first row consists of a td inside a tr that's inside ANOTHER td. If nothing else, that should probably be addressed.
Also, a bit unrelated to you original question, but it seems a bit redundant to have tables inside of your cells, when I'm not seeing any real benefit or function gained by the added code. You're styling your inner tables with the same things you can be applying to either the td or the image itself. At least in this particular application.
Just a thought.
UPDATED:
<table width="600" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">
<tr>
<td colspan="2">
<table>
<tr style="width: 600px;">
<td>TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="260" class="leftColumnContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
</td>
</tr>
</table>
</td>
<td valign="top" width="260" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />
</td>
</tr>
</table>
</td>
</tr>
</table>
First of all, you can not have the code looking like this:<td><tr><td>asdf</td></tr></td>. It the <tr> needs to be wrapped by <table>.
I am constructing a webpage using fairly elementary techniques. I have three rows on a certain part of the webpage, each of which is structured as . The text units and the listbox units of the different rows are in perfect horizontal alignment, but the vertical spacing between the listboxes is inconsistent. Furthermore the vertical alignment of each listbox in relation to its paired text is different. I've tried readjusting the table structure and experimenting with valign, but to no avail. How do I fix this so that it looks neat? Thanks!
You could set the height of each td by css like
td {
height: 50px
}
also you should check out some tutorials on how to design forms without using tables http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/
<form>
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%">
Please choose the test category:
</td>
<td align="left" width="50%">
<form action="">
<select name="categories" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%" valign="center">
Please choose the test:
</td>
<td align="left" width="50%" valign="center">
<form action="">
<select name="tests" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%">
Please choose the difficulty:
</td>
<td align="left" width="50%">
<form action="">
<select name="difficulties" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
This is only the present state. I've tried other things with it.
Edit:
That includes the non-existence of any valign things in there. When I tried adding them, nothing happened.