Basic HTML table formatting for email - html

I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.

You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.

Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.

Related

Nesting Div To Make Button Around Tel: Link?

I tried to nest a div before closing my tag to make a button around a tap to call tel: link:
<a href=”tel:+18888888888">
<div>
<table>
<tbody>
<tr>
<td rowspan="2"><img id="phone" src="/phoneimg.png" alt="xx"></td>
<td rowspan="2">Tap To Call NOW! 888.888.8888</td>
</tr>
</tbody>
</table>
</div>
</a>
When I upload the html file to my host I get a 404 error when I tap the button.
When I remove the div, and the closing tag is right behind the a href=”tel:+18888888888" tag (i.e. it has correct syntax without a div container before the closing tag) it works but is simply an undecorated link.
Any way to do this?
Thank you.
As dfionov correctly stated, you cannot include block elements inside inline elements. Anchors (<a>) are however an exception to the rule in HTML5, as explained in another answer.
I would like to also mention that for your use-case, tables should be avoided. They are for displaying tabular data not aligning an image.
There are a number of ways to do this with CSS, I would probably suggest using inline-block because it works on all modern browsers and is easier to understand than many of the alternatives.
<a href="tel:+18888888888">
<img id="phone" src="/phoneimg.png" alt="xx">
<span>Tap To Call NOW! 888.888.8888</span>
</a>
Corrected code:
<div>
<table>
<tbody>
<tr>
<td rowspan="2"><img id="phone" src="/phoneimg.png" alt="xx"></td>
<td rowspan="2">Tap To Call NOW! 888.888.8888</td>
</tr>
</tbody>
</table>
</div>

Make HTML table row overlap with row above it

I have the following HTML table set up which yields the result in the screenshot.
Code:
<table>
<tr>
<td align="center" colspan="4">
<img src="website_title_banner.png" style='width:100%;' alt="nul"/>
</td>
</tr>
<tr style="width:100%;">
<td>
<img src="About sign.fw.png" style='width:100%;'/>
</td>
<td>
<img src="gallery sign.fw.png" style='width:100%' />
</td>
<td>
<img src="Products sign.fw.png" style='width:100%' />
</td>
<td>
<img src="Contacts sign.fw.png" style='width:100%'/>
</td>
</tr>
</table>
Scrrenshot
I'd like to have it so the signs are 'nailed' to the striped banner. Given that the signs are all placed in their own table cell in the row, is it possible to make the 2nd row overlap with the first row by a specified pixel distance?
I'm reasonably proficient with HTML (but it has been a long time) but I am unfamiliar with CSS - so if the solution is to use CSS, a step by step implementation would be greatly appreciated (using Dreamweaver).
Thanks in advance!
Try styling your second row with a negative margin-top. This should make the .png's overlap the row above them. Here's an example based off of your code - http://jsfiddle.net/NinoLopezWeb/myv37cb0/1/
This is not the best way to do it, but if you really want to you can use a negative value in
margin-top, for example margin-top: 10px;
Not the cleanest way but it works.
quickest way to do this is have a negative margin. You can also make the stripes as the background of the menu.

HTML/CSS table display problems

I'm messing around with the aesthetics of a site I'm building and have been left scratching my head on something that looks like it should be simple, or so I thought.
I am using a table to place the content of my the site into, and when I run it through my local host (Using XAMP) the scale of table <td> tags is how I want it, but when I host it through my godaddy account the <td>s in my main content <tr> are scaled differently (seems to be influenced by the header row).
Here's the link to my current page and you'll see the problem. (BTW the site is not finished so any spelling mistakes and stuff like that feel free to ignore :))
http://www.sittingducksfc.co.uk/
So how would I go about creating evenly sized <td>'s within that row? as you can see the furthest right <td> is squashed to the same scale as the loginbox at the top. I have been fiddling with it for a while but I'm probably missing some simple css but I haven't found any previous question with the same problem.
Regards
Mike
So the problem appears to by your stylesheet... You have the three <td> which all have the width of 33%
I am using Google Chrome 31.0.1650.63m and it shows up fine but other browsers may not, i would suggest to do the following change
<td colspan="1" style="background-color:white;text-align:center;width: 30%;height:30%;">
I would also suggest using a stylesheet as opposed to editing the style in-line
Hi all thanks for your responses.
From trail and error i have gone for a different approach and stacked multiple tables into my main div and that allows me to specify the particular widths of each td within that particular table.
From further investigation it can also be seen
here and i apologize for a repeat question.
Here is my example code.
<div>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="80%"></td>
<td width="20%"></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="33%"></td>
<td width="34%"></td>
<td width="33%"></td>
</tr>
</table>
</div>
This can be stacked many times without each table affecting the other.

