I have a website, http://pigymunk.co.uk, and as you can see, the table has some fault where there's a a large gap between 2 cells. Can anyone help find that fault?
<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
<td><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style="align:"middle"/></td>
</tr>
<tr>
<td><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/> </td>
<td><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></td>
You can change the colspan attribute of your first cell to span the other columns. Note the cell that has <td colspan="4">. Try this:
<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
<td colspan="4"><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style=" align:"middle"/></td>
</tr>
<tr>
<td><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/></td>
<td><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></td>
<td><img src="http://www.pigymunk.co.uk/Faceb%20icon.png" alt="Facebook" align:"middle"/></td>
<td><img src="http://www.pigymunk.co.uk/distractions.png" alt="Demos" align:"middle"/></td>
</tr>
</table>
jsFiddle example.
And just as a side note, you may want to look into updating your code and getting rid of deprecated attributes like align="center" and inline CSS among other things.
Quick fix: change the first <td> to <td colspan="4">.
Your table has one cell in the first row, four cells in the second row. This violates the HTML table model principles, so all bets are off. What happens in practice is what you see here: the first cell (the large image) is treated as belonging to the first column only.
This can be seen e.g. in Firefox Web Developer Extension, which has a function for drawing borders around all cells.
Related
So I am building the final page of an online exhibit I am working on. The final page uses the exact same format as an earlier page in the exhibit (with an image to the left and a paragraph to the right of the image) so I just copy/pasted all the code and changed URLs, text, and dimensions of images and td elements as I needed to. I have changed nothing to do with the alignment of the various elements on the page, but now I have an element that is basically ignoring td valign="top" and appears to be aligned to center instead. I've done a line by line comparison of the html of the new page with the original but I can't find anything that should have changed it. Basically the text part of the page (title of page and body of page) should start on the same line as the top of the image, but instead it's starting in the center after a huge amount of white space.
Here's the particular table in question with the text and full URLs removed to make it a bit shorter:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="*image*" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
There is a " in front of valign, so it's not reading the attribute.
<td width="500" "valign="top"><div align="center">
The full code should be:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="http://placehold.it/400x267" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
Here's a working codepen: http://codepen.io/vic3685/full/vyKmwg/
I am trying to code this formula (standard deviation):
____________
δ =√∑(xi - µ)2
n
My html code is:
<table border="0" cellspacing="0" cellpadding="0" width="180">
<tr>
<th width="180" colspan="3"><p align="center"><strong>Population Standard Deviation</strong></p></th>
</tr>
<tr>
<td width="40" valign="top"><p align="center"> </p></td>
<td width="50" rowspan="4"><p align="right">√</p></td>
<td width="90" valign="bottom"><p align="left">__________</p></td>
</tr>
<tr>
<td width="60" rowspan="2"><p align="centre"><strong> δ =</strong></p></td>
<td width="90"><p align="center"><strong>∑(x<sub>i</sub> -µ)<sup>2</sup></strong></p></td>
</tr>
<tr>
<td width="90"><p align="center">n</p></td>
</tr>
The challenge I have is to get the formula to be well positioned. I was thinking the row height would help but from further reading the row and column span would nullify it. So how can I best present this formula?
I also have a challenge in adding the division line right below the summation (row3). I tried using CSS but it would mean having the subscripts and superscripts underlined. Is there a better code for this as well? Thanks.
For this code, when I add the text in the third table row it ruins the layout of all adjacent cells. Please help.
<table width="720" bgcolor="white" height="650" align="center" cellpadding="10" border="1">
<tr valign="top">
<td colspan="8" height="70" align="center"><img src="yooo.gif" align="middle" /> </td> </tr>
<tr height="40">
<td colspan="2" align="center" width="175">Home</td>
<td colspan="2" align="center" width="175">Food</td>
<td colspan="2" align="center" width="175">Hobbies</td>
<td colspan="2" align="center" width="175">Martin's Blog</td> </tr>
<tr height="260">
<td class="info" colspan="4" valign="top"><h2>Welcome to Nenad's Blog!!!</h2><h6>Here on this blog we will be talking about
a bunch of random stuff that are so completely unrelated that will blow your mind.<h6></td>
<td class="info" colspan="4"> h </td> </tr>
<tr height="260">
<td class="info" colspan="4"> h </td>
<td class="info" colspan="4"> h </td> </tr>
Your table looks good from what I can make of what you posted.
You should, however, not be using tables for layout purposes. They are supposed to be used only for tabular data, you know..like a spreadsheet.
For styling your site, you should be using CSS.
http://jsfiddle.net/3rJv7/
Code Runs
You might have to define what "ruin" means. However my best guess is that all the colspans cause some browsers to calculate the optimum column widths poorly. I found that many browsers handle it better if your first row defines the widths, even if it's a dummy row with spacer images. I know, terrible semantically, but using tables for layouts tend to go that way.
I know this has been covered before but the solutions didn't help me - i'm not a programmer but i can handle basic HTML code. I am trying to send a HTML email out that has 11 images placed in a table to become one big image - however white lines appear between rows when i send it.
I have the table style set with border="0" cellpadding="0" cellspacing="0" but this doesn't help - can anyone please give me advice? Also as i am not a programmer I may not understand any complex answers!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>
<!-- Save for Web Slices (toast offer mailer 2.jpg) -->
<table style="height: 920px;" id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_01.jpg" width="236" height="201" border="0" style="border: 0;"></td>
<td colspan="3"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_02.jpg" width="177" height="201" border="0" style="border: 0;"></td>
<td colspan="2"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_03.jpg" width="237" height="201" border="0" style="border: 0;"></td>
</tr>
<tr>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_04.jpg" width="152" height="155"></td>
<td colspan="3"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_05.jpg" width="173" height="155" border="0" style="border: 0;"></td>
<td colspan="2"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_06.jpg" width="180" height="155" border="0" style="border: 0;"></td>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_07.jpg" width="145" height="155"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_08.jpg" width="650" height="237"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_09.jpg" width="650" height="231"></td>
</tr>
<tr>
<td colspan="3"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_10.jpg" width="314" height="95" border="0" style="border: 0;"></td>
<td colspan="4"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_11.jpg" width="336" height="95" border="0" style="border: 0;"></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="152" height="1"></td>
<td><img src="images/spacer.gif" width="84" height="1"></td>
<td><img src="images/spacer.gif" width="78" height="1"></td>
<td><img src="images/spacer.gif" width="11" height="1"></td>
<td><img src="images/spacer.gif" width="88" height="1"></td>
<td><img src="images/spacer.gif" width="92" height="1"></td>
<td><img src="images/spacer.gif" width="145" height="1"></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
On images, try using
style="display:block"
It should work.
From quick check I just did, looks like the problem is due to blank space inside the cells markup taking up some place and making the cells bigger.
One way around this is setting the font size of the cells to 0 thus eliminating that extra space.
Live test case with the fix applied.
In your case, try adding this to the HTML you send:
<style type="text/css">
table td { font-size: 0px; }
</style>
This is assuming you have only one table and all cells have only images, if you have more tables then give that specific table id e.g. <table id="MyImagesTable"> then change to:
#MyImagesTable td { font-size: 0px; }
If the email client of those getting the email does not support style sheets you will have to manually set it for each cell:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
</tr>
<!-- ...more rows... -->
</table>
I also face same problem.
But i tried
<img src ="images/xyz.jpg" style="display:block">
and solved
This problem is common on many mail clients, just use:
<img style="display:block" />
on every image in your HTML.
Without actually having seen your code, I would guess that you're seeing spaces between your images because you have actual space between your images.
If you have something like this...
<img src="image1.jpg">
<img src="image2.jpg">
Change it to... (note there is no space between the two image tags)
<img src="image1.jpg"><img src="image2.jpg">
If you are placing the images within individual cells (i.e. one image per cell) then try putting the CSS of border-collapse:collapse...
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
UPDATE
As #Shadow has pointed out, neither parts of the above will make any difference.
It appears that FireFox and Chrome deal with the image as it would text (for some reason), therefore his suggestion of table td { font-size:0px; } is IMHO the correct answer. (IE doesn't seem to be effected by the issue.)
A lot of this is flat out ignored by certain mail clients. This is always the risk you take in heavy graphic html emails. You are almost guaranteed to have recipients that see it incorrectly. I always encourage my clients to not ask for these kind of email designs that are 6-12 images grouped up in a table. However, there will always be the ones that insist it be done and even after I show them the results in multiple mail clients they still request it be done.
Avoid it if you can. Unfortunately, there is really no guaranteed fix.
If you are sending the email to a group of recipients that are all in the same mail client you can probably solve it with one of the codes above to find the one your mail client responds to best.
a lot of times it could be user error. when you slice in photoshop, make sure ALL SLICES ARE TOUCHING. if there is a 1px gap, then that will screw everything up!!!
also, here's a trick i learned....
Set all images to have a border="0" tag after the alt=""...
if there are any
** ** tags, and i mean only
, not
so for example....
try that, and make sure all images have border="0" and all tags have a set width, all slices are touching, and you should have 0 gaps.
<table width="100%" border="0">
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="120">Banner Image</td>
</tr>
<tr>
<td width="400" colspan="80"></td>
<td width="10" colspan="2" bgcolor="yellow"></td>
<td width="190" colspan="38"></td>
</tr>
</table>
</table>
The alignment is messed up for the 2nd row. How can it be resolved?
Looks like there are a lot of issues here.
First off, this isn't valid html. The second table tag can't go where you have it. You need to do something like:
<table width="100%" border="0">
<tr><td>
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</table>
</td></tr>
</table>
Which will probably solve your immediate problem. However, why on earth do you have 120 columns? That seems wrong by any standard.
Note I removed the colspan because it's use here seemed very inappropriate.
Also, you might ask yourself why you have the outer table tag anyway. It's not exactly doing anything for you that can't be done in a better manner.
Colspan is used to indicate how many COLumns a single column SPANs, not to indicate a pixel width, as it would appear that you are trying to do here.
Instead, use colspan to indicate how many columns a single column should span, and indicate the width of columns either using css styles or the "width" atttribute.
See this example:
http://jsfiddle.net/xixionia/yt3gf/
The second table should be better if you placed it inside a td on the first table. Then on the second table there's a lot of colspan.
<div>
<table>
<tbody>
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</tbody>
</table>
</div>
I do prefer to use div in place of table. But you still have a choice. As you can refer to the other post.
You would try:
<table width="100%" >
<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="120">Banner Image</td>
</tr>
<tr>
<td style="width:400px;" colspan="80">a</td>
<td style="width:10px;" colspan="2" bgcolor="yellow">b</td>
<td style="width:190px;" colspan="38">c</td> </tr>
</table>
</table>
I add "border=1" and text in the cells in order to see the changes.
You got a table inside a table directly and thats not "valid".
Considering:
I want the banner to stretch across the table. The second row should be in proportion of width 400, 10 for the separator and 190
You should have:
<table style="width:100%; background-color: #fff;">
<tr>
<td colspan="3">Banner Image</td>
</tr>
<tr>
<td style="width: 66.6%"></td>
<td style="width: 1.6%; background-color: yellow;"></td>
<td style="width: 31.6%"></td>
</tr>
</table>
You are clearly trying to use tables to make layout wireframes. You should research more about CSS and html5.
This answer will probably fix your code but not the logic you are trying to apply.