TD rowspan not working - html

I have the table:
<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"
style="display:block">
<tr>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70"
height="49" alt=""></td>
<td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410"
height="21" alt="">
<td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410"
height="29" alt=""></td>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195"
height="50" alt=""></td>
</td>
</tr>
</table>
It is supposed to be 3 columns table where second and third td are in one column. However, now it is in 2 columns.

Check your CSS
This prevents you to span:
td { display: inline-block; }
Another case according to Simon_Weaver as per later comment:
{ display: flex}

You used rowspan="2" on the first and last . Rowspan means that this cell spans two rows. If you want the cell to span over two columns in the same row, you have to use the colspan property. Check out the two snippets to see the difference:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">a</td>
<td>b</td>
<td>c</td>
</tr>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
</tr>
</table>

You forgot to close the second <td /> tag.

You might create new table in the TD with 2 rows.
<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"
style="display:block">
<tr>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70"
height="49" alt=""></td>
<td>
<table width="410">
<tr>
<td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410"
height="21" alt=""></td>
</tr>
<tr>
<td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410"
height="29" alt=""></td>
</tr>
</table>
</td>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195"
height="50" alt=""></td>
</td>
</tr>
</table>

As mpcabd says in their answer, you're missing the </td> tag at the end of the second <td>
However, another issue is that you don't have a 2nd row for the rowspan="2" to go into.
My guess is you're after this...
<table>
<tr>
<td rowspan="2"><img ... /></td>
<td><img .. /></td>
<td rowspan="2"><img .. /></td>
</tr>
<tr>
<!-- Note, you don't need anything here, as the rowspan will take it's place -->
<td><img .. /></td>
<!-- Note, you don't need anything here, as the rowspan will take it's place -->
</tr>
</table>

Try this:
<table>
<tr>
<td rowspan="2">a</td>
<td>b</td>
<td rowspan="2">d</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
Fiddle:
http://jsfiddle.net/oc9vabvx/

The second image must be on the next line. By the rowspan=2 of the first column it will be added to the second column:
<table id="Table_05" width="675" border="0" cellpadding="0" cellspacing="0"
style="display:block">
<tr>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_14.jpg" width="70"
height="49" alt=""></td>
<td valign="top"><img src="images/12235_PLUS_mail_August_v4_12.jpg" width="410"
height="21" alt=""></td>
<td rowspan="2"><img src="images/12235_PLUS_mail_August_v4_13.jpg" width="195"
height="50" alt=""></td>
</tr>
<tr>
<td valign="bottom"><img src="images/12235_PLUS_mail_August_v4_15.jpg" width="410"
height="29" alt=""></td>
</tr>
</table>

Related

Aligning td in nested table

Hi working to create a newsletter template. At the moment I am stuck as i am unable to change the alignment of the td
I have attached a CodePen, but below is the code! Firstly I don't understand why the elements on the right are aligned left-center? Eitherway I need them to be top-center. Any ideas?
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td>
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
Mind you this is for a newsletter template so think web 1998, most of the fancy web stuff is not usefull here!
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top; text-align:center">
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
You have put align="center" in the td tag.
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td align="center" >
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top;">
<table width="393px" align="center">
<tr>
<td align="center" >
name
</td>
</tr>
<tr>
<td align="center" >
country
</td>
</tr>
<tr>
<td align="center" >text</td>
</tr>
</table>
</td>
</tr>
</table>

Image stretches unexpectedly in td

I'm just a beginner but I have been working with this problem for hours now.
Applying the image in the td will strech the whole table into a weird size and ruin everything. The table is 500 x 500 and 5 columns and rows, 2 columns are needed for that gif. The gif's size is 200 x 200. But why does it stretch that way ?
Before applying gif:
The code before gif is here:
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="#264663">
<table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="4" colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
And after:
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="#264663">
<table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="4" colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" rowspan="2"><img style="display:block;" width="100%" src="/pics/meanwhileatnintendo.gif" /></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
EDIT: I tried removing height="100%" but then this happens:
The 100% height is causing the problem.
<td colspan="2" rowspan="2"><img style="display:block;" width="100%" src="/pics/meanwhileatnintendo.gif" /></td>
As long as your image is square this should work.
Apparently, after hours of trial and error,this works:
Image
`
<head>
</head>
<body bgcolor="#264663">
<table style="table-layout:fixed;width:500px;height:500px;border-collapse:collapse;" bgcolor="#fddab4" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" background="/pics/5to1.jpg" height="100" width="100"></td>
</tr>
<tr>
<td rowspan="4" colspan="2" height="400" width="200"></td>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
</tr>
<tr>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
</tr>
<tr>
<td height="100" width="100"></td>
<td height="200" colspan="2" rowspan="2" width="200" style="background-image:url(/pics/meanwhileatnintendo.gif)">
</td>
</tr>
<tr>
<td height="100" width="100"></td>
</table>
</body>
`
But, I want to know that is there a more effective and shorter way to make the cells keep their sizes even when content is being added!
That was my problem: The cells kept changing size even from adding a single letter in them. Now that I have stated the size of each cell individually, the cells won't resize anymore and that's great! But still, alot of typing needed for such a simple problem. Any other way?

HTML table fit cell height to contents valign top

I am trying to create a table where the left column is pushed top to fit its contents. Note that the right column requires to be height=300.
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 3rd cell
</td>
</tr>
</table>
This is what I have come out so far: https://jsfiddle.net/5y33rtm3/1/
Desired outcome:
You can add rowspan="5" for the third row in the left:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" rowspan="5"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>
or you can add height: 100% to it:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" style="height: 100%"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" style="height:100%" width="65%">
<img src="ant.jpg" style="height:40%;width:40%;" />
</td>
</tr>
</table>

