Image stretches unexpectedly in td - html

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?

Related

How do I create this table using HTML table tags?

How do I create this table using HTML table tags?

Something similar to this could be used:
<table border=1 width="100%" height="20%">
<tr><td colspan="2" width="50%"></td><td width="25%"</td><td width="25%" rowspan="3"></td></tr>
<tr><td width="25%" ></td><td colspan="2"></td></tr>
<tr><td colspan="3"></td></tr>
</table>

This is a sketch: when possible I would remove all of those constraints to widths and height.
table{border-collapse:collapse;width:100%}
table,td{border:1px solid #000}
td{height:5em;width:25%}
<table>
<tr>
<td colspan="2"></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>

How to create a correct table?

I have a problem with making a table in HTML.
The table should look like in this image:
And the second image is how I made:
This is my code:
<table width="730" border="1px" cellspacing="0" cellpadding="3">
<tr align="center">
<td rowspan="3">A</td>
<td rowspan="2">B</td>
<td rowspan="3">D</td>
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
<tr align="center">
<td rowspan="2" colspan="3">H</td>
</tr>
<tr align="center">
<td>C</td>
</tr>
</table>
How to create a table like in the first image?

.grey{ background: rgba(128,128,128,0.7); }
<table width="730" border="1px" cellspacing="0" cellpadding="3">
<tr align="center">
<td rowspan="3">A</td>
<td rowspan="2" height="60px">B</td>
<td rowspan="3">D</td>
<td class="grey">E</td>
<td class="grey">F</td>
<td class="grey">G</td>
</tr>
<tr align="center">
<td rowspan="2" colspan="3">H</td>
</tr>
<tr align="center">
<td>C</td>
</tr>
</table>

In this particular case the only things you can do are
1.) Add more content to the cells. If the amount of contents corresponds to the cell heights, they will adjust automatically.
or
2.) If you intend to have as little contents as in your example code, add a height setting to one of the cells that are supposed to span two rows - see snippet below.
<table width="730" border="1px" cellspacing="0" cellpadding="3">
<tr align="center">
<td rowspan="3">A</td>
<td rowspan="2" style="height:3em;">B</td>
<td rowspan="3">D</td>
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
<tr align="center">
<td rowspan="2" colspan="3">H</td>
</tr>
<tr align="center">
<td>C</td>
</tr>
</table>

TD rowspan not working

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>

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/

Draw some rectangles by table tag

I'm trying to create this shape with tables:
My html code is this:
<html>
<head>
<title>Exercise!</title>
</head>
<body>
<table border="1" width="100%" height="100%">
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1" rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1"></td>
</tr>
</table>
</body>
</html>
This html code gets me this wrong shape:
But when I add a row without colspan and rowspans, the browser shows this correct shape but with an extra row:
Here is the code that creates the correct shape but with an extra row:
<html>
<head>
<title>Exercise!</title>
</head>
<body>
<table border="1" width="100%" height="100%">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1" rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1"></td>
</tr>
</table>
</body>
</html>
What is the problem?
EDIT : IE shows a big blank rectangle!!!! Also what is this problem?

problem is likely the borders. When you add the row with all the fields specified, it draws a border between each field for all fields, but without that row, some of the borders are not drawn, so some rows have less pixels than others

Works wonderfully for me in WebKit. Get rid of the borders on each tr for sure. What browser are you using? (Also, I added a rowspan.)
fiddle: http://jsfiddle.net/whqVC/