Here is the code for the table:
<table align="center" width="303" height="740" border="1" cellpadding="10">
<tr>
<th width="130" height="41" scope="col">URL1 - Normal</th>
<th width="121" scope="col">URL2 - Hover</th>
</tr>
<tr>
<td height="94"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-green.png"/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-green-h.png" alt=""/></td>
</tr>
<tr>
<td height="124"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-blue.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-blue-h.png" alt=""/></td>
</tr>
<tr>
<td height="147"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-grey-h.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-grey.png" alt=""/></td>
</tr>
<tr>
<td height="137"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-pink.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-pink-h.png" alt=""/></td>
</tr>
<tr>
<td height="132"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-red.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-red-h.png" alt=""/></td>
</tr>
<tr>
<td height="132"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-black.png" alt=""/></td>
<td><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-black-h.png" alt=""/></td>
</tr>
</table>
When I insert the table, it leaves a gap in-between the table and the text. If I remove the table, then everything is fine. What's going wrong here?
Blogspot inserts line breaks for you... and they push the table down. (I haven't found a workaround yet.)
If you view the source, you can see them:
<table align="center" width="303" height="740" border="1" cellpadding="10"><br />
<tr><br />
<th width="130" height="41" scope="col">URL1 - Normal</th><br />
<th width="121" scope="col">URL2 - Hover</th><br />
</tr><br />
<tr><br />
<td height="94"><img src="http://i1018.photobucket.com/albums/af309/5416339/ad-green.png"/></td><br />
...
Because the BRs are invalid when directly inside a TABLE, TR, or after a TH or TD, the browser pushes those elements out of and above the table when rendering the DOM.
If you take a look at the source of the page, you'll notice a TON of <br/> tags interspersed with your table (but not contained in cell elements). They are rendered above the table.
It looks like your HTML is being parsed by something, and your line-breaks are being replaced with BR tags.
Quick solution: remove all linebreaks and just have the table code on one line :)
It has nothing to do with the table. It's the fact that there are 31 <br> (line break) tags before the table (which are what are creating the huge gap.
It sounds like BlogSpot (or whatever blog service you are using) is adding extra <br> tags based on how you're formatting the rest of your content. Edit the source of the page if possible and manually remove them...otherwise it becomes a support issue with whatever blog platform you're on.
This has nothing to do with anything in your table markup. Viewing the HTML source of that page shows about 30 <br> tags ahead of the table. They are obviously responsible for the extra space.
Why you get 30 <br> tags when inserting a table must have something to do with how blogspot.com is formatting your content. Your best bet is to try editing the HTML by hand to remove the <br> tags. If you can't do that, or if the <br> tags don't show up when editing the HTML, it's a question for customer service at Blogspot.
Related
EDIT: I have added a fiddle to better demonstrate what is happening since the person who has taken the time to offer an answer (thanks!) does not seem to get what I was asking, so hopefully this helps to clarify
http://jsfiddle.net/t5sPL/
I am sending an HTML email. It renders fine in gmail, outlook desktop client, and several other email clients. however, when viewing an inbox online in the outlook webmail app, http://portal.microsoftonline.com, Microsoft seems to be doing its best to not let me center the contents of a table. Tipped off by this article
https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin
I see that the margin attribute is no longer supported. I tried using padding instead and no luck. So, to center my table, I thought I could go oldschool and use this pattern to center it:
<table width='100%' style='width:100%'>
<tbody>
<tr>
<td align='center'>
<table width='700' style='width:700px'>
<tbody>
<tr>
<td>Content to be centered</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
however, this still does not work, because in my <td align='center'> tag, outlook is inexplicably attaching a style='text-align:center;' attribute, for a result of
<td align='center' style='text-align:center;'>
which effectively justifies the content to the left. When I use "inspect element" and delete the style attribute, everything looks as expected.
Has anyone dealt with this issue before? Any resolution, or explanation? Thanks!
Are you trying to center the content inside the 700 wide table? If so, add align="center" to the table cell it is in:
<table width='700' style='width:700px'>
<tbody>
<tr>
<td align="center">Content to be centered</td>
</tr>
</tbody>
</table>
If you are trying to left align the 700 table content, but have the 700 table itself centered, just add align="left" to the <td> instead.
UPDATE:
Based on your jsFiddle - This should fix it:
<table width='100%' style='width:100%' border=1>
<tbody>
<tr>
<td align='center' style='text-align:center'>
<table align='center' width='700' style='width:700px' border=1>
<tbody>
<tr>
<td align='left'><b style='color:red'>This content used to be aligned incorrectly...</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
So my current layout is:
<div style="width:900px;height:500px;border:6px double #00c7ff;"><table cellspacing="1" cellpadding="0" border="0"
bgcolor="white" id="shell" height="500" width="900">
<tr height="50">
<td colspan="2" bgcolor="#cab0cb">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td>
</tr>
<tr height="50">
<td bgcolor="#cab0cb">
<table id="navigation" title="Navigation" border="0">
<tr><td><center><b><font face="arial" color="0094bd"><font size="5">Records</font></b></center><br><br><font size="2.5">No records set yet.</font></font></td></tr>
</table>
</td><td bgcolor="#cab0cb">
<table title="Content" id="content" border="0">
<tr><td><font face="arial" color="#0094bd"><b><font size="5"><center>Welcome to Ivory Forest Kennel</center></font></b><br><br><font size="2.5">We are a fairly new kennel on K9, specialising in the great Siberian Husky. Initially, we will be breeding and selling Huskies, bred from simple gamebred dogs. Our huskies currently specialise in Obedience, but we will seek further training later. Soon, we will also be breeding Yorkshire Terriers, also gamebred, so look forward to those!</font></font></td></tr>
</table>
</td>
</tr>
</table>
</div>
And Im trying to make it sort of like these:
http://i18.photobucket.com/albums/b135/silverfox13425/Decorated%20images/Dexterity_zps04ada334.png
http://i18.photobucket.com/albums/b135/silverfox13425/Decorated%20images/Siberians_zpsbe70e931.png
Which I could be going about it all wrong, to be honest, but it's working thus far.. My issue at the moment is my "records" section is too thin. And I cant figure out for the life of me how to make it wider. I have tried editing everything that says "width", and making my own width=x sort of command, but nothing seems to be working. No clue what I'm doing wrong here.
Here is your JsBin code
Well, I was not supposed to give you some suggestions on your layout.
But I must say
Your layout is really complicated.
You should not use too much tables, tables are just used to render some tabular data.
Try to use only <div> tags.
Please use some jsbin or jsfiddle like online tools to show us your problems.
Nesting of tables really creates complexities in your html code thus reduces its readability.
If you feel problems in designing your web page layout then I'll recommend these links to you. Please take a look.
http://www.learnlayout.com
http://www.tizag.com/htmlT/htmldiv.php
http://www.youtube.com/watch?v=68kiDajh1lg
http://gostats.com/resources/css-div-tutorial.html
Your code
<div style="width:90%; margin:auto;height:500px;border:6px double #00c7ff; vertical-align:top;"><table cellspacing="10" cellpadding="10" border="0"
bgcolor="#cab0cb" id="shell" height="500" >
<tr height="50">
<td colspan="2" bgcolor="#cab0cb">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td>
</tr>
<tr height="50">
<td bgcolor="#cab0cb" style="width:20%;">
<table id="navigation" title="Navigation" border="0">
<tr><td><center><b><font face="arial" color="0094bd"><font size="5">Records</font></b></center><br><br><font size="2.5">No records set yet.</font></font></td></tr>
</table>
</td><td bgcolor="#cab0cb">
<table title="Content" id="content" border="0">
<tr><td><font face="arial" color="#0094bd"><b><font size="5"><center>Welcome to Ivory Forest Kennel</center></font></b><br><br><font size="2.5">We are a fairly new kennel on K9, specialising in the great Siberian Husky. Initially, we will be breeding and selling Huskies, bred from simple gamebred dogs. Our huskies currently specialise in Obedience, but we will seek further training later. Soon, we will also be breeding Yorkshire Terriers, also gamebred, so look forward to those!</font></font></td></tr>
</table>
</td>
</tr>
</table>
</div>
Try this and change your Record field size needed.
<td width="20%">
DEMO
I've just started using a new HTML email software (was using Campaign Monitor but now having to use a plugin within our CMS).
Our template uses some empty cells at the top with different background colors for aesthetic purposes.
When using Campaign Monitor these showed fine in Gmail but in the new software (eCampaign) Gmail is totally ignoring the height of the cells, making them all 1 pixel high.
I tried adding height="x" and style="height: x;" but neither seem to work.
I want to avoid using spacer gifs if I can.
Further down the email I've put in a tag but this makes the height too large then.
I've seen some suggestions of wrapping the in a tag but not sure if that will work.
Any suggestions?? Need an answer asap!
My code is as follows:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#edede9" style="font-size:1px; line-height:6; height:6;"></td>
</tr>
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#c4c3b6"><!-- --></td>
</tr>
<tr>
<td valign="top" height="1" colspan="2" bgcolor="#ffffff"><!-- --></td>
</tr>
</table>
The only way is to use a trans_dot.gif or other spacer image within the empty cells. It cant be done in any otherway.
So find or make a 1px * 1px transparent image and insert.
If a cell is without text or images it will collapse in 9 out of 10 email clients
I was wondering if I use colspan attribute in a HTML table that I intend to have as an email, will email clients (Outlook etc...) understand what colspan does, as I have read that this might cause an issue with the layout?
Colspan and rowspan are both fully supported in all major email clients. They are more difficult, but if you get it right they are a great option in combination with nested tables.
The reason they have a bad reputation, besides the difficulty is because there is a particular quirk in Outlook you need to take into consideration, otherwise your layout can break.
Colspan:
Outlook has an issue where if you put a colspan in the first row of a table, it will mess up the widths of the subsequent rows. The work around for this is that you need to specify your cell widths in the top row, even if it is an empty row.
Here is an example:
<!-- the second row in this example will not respect the specified widths in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
</td>
<td width="400">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
Rowspan:
Even more avoided than colspan is rowspan. I've found it can actually display more consistently than nesting tables depending on your target audience. This is because rows (particularly a spanned one) do not separate as much as tables when forwarding the email from Outlook due to the <p class="msoNormal"> tags Outlook wraps around them. These gaps are particularly unavoidable if someone forwards your email to Gmail.
One thing to note is that rowspan doesn't seem to work with Blackberry (which I wouldn't consider a major client). So like with anything in html email, you need to play the percentages game and decide where you least want it to break.
A basic example of colspan and rowspan working together:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr><!-- hidden row to establish widths in Outlook -->
<td width="200">
</td>
<td width="200">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#333333">...
</td>
<td width="200" height="400" rowspan="2" bgcolor="#444444">...
</td>
</tr>
<tr>
<td width="200" height="400" rowspan="2" bgcolor="#555555">...
</td>
<td width="200" height="200" bgcolor="#666666">...
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#777777">...
</td>
</tr>
</table>
To accomplish something similar to this without rowspan/colspan, you would have to split the rectangular table cells into small squares. Imagine if the top right cell was an image overlapping the header see this question for a real world example. If you were to avoid rowspans and split the logo image horizontally within two stacked cells, this would become problematic when Outlook does it's msoNormal thing. Nobody likes a seam in their image.
In html email, you can always split images vertically without any risk of seams/gaps, but as a rule, you should always avoid splitting an image horizontally. Rowspan helps to avoid this in scenarios when you want overlapping images.
One last note - Outlook also has the same spanning issue with rowspan as it does with colspan. You need to establish your row heights in the first column for it to respect the heights of the subsequent spanned rows. Here is an example of that. Note the first cell in each row is empty.
Just thought id add a bit of input to your question
Colspan can be used but i would suggest against it. Whenever i create emails (6 months experience) i have always used nested tables. Also you can only use inline css in emails so i would be very careful using even margin and padding.
Couple of things i do on every email.
Always use this code in every image on your page. It will correct a gmail space below the image bug.
style="display:block"
Also use border="0" on any image links to stop a blue border appearing.
I hope this helps!
Another tip in addition to the style="display:block' is to add line-height:0 on the with an image in - this sorts out the odd whitespace bug in Outlook 2007.
I use colspans all the time but also nest tables where possible - avoid rowspans - they are are nightmare, and when you do nest tables don't go too mad and nest 4 / 5 or 6, I find that starts to muck things up.
Yep. All HTML markup is allowed in most if not all email clients. When it comes to scripting, then you've got an issue to contend with, for scripting is simply not allowed by most if not all email clients.
Rowspans and Colspans are okay but I would strongly suggest you use nested tables. You will have extra lines of code, however, this will save you from any breaks on other email clients.
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.