Prevent Images From Overlapping Border From a Table? - html

I am currently testing out how to create a newsletter. I have made a template. I am also very new to designing. I have made a table of album releases however, it is not fitting within the border I created. How can I fix this?
I have added the code here.
Also, I want to note that I am adding the CSS into the html so a specific newsletter website can accept the newsletter. Although I was taught the other way where I create both a separate html and css file, this is how it has to be for now.
<!DOCTYPE html>
<html>
<head>
<title>NewsLetter Template</title>
<style type="text/css" >
body {
border: 5px solid #ffff;
max-width: 700px;
padding: 20px;
width: 80%;
margin: 20px auto;
}
.img1 {
width: 100%;
height:auto;
position: relative
}
.img2 {
width: 50px;
height: 50px;
position: relative
}
h2 {
background-color: red;
text-align:"center";
font-family: Helvetica;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
color: white;
}
.performance {
width: 250px;
}
p {
font-family: Helvetica;
font-size: 20px;
color: black;
}
.performancetype {
font-size: 20px;
font-family: Helvetica;
}
h3 {
font-family: Helvetica;
font-weight: 500;
}
table {
display:inline-block;
width:"100%";
}
</style>
</head>
<body>
<!-- Header -->
<div style="min-height: 100vh; position: relative; border: 5px red solid; text-align: center;">
<a href="http://www.google.com">
<img class="img1" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="Sample"/></a>
<div>
<!-- Icons -->
<tr>
<td align="center">
<a href="http://www.google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Facebook" border="0"/>
</a>
<a href="http://google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Twitter"border="0"/>
</a>
<a href="http://google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="YouTube" border="0"/>
</a>
</td>
</tr>
</div>
<br></br>
<div>
<h2>Check Out New Releases In The Following Categories</h2>
</div>
<!-- NEW RELEASE CATEGORIES -->
<!-- BEGIN UPCOMING INSTORE//-->
<h2>Upcoming Instore Events</h2>
<!-- BEGIN IN STORE -->
<!-- PERFORMER IMAGE -->
<div>
<h2> Breakout Specials & Releases </h2>
</div>
<table>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/LOVELYLP"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg"
alt="LOVELYTHEBAND - FINDING IT PREORDER LP" title="LOVELYTHEBAND - FINDING IT PREORDER LP" class="img-responsive" /></a></div>
<div class="caption">
<h4>LOVELYTHEBAND</h4>
<h4>FINDING IT PREORDER LP</h4>
<p>[ LP ] PREORDER FOR EVENT WRISTBAND</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/LOVELYCD"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg"
alt="LOVELYTHEBAND - FINDING IT PREORDER CD" title="LOVELYTHEBAND - FINDING IT PREORDER CD" class="img-responsive" /></a></div>
<div class="caption">
<h4>LOVELYTHEBAND</h4>
<h4>FINDING IT PREORDER CD</h4>
<p>[ CD ] PREORDER FOR EVENT WRISTBAND</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/602567572039"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/beatles-250x250.jpg"
alt="BEATLES - YELLOW SUBMARINE (PIC DISC)" title="BEATLES - YELLOW SUBMARINE (PIC DISC)" class="img-responsive" /></a></div>
<div class="caption">
<h4>BEATLES</h4>
<h4>YELLOW SUBMARINE (PIC DISC)</h4>
<p>[ New 7 inch Vinyl ] Limited edition 7-inch vinyl picture disc now available!</p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/896308002842"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0619/clutch-250x250.JPG"
alt="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" title="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" class="img-responsive" /></a></div>
<div class="caption">
<h4>CLUTCH</h4>
<h4>HOW TO SHAKE HANDS (PIC DISC)</h4>
<p>[ New 7 inch Vinyl ] Picture disc now available!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/840588116126"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/devil-250x250.jpg"
alt="DEVILDRIVER - OUTLAWS TIL THE END V.1" title="DEVILDRIVER - OUTLAWS TIL THE END V.1" class="img-responsive" /></a></div>
<div class="caption">
<h4>DEVILDRIVER</h4>
<h4>OUTLAWS TIL THE END V.1</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190758510026"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/townsend-250x250.jpg"
alt="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" title="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" class="img-responsive" /></a></div>
<div class="caption">
<h4>DEVIN TOWNSEND</h4>
<h4>OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV</h4>
<p>[ CD ] </p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/724596973523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/goldfrapp-250x250.jpg"
alt="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" title="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>GOLDFRAPP</h4>
<h4>SILVER EYE (2CD/DELUXE)</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/727361445225"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg"
alt="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" title="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" class="img-responsive" /></a></div>
<div class="caption">
<h4>IMMORTAL</h4>
<h4>NORTHERN CHAOS GODS (WHITE/BLACK)</h4>
<p>[ LP ] Indie exclusive black and white colored vinyl LP pressing!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/727361322021"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg"
alt="IMMORTAL - NORTHERN CHAOS GODS" title="IMMORTAL - NORTHERN CHAOS GODS" class="img-responsive" /></a></div>
<div class="caption">
<h4>IMMORTAL</h4>
<h4>NORTHERN CHAOS GODS</h4>
<p>[ CD ] </p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190296955600"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/marr-250x250.jpg"
alt="JOHNNY MARR - CALL THE COMET (PURPLE)" title="JOHNNY MARR - CALL THE COMET (PURPLE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>JOHNNY MARR</h4>
<h4>CALL THE COMET (PURPLE)</h4>
<p>[ LP ] Indie exclusive purple vinyl LP pressing!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190758588728"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/lucifer-250x250.jpg"
alt="LUCIFER - LUCIFER II" title="LUCIFER - LUCIFER II" class="img-responsive" /></a></div>
<div class="caption">
<h4>LUCIFER</h4>
<h4>LUCIFER II</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/405053840102"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/perfect-250x250.jpg"
alt="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" title="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>PERFECT CIRCLE</h4>
<h4>EAT THE ELEPHANT (RED/BLUE)</h4>
<p>[ LP ] Red and blue vinyl LP pressing!</p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/607618211523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/murphy-250x250.jpg"
alt="PETER MURPHY - 5 ALBUMS" title="PETER MURPHY - 5 ALBUMS" class="img-responsive" /></a></div>
<div class="caption">
<h4>PETER MURPHY</h4>
<h4>5 ALBUMS</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/4050538388558"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/tiger-250x250.jpg"
alt="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" title="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" class="img-responsive" /></a></div>
<div class="caption">
<h4>TIGER ARMY</h4>
<h4>DARK PARADISE (COLORED VINYL W/DL)</h4>
<p>[ New 7 inch Vinyl ] </p>
</div>
</td>
</tr>
</body>
</html>
When you run it, the new releases look like this
Screenshot
What should I do?
Thanks in advance.