HTML code of table with various row and column size

It seems easy but can't write the HTML code of the above table.
Here is what I tried so far:
<table border="1" style="border-collapse:collapse;" width="25%">
<tr>
<td>col1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Sure you want html??
<table align="center" width="590" height="590" >
<tr>
<td align="center" height="80" colspan="4">central text</td>
</tr>
<tr>
<td align="center" height="80" colspan="2">col</td>
<td align="center" colspan="2">col</td>
</tr>
<tr>
<td align="center" height="40">t</td>
<td align="center" height="40">t</td>
<td align="center" height="80" rowspan="2">t</td>
<td align="center" rowspan="2">t</td>
</tr>
<tr>
<td align="center" height="40">t</td>
<td align="center" height="40">t</td>
</tr>
<tr>
<td align="center" height="30">t</td>
<td align="center" >t</td>
<td align="center" >t</td>
<td align="center" >t</td>
</tr>
</table>
Like this?
colspan and rowspan was missing from your code.
<table border="1" style="border-collapse: collapse;">
<tr>
<td colspan=4 align="center">central text</td>
</tr>
<tr>
<td colspan=2 align="center">col(1)</td>
<td colspan=2 align="center">col(2)</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td rowspan=2 align="center">text</td>
<td rowspan=2 align="center">text</td>
</tr>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
</tr>
<tr>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr>
</table>

Gaps in email template in Yahoo Mail

I am having a bit of trouble with a gap that appears only in IE (any version) and Yahoo Mail. I trying to create an email template with tables (with one nested table). As you can see in the image, there is a gap at the top and bottom of a TD that houses the header. If I try and view the HTML locally, I don't see the problem in IE so it's when it's inn Yahoo Mail that the issue is present. Other mail clients is fine.
Any help would be great.
Thanks
Screenshot of issue:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Email Template</title>
<style type="text/css">
body {
padding:0;
margin:0;
}
table {
margin:15px auto 50px auto;
}
td hr {
padding:0;
margin:10px;
background-color:rgb(0,13,221);
height:1px;
border:0;
}
td {
font-size:12px;
}
td p {
padding-top:7px;
}
td p a {
color:rgb(0,134,195);
}
td strong {
font-size:13px;
font-weight:900;
color:rgb(0,0,0);
}
.address {
margin-top:50px !important; !important;
font-size:11px;
color:rgb(79,83,87);
}
</style>
</head>
<body>
<table width="690" cellpadding="0" cellspacing="0" border="0" align="center" style="font-family:Arial, sans-serif">
<tr>
<td rowspan="5" width="20" valign="top">
<img src="#" width="25" height="538" style="background-color:blue;display:block" />
</td>
<td width="650">
<table width="650" border="0" cellpadding="0" cellspacing="0" style="margin:0">
<tbody>
<tr>
<td width="650" height="19" colspan="3" style="background-color:rgb(10,14,43)"></td>
</tr>
<tr style="background-color:rgb(10,13,44)">
<td height="1" width="3%"></td>
<td rowspan="49" width="7%">
<img src="#" width="192" height="72" style="background-color:blue;display:block" />
</td>
<td width="90%"></td>
</tr>
<tr style="background-color:rgb(12,15,46)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,16,47)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,15,46)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,16,47)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,47)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,49)">
<td height="5"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,18,50)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,49)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,18,50)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,18,50)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,19,52)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,20,53)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,21,54)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,20,53)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,21,54)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,22,55)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,23,55)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,22,54)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,23,58)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,21,57)">
<td height="4"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,22,57)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,23,58)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,24,59)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,24,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,24,59)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,26,61)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,25,63)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,26,64)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,26,63)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,64)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(15,27,67)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,28,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,29,69)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,30,70)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,29,70)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,30,72)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,29,72)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,30,73)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,32,75)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,31,74)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(9,32,74)">
<td height="1"></td>
<td></td>
</tr>
<tr>
<td width="650" height="2" colspan="3" style="background-color:rgb(10,31,74)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(11,32,77)"></td>
</tr>
<tr>
<td width="650" height="2" colspan="3" style="background-color:rgb(11,34,78)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(13,34,79)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(12,35,79)"></td>
</tr>
</tbody>
</table>
</td>
<td rowspan="5" width="20" valign="top"><img src="#" width="25" height="538" style="background-color:blue;display:block" /></td>
</tr>
<tr>
<td width="650" valign="top">
<img src="#" width="650" height="10" style="background-color:blue;display:block" />
</td>
</tr>
<tr>
<td style="padding:0 10px 0 10px">
<p><strong>Headline</strong></p>
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3 Link</p>
<p>Text Line 4</p>
<p></p>
<hr />
<p>Text Line 5</p>
<p style="margin-top:80px;font-size:11px;color:rgb(65,65,65);" class="address">Text Line 6</p>
</td>
</tr>
<tr>
<td align="center"><img src="#" width="626" height="68" style="background-color:blue;display:block" /></td>
</tr>
<tr>
<td align="right"><p>Text Line 7Link</p></td>
</tr>
</table>
</body>
I didn't test the email in any email clients BUT, i did find the problem occurring in firefox. Using firebug i corrected the problem by adding vertical-align:top on line 20 (the td style)
Just be aware that you may need to use inline styles as some email clients strip out stylesheets whether in the head or body of the document.
Here is a working version: http://jsfiddle.net/ypzA2/