Outlook 2010 table spacing weirdness

When coding a HTML email newsletter Outlook 2010 is acting up. (surprise surprise)
The following screenshot is the result: http://screencast.com/t/PSZqP7wg
This screenshot shows what's happening (same, but images turned off): http://screencast.com/t/DrbexyHnytJ
Obviously, the middle white column is to narrow. Should be 604px wide, but is a lot less. It seems Outlook is placing extra padding next to the spacer images.
Anyone has an idea why this is happening?
This is the source in the body tag:
<table width="761" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
</tr>
<tr>
<td width="77" style="width: 77px;">
<img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
</td>
<td width="604" bgcolor="ffffff">
test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
klqshdf kqshdklf hqskldfqklsd
</td>
<td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
</tr>
<tr>
<td height="151" colspan="3">
<img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
</td>
</tr>
</table>
You just need to add a background color to both tags. the widths are displaying correctly.
I'm used to issues with "undefined" blank spaces and line breaks in IE and Outlook. They are usually interpreted as a real, wanted space, formatted by style of the nearest parent (if any).
That's why i prefer writing htm like this:
<tr>
<td height="151" colspan="3"><img
src="http://www.bothino.be/newsletter/bottom.jpg"
width="761" height="151" alt="" /></td>
</tr>
Line breaks inside a tag will make no difference at display time ... but apply a similar structure to the code.
The important part is no blank between TD and IMAGE tag.
Maybe, this doesn't explain and solve that huge indentions in your screenshot.
my experience with Outlook is to never ever never ever use the rowspan and colspan attributes. This is guaranteed to cause trouble. Should a table cell require a different layout/width than the one above/below it, nest another right into it with the correct layout. this way the overall basic grid stays intact. Not nice, but then again: outlook plays dirty and so will you (have to). All tables need to have cellpaddign=0 and cellspacing=0. This helps me to get over similar issues.
sometimes it's better to leave out width for td's eg leave out width=77 and rest of width for all td's. that way it can expand automatically to fill the entire row. or you can also include a table withing that tr.

Stacked images in HTML email template have a space between them

I'm building a template for an HTML email I'll being sending via .NET. I don't do this often and I know I have to stick to tables and inline CSS. I just sliced up some images and I have two that need to stack. I understand there are issues with this in terms of whitespace in the HTML code. As a result, I've tried it all on one line, e.g.
<td valign="top" style="width: 314px;"><img src="/i/header_logo.jpg" width="314" height="92" alt="Logo" /><br /><img src="/i/woman.jpg" width="314" height="617" alt="Woman" /></td>
I'm previewing this in my browser and the two images are separated by some space. I also have a global line of CSS resets at the top like:
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}
</style>
Does anyone know how to stack two images in a <td> and have them flush against each other?
Update: It turns out I had a doctype at the top like a normal web page and that caused the issue. It had nothing to do with my HTML/CSS combo.
I figured out the problem. I didn't have a doctype defined and therefore the rendering mode was really messed up.
alternatively try align="left" on your images. Works in some email clients.
You could cheat, and embed another table within the column containing the pics.
<td>
<table>
<tr><td align="left"><img1 ...></td></tr>
<tr><td align="left"><img2 ...></td></tr>
</table>
</td>
Is that what you mean by stacked and flush?