Let the images have dynamic sizing:
.img-responsive{
width: 100%;
height: auto;
}
They'll fill the <td>'s width 100% (and no more) and the height will be dynamically sized to retain the original aspect ratio. This is useful for rectangular images such as the Yellow Submarine album in your example.


Apply width: 100% to those images which are inside table cells. This will fit them exactly into the table cells, no matter how large they are:
td img {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>NewsLetter Template</title>
<style type="text/css" >
body {
border: 5px solid #ffff;
max-width: 700px;
padding: 20px;
width: 80%;
margin: 20px auto;
}
.img1 {
width: 100%;
height:auto;
position: relative
}
.img2 {
width: 50px;
height: 50px;
position: relative
}
h2 {
background-color: red;
text-align:"center";
font-family: Helvetica;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
color: white;
}
.performance {
width: 250px;
}
p {
font-family: Helvetica;
font-size: 20px;
color: black;
}
.performancetype {
font-size: 20px;
font-family: Helvetica;
}
h3 {
font-family: Helvetica;
font-weight: 500;
}
table {
display:inline-block;
width:"100%";
}
</style>
</head>
<body>
<!-- Header -->
<div style="min-height: 100vh; position: relative; border: 5px red solid; text-align: center;">
<a href="http://www.google.com">
<img class="img1" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="Sample"/></a>
<div>
<!-- Icons -->
<tr>
<td align="center">
<a href="http://www.google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Facebook" border="0"/>
</a>
<a href="http://google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt=" Twitter"border="0"/>
</a>
<a href="http://google.com">
<img class="img2" src="https://i.kym-cdn.com/entries/icons/original/000/003/338/320px--Insert_image_here-.svg.png" alt="YouTube" border="0"/>
</a>
</td>
</tr>
</div>
<br></br>
<div>
<h2>Check Out New Releases In The Following Categories</h2>
</div>
<!-- NEW RELEASE CATEGORIES -->
<!-- BEGIN UPCOMING INSTORE//-->
<h2>Upcoming Instore Events</h2>
<!-- BEGIN IN STORE -->
<!-- PERFORMER IMAGE -->
<div>
<h2> Breakout Specials & Releases </h2>
</div>
<table>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/LOVELYLP"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg"
alt="LOVELYTHEBAND - FINDING IT PREORDER LP" title="LOVELYTHEBAND - FINDING IT PREORDER LP" class="img-responsive" /></a></div>
<div class="caption">
<h4>LOVELYTHEBAND</h4>
<h4>FINDING IT PREORDER LP</h4>
<p>[ LP ] PREORDER FOR EVENT WRISTBAND</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/LOVELYCD"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/Lovely250-250x250.jpg"
alt="LOVELYTHEBAND - FINDING IT PREORDER CD" title="LOVELYTHEBAND - FINDING IT PREORDER CD" class="img-responsive" /></a></div>
<div class="caption">
<h4>LOVELYTHEBAND</h4>
<h4>FINDING IT PREORDER CD</h4>
<p>[ CD ] PREORDER FOR EVENT WRISTBAND</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/602567572039"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/beatles-250x250.jpg"
alt="BEATLES - YELLOW SUBMARINE (PIC DISC)" title="BEATLES - YELLOW SUBMARINE (PIC DISC)" class="img-responsive" /></a></div>
<div class="caption">
<h4>BEATLES</h4>
<h4>YELLOW SUBMARINE (PIC DISC)</h4>
<p>[ New 7 inch Vinyl ] Limited edition 7-inch vinyl picture disc now available!</p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/896308002842"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0619/clutch-250x250.JPG"
alt="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" title="CLUTCH - HOW TO SHAKE HANDS (PIC DISC)" class="img-responsive" /></a></div>
<div class="caption">
<h4>CLUTCH</h4>
<h4>HOW TO SHAKE HANDS (PIC DISC)</h4>
<p>[ New 7 inch Vinyl ] Picture disc now available!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/840588116126"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/devil-250x250.jpg"
alt="DEVILDRIVER - OUTLAWS TIL THE END V.1" title="DEVILDRIVER - OUTLAWS TIL THE END V.1" class="img-responsive" /></a></div>
<div class="caption">
<h4>DEVILDRIVER</h4>
<h4>OUTLAWS TIL THE END V.1</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190758510026"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/townsend-250x250.jpg"
alt="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" title="DEVIN TOWNSEND - OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV" class="img-responsive" /></a></div>
<div class="caption">
<h4>DEVIN TOWNSEND</h4>
<h4>OCEAN MACHINE: LIVE AT ANCIENT ROMAN THEATRE PLOVDIV</h4>
<p>[ CD ] </p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/724596973523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/goldfrapp-250x250.jpg"
alt="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" title="GOLDFRAPP - SILVER EYE (2CD/DELUXE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>GOLDFRAPP</h4>
<h4>SILVER EYE (2CD/DELUXE)</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/727361445225"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg"
alt="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" title="IMMORTAL - NORTHERN CHAOS GODS (WHITE/BLACK)" class="img-responsive" /></a></div>
<div class="caption">
<h4>IMMORTAL</h4>
<h4>NORTHERN CHAOS GODS (WHITE/BLACK)</h4>
<p>[ LP ] Indie exclusive black and white colored vinyl LP pressing!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/727361322021"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/immortal-250x250.jpg"
alt="IMMORTAL - NORTHERN CHAOS GODS" title="IMMORTAL - NORTHERN CHAOS GODS" class="img-responsive" /></a></div>
<div class="caption">
<h4>IMMORTAL</h4>
<h4>NORTHERN CHAOS GODS</h4>
<p>[ CD ] </p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190296955600"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/marr-250x250.jpg"
alt="JOHNNY MARR - CALL THE COMET (PURPLE)" title="JOHNNY MARR - CALL THE COMET (PURPLE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>JOHNNY MARR</h4>
<h4>CALL THE COMET (PURPLE)</h4>
<p>[ LP ] Indie exclusive purple vinyl LP pressing!</p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/190758588728"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/lucifer-250x250.jpg"
alt="LUCIFER - LUCIFER II" title="LUCIFER - LUCIFER II" class="img-responsive" /></a></div>
<div class="caption">
<h4>LUCIFER</h4>
<h4>LUCIFER II</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/405053840102"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/perfect-250x250.jpg"
alt="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" title="PERFECT CIRCLE - EAT THE ELEPHANT (RED/BLUE)" class="img-responsive" /></a></div>
<div class="caption">
<h4>PERFECT CIRCLE</h4>
<h4>EAT THE ELEPHANT (RED/BLUE)</h4>
<p>[ LP ] Red and blue vinyl LP pressing!</p>
</div>
</td>
</tr>
<tr>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/607618211523"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/murphy-250x250.jpg"
alt="PETER MURPHY - 5 ALBUMS" title="PETER MURPHY - 5 ALBUMS" class="img-responsive" /></a></div>
<div class="caption">
<h4>PETER MURPHY</h4>
<h4>5 ALBUMS</h4>
<p>[ CD ] </p>
</div>
</td>
<td width="25%" style="font-family: Helvetica, sans-serif; font-size: 10px;" align="center" valign="top">
<div class="image"><a href="http://vvinyl.com/shop/4050538388558"><img src="http://vvinyl.com/shop/image/cache/catalog/2018/0703/tiger-250x250.jpg"
alt="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" title="TIGER ARMY - DARK PARADISE (COLORED VINYL W/DL)" class="img-responsive" /></a></div>
<div class="caption">
<h4>TIGER ARMY</h4>
<h4>DARK PARADISE (COLORED VINYL W/DL)</h4>
<p>[ New 7 inch Vinyl ] </p>
</div>
</td>
</tr>
</body>
</html>

Related

images inside table in CSS , HTML

When I open the page in the half screen it appears like this
but when I open it full Screen it appears like this
I tried adding min and max-width but I can't figure out where is the problem
.Price {
font-size: 10pt;
}
.infoS {
background-color: #da9b48;
color: rgb(31, 22, 5);
padding: 3px;
width: 90%;
margin: 0 auto;
margin-top: 15px;
padding-left: 45px;
}
.Pinfo {
font-size: 7pt;
}
<table>
<td class="infoS">
<p class="Pinfo">
PIXMA G640
</p>
<img src="./images/PIXMA G640.png" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 150$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA TS7440
</p>
<img src="./images/PIXMA TS7440.png" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 250$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA G540
</p>
<img src="./images/PIXMA G540.png" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 170$
</p>
<td class="infoS">
<p class="Pinfo">
PIXMA G540
</p>
<img src="./images/PIXMA G540.png" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 120$
</p>
</td>
</tr>
</table>

**Your code is also missing a closing tr and a missing td tag.
For the solution, I would suggest you to use 'display: inline-flex' and justify-content: space-evenly for this case.
.Price {
font-size: 10pt;
}
.infoS {
background-color: #da9b48;
color: rgb(31, 22, 5);
padding: 3px;
width: 90%;
margin: 0 auto;
margin-top: 15px;
padding-left: 45px;
}
.Pinfo {
font-size: 7pt;
}
tr.row {
width: 100vw;
display: inline-flex;
justify-content: space-evenly;
}
<table>
<tr class="row">
<td class="infoS">
<p class="Pinfo">
PIXMA G640
</p>
<img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 150$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA TS7440
</p>
<img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 250$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA G540
</p>
<img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 170$
</p>
</td>
<td class="infoS">
<p class="Pinfo">
PIXMA G540
</p>
<img src="https://i.picsum.photos/id/977/536/354.jpg?hmac=slVWYbVbxWnJGkpSJ9FX_iXkIBqJAupfNrNR1CWBoAQ" alt="Pixma photo printer" width="75" height="75">
<p class="Price">
Price : 120$
</p>
</td>
</tr>
</table>
Working Fiddle

HTML table in email signature changing sizes when viewed on IOs devices

I've been having an issue where the signature we've built works on nearly everything except IOS devices like Iphone and Ipad. on those devices the second cell is much thinner than it's supposed to be, and I can't tell if it's because the first cell is too big or if something else is causing this.
I figured standard table HTML would be fairly universal, and I don't have any fancy code going in here, so I expect it's some sort of odd interaction in how it's being translated by the mail app.
I've tried making the cells one pixel shorter, in case it's somehow not liking how it fits in the full 600 pixel width table. No dice.
Any idea what might be causing this? Thanks a ton for any help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<table style="width: 600px; border-collapse: collapse; font-family: Arial;">
<tr style="width: 600px;">
<td colspan="2" style="width: 314px; border-bottom: 2px solid #1a206c; padding-top: 0px; padding-bottom: 8px; vertical-align: top; " >
<span style="font-size: 18pt; font-weight: bold; color: #1a206c;">
John Doe
<a href="https://en.wikipedia.org/wiki/ITIL" style="text-decoration: none;">
<img src="http://www.gosafe.com/signatures/personalcerts/itil.png" border="0" alt="Certification"/>
</a>
</span>
<br>
<span style="font-size: 11pt; font-weight: bold; color: #ff6400; line-height: 20px;">
Senior Operating Officer
</span>
</td>
<td colspan="2" style="width: 284px; border-bottom: 2px solid #1a206c; padding-top: 0px; padding-bottom: 8px; vertical-align: top;">
<span style="font-size: 9pt; color: #1a206c; font-family: Arial;">
<img src="https://www.gosafe.com/signatures/5-2021-images/tollfree.png" alt="Phone Number" vertical-align="center"/>
<strong style="line-height: 20px;"> 555.555.5555</strong>
<img src="https://www.gosafe.com/signatures/5-2021-images/mobile.png" border="0" alt="Mobile"/>
<strong style="line-height: 20px;"> 555.555.5555</strong>
</span>
<br style="font-size: 9pt;" />
<span style="font-size: 9pt; color: #1a206c; font-family: Arial; line-height: 20px; vertical-align: middle;">
<img src="https://www.gosafe.com/signatures/5-2021-images/email.png" border="0" alt="Email"/>
<strong style="line-height: 20px;"> John_Doe#exampleguy.com</strong>
</span>
<span style="font-size: 9pt; color: #1a206c; font-family: Arial;"></span>
<br style="font-size: 8pt;" />
<span style="font-size: 9pt; color: #1a206c; font-family: Arial; margin-bottom: 0px;">
<img src="https://www.gosafe.com/signatures/5-2021-images/location.png" border="0" alt="Location"/>
<strong style="line-height: 20px;"> 3343 Main Street, Albany, New York, 33939</strong>
</span>
</td>
</tr>
<tr style="width: 600px;">
<td style="width: 200px; padding-top: 15px; padding-bottom: 10px;">
<a href="http://www.goSafe.com">
<img src="https://www.gosafe.com/signatures/5-2021-images/goSafeLogo.png" border="0" alt="goSafe"/>
</a>
</td>
<td colspan="2" style="width: 200px; padding-top: 5px; text-align: center;">
<a title="Member of the AD Safety Network" style="text-decoration: none;" href="https://www.adhq.com">
<img src="https://www.gosafe.com/signatures/5-2021-images/ADsnPerfect.png" border="0" alt="AD Safety Network"/>
</a>
</td>
<td style="width: 200px; padding-top: 15px; padding-bottom: 10px;">
<p style="font-size: 10pt; font-family: Arial; text-decoration: none;" align="right">
<a title="goSafe on LinkedIn" style="text-decoration: none;" href="https://www.linkedin.com/company/948460">
<img src="https://www.gosafe.com/signatures/5-2021-images/li.png" border="0" alt="Linked In"/>
</a>
<a title="goSafe on FaceBook" style="text-decoration: none;" href="https://www.facebook.com/gosafesupply">
<img src="https://www.gosafe.com/signatures/5-2021-images/FB.png" border="0" alt="Facebook"/>
</a>
<a title="goSafe on Instagram" style="text-decoration: none;" href="https://www.instagram.com/gosafesupply">
<img src="https://www.gosafe.com/signatures/5-2021-images/ig.png" border="0" alt="Instagram"/>
</a>
<a title="goSafe on Twitter" style="text-decoration: none;" href="https://twitter.com/gosafesupply">
<img src="https://www.gosafe.com/signatures/5-2021-images/tw.png" border="0" alt="Twitter"/>
</a>
<br>
<a href="http://www.goSafe.com" style="text-decoration: none;">
<span style="color: #ff6400;">
<strong title="">www.goSafe.com</strong>
</span>
</a>
</p>
</td>
</tr>
<tr style="width: 600px;">
<td colspan="4">
<p style="width: 600px; padding-top: 0px; padding-bottom: 10px; font-size: 7pt; color: #1a206c; font-family: Arial;">This email and any attachments may contain confidential or proprietary information, the review and usage of which is restricted to the sender and the intended recipient(s). If you are not the intended recipient, please contact the sender and delete all copies of this message and any attachments.</p>
</td>
</tr>
</table>
<br /><br />

It's 600px wide, and mobiles only have about 300px! So there is going to be downscaling or chopping or squeezing to compensate.
I'd suggest re-creating according to 'fluid design' principles.

why my Div and Style is not woking in email template?

Here is the link for the code:
https://codepen.io/yahyajapan/pen/bGgyONX
While I was trying to create a mail template I code an internal CSS while did not work.
Then I was about known that I have to code inline styling, in the above code I also started converting internal CSS into inline CSS but what I get is when I send mail, it does not show my divs and styles which does not give me the desired result. Can anyone please help me with this code?
You can look for the desired result by running the above code.
<center class="wrapper" style=" width: 100%;
table-layout: fixed;
background-color: #f6f9fc;
padding: 40px 0;">
<div class="webkit" style=" max-width: 600px;
background-color: white;">
<table class="outer" align="center" style="margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;">
<tr>
<td style="padding: 0;">
<table style="width: 100%; border-spacing: 0; border-spacing: 0;">
<tr>
<td style="padding: 0;">
<div class="email-temp-1">
<!-- <img src="./assets/email1_graphics/email1_graphics/em1_background.png" alt=""> -->
<div class="email-temp-1-body">
<div class="logo-BG">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_header.png" alt="">
<div class="email-temp-1-logo">
<a href="https://kempslunicko.cz/" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_logo.png" alt="">
</a>
</div>
<div class="upper-title">
<p>Rezervační číslo: 11</p>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/kempslunicko/" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_fcb.png" alt="">
</a>
<a href="https://www.instagram.com/kempslunicko/" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_inst.png" alt="">
</a>
<a href="https://wa.me/0420737935777" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_whatsup.png" alt="">
</a>
</div>
</div>
<div class="container">
<div class="em1-mid-heading">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_confirm.png" alt="">
<div>
<h4 style="font-family: oswald-light;">VAŠE REZERVACE BYLA PŘIJATA</h4>
<p style="font-family: oswald-regular; font-size: 12px;">Děkujeme pane/paní Jméno Příjmení <br> za Váš zájem o
pobyt v Kempu Sluníčko.</p>
</div>
</div>
<div class="em1-mid-content" style="display: flex;
justify-content: space-between;
margin-top: 4%;">
<div class="">
<p style="font-family: oswald-bold;">Datum příjezdu: <span>02.07.2021</span></p>
<p style="font-family: oswald-bold; margin-bottom: 1rem;">Datum odjezdu: <span>06.07.2021</span></p>
<p style="font-family: oswald-regular;">Ubytování: Chatka Sluníčko</p>
<p style="font-family: oswald-regular;">Rezervované chatky: 21, 22, 23, 24</p>
<p style="font-family: oswald-regular;">Počet dospělých: 5</p>
<p style="font-family: oswald-regular;">Počet dětí (pod 12 let): 6</p>
<p style="font-family: oswald-regular;">Sleva na ubytování: -10%</p>
</div>
<div class="em1-mid-content-img">
<div>
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_photos.png" alt="">
</div>
</div>
</div>
<div class="em1-lower-heading" style="margin-top:2rem;">
<p style="font-family: oswald-bold; font-size: 13px;">Celková částka včetně slevy: <span>11 331 CZK</span></p>
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_underline.png" alt="">
</div>
<div class="em1-lower-content" style="padding-top: 1rem;">
<p style="font-family: nunito; font-size: 10px;">K dokončení rezervace prosím uhraďte rezervační zálohu</p>
<p style="font-family: nunito; font-size: 10px;"><span style="font-size: 13px;">5 665,5 CZK</span> na číslo bankovního účtu
<span style="font-size: 13px;">2501946055/2010</span> (fio banka)
</p>
<p style="font-family: nunito; font-size: 10px; padding-bottom: .5rem;"><span style="font-size: 13px;">s variabilním číslem: 10</span>, a s
příjmením rezervující osoby v poznámce platby.</p>
<p style="font-family: nunito; font-size: 10px;">Neuhrazením do 5 pracovních dnů tato rezervace propadá.</p>
<p style="font-family: nunito; font-size: 10px; padding-bottom: .5rem;">Doplatek <span style="font-size: 13px;">5 665,5 CZK</span> bude
proveden v hotovosti na recepci při příjezdu.</p>
<p style="font-family: oswald-light; font-size: 12px;">V případě dotazů nás kontakujte.</p>
<p style="font-family: oswald-regular; color: #24b99b; margin-top:2rem;">Těšíme se na Vás!</p>
</div>
</div>
</div>
<div style="position: absolute;
bottom: 0;
left: 0;
right: auto;">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_footer.png" alt="">
<p style="font-family: oswald-bold;
position: absolute;
bottom: 5%;
left: 2%;
right: auto;
color: #3b0900;
font-size: 13px;">
KEMP SLUNÍČKO <span style="font-size: 8px;">737 935 777,
www.kempslunicko.cz info#kempslunicko.cz</span></p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>

Don't struggle with custom css and html for different email clients (each will treat your code differently). Find free or paid email template creator and use it.

Why image is showing a gap in outlook?

I am a creating an email signature using HTML. I am using the HTML table to build it.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
padding : 0 0 0 0;
margin: 0 0 2px 0;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="329" height="314">
<tr>
<td style="line-height: 0;">
<img src="CC-email-sig_01.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
<td style="font-family: Helvetica; font-size: 12px; text-align: right; padding-right: 20px; font-weight: bold;">
<p style="color: #3F4B54;">Sean Clough</p>
<p style="color: #3F4B54;">Writer/Owner </p>
<p style="color: #25408F;">Clough Copywriting</p>
<br/>
<p><span style="color: #25408F;">m</span> <span style="color: #3F4B54;">0419 031 052</span> </p>
<p><span style="color: #25408F;">a</span> <span style="color: #3F4B54; font-weight: bold;">PO Box 439</span> </p>
<p style="color: #3F4B54;">Bedford WA 6052</p>
<p>cloughcopywriting.com.au</p>
</td>
</tr>
<tr bgcolor="#25408F">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="2" style="line-height: 100%;">
<img src="CC-email-sig_12.png" alt="" width="329" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
</table>
</body>
</html>
Now In the browser, it looks like bellow image:
but in outlook, the image looks like bellow:
If you see then you can notice the red arrow. Here I am using an image for showing the curve but It's not full width in outlook but perfect on the browser.
Also, padding between Man image and text is not same.
How can I solve this issue?
Thanks.

So, basically,because of the outlook limitations, I recommend you to use an entire background image for your last row.
https://jsfiddle.net/pablodarde/css60wL2/
<tr background="https://s20.postimg.org/cz6xu0nz1/bg_Footer.png">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>

Table is not contracting

Please take a look at this video, it explains my problem:
http://www.youtube.com/watch?v=Zeq_BZ5QgCg
It's a simple table. When I resize the page, the table resizes with the page to some point, but then stops.
I have no idea why the table behaves like that. I want it to contract just like the rest of the page.
The black lines you see are from div containers that are set to "clear:both".
The html code of the table:
<table class="tborder" cellpadding="6" cellspacing="0" border="1" align="center" id="videoevent">
<tbody>
<tr>
<td class="thead" align="center" valign="middle" style="vertical-align:center">
Headline
</td>
</tr><tr>
<td class="alt2" align="center" style="padding:10px;">
<div class="right" style="margin:5px 0px 10px 0px"><span id="user_online_count">refreshing...</span> persons are viewing this page</div>
<div class="left" style="margin:5px 0px 10px 0px">OVERVIEW</div>
<div class="c"></div>
<div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=1">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">Jade</span>
<span class="offline_indicator" id="oi_model_1">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=2">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">User</span>
<span class="offline_indicator" id="oi_model_2">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=3">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">User</span>
<span class="offline_indicator" id="oi_model_3">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=4">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">XXX</span>
<span class="offline_indicator" id="oi_model_4">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=5">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">admin</span>
<span class="offline_indicator" id="oi_model_5">offline</span>
</a>
</div>
<div class="c"></div>
</td>
</tr>
<tr>
<td colspan="2">
Viewers: <span id="users_in_chat">waiting for refresh</span>
</td>
</tr>
</tbody>
</table>
I see nothing in the style of the table that could cause this behavior:
td[align=center] {
text-align: -webkit-center;
}
td[valign=middle] {
vertical-align: middle;
}
element.style {
}
.thead {
background: #CA1B03;
color: white;
font: normal normal bold 11px/normal tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
td, th, p, li {
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
/*user agent stylesheet*/
td, th {
display: table-cell;
vertical-align: inherit;
}
Inherited from table#videoevent.tborder
.tborder {
color: black;
}
/*user agent stylesheet*/
table {
border-spacing: 2px 2px;
border-collapse: separate;
}
/*Inherited from div.dynwrap.page*/
Style Attribute {
text-align: left;
}
.page {
color: black;
}
/*Inherited from body*/
body {
color: black;
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

Maybe cause that there are some nowrap elements or elements with fixed width inside td elements? Video, images or style="white-space: nowrap;"?

Categories