**UPDATE:
#tablaarriba a:hover {
color: gray;
}
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
<a style="color: black; text-decoration: none; background-color: transparent;" href="social.htm">Social</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
<a style="color: black; text-decoration: none;" href="file:///Users/monmunoz/Desktop/Colegio/Tec/Quinto%20Semestre/ITGS/PROYECTO/Comercial.htm">Comercial</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="proyectospersonales.htm">Proyectos Personales</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="sobrelafotografa.htm">Sobre la fotógrafa</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
** I changed some details in the html pointed out by the HTML validator. So now I have this.
I'm almost done building my website; however I'm trying to incorporate the a:hover attribute in my stylesheet and I don't know what I'm doing wrong. I want my links to change to color grey whenever the mouse passes above them. Please help me. So far I have this:
Try this:
#tablaarriba a:hover {
color: gray ;
}
<div id="tablaarriba">
LINK
</div>
table a:hover {
color: gray ;
}
table a {
color: black; text-decoration: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link href="menuarriba.css" rel="stylesheet" type="text/css">
<title>Rosy G Photography and Artwork</title>
</head><body>
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
Social<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
Comercial<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Proyectos Personales<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Sobre la fotógrafa<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
</body></html>
I recommend adding a class to you're a element. Then use that class inside of the CSS, and try from there. If that does not work, then you might try using transition.
.a {
text-decoration: none;
color: black;
-webkit-transition: 0.256s;
}
.a:hover {
transition: 0.256s;
color: grey;
}
Test
The inline style style="color: black;..." is stronger than non-inline styles, so you cannot override it.
You should stylize the a tag with a selector (class or tag one).
Related
I create a custom email HTML signature for my outlook profile but when I add to my signatures and rewrite the file from HTML to HTM, this signature doesn't work. When I open signature in OUTLOOK for edit it is an empty editor page.
Can you write a comment and advise me on this problem?
I created this email signature the first time and I don't know where I have mistaken.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style media="screen" type="text/css">
.arial {
font-family: Arial;
}
.container {
max-width: 650px;
}
.font-14 {
font-size: 14px;
}
.font-12 {
font-size: 12px;
}
.font-10 {
font-size: 10px;
}
.bold {
font-weight: bold;
}
.i-block {
display: inline-block;
}
.blue {
color: rgb(24, 71, 132);
}
.image {
max-width: 600px;
height: auto;
}
.profile {
width: 90px;
height: 90px;
object-fit: cover;
object-position: center top;
}
.fa {
display: inline-block;
}
.height-space {
height: 20px;
}
.tr-height {
height: 20px;
}
#media only screen and (max-width: 1100px) {
.image {
width: 450px;
}
.container {
max-width: 450px;
}
.profile {
max-width: 70px;
max-height: 70px;
}
.fa {
display: none;
}
}
#media only screen and (max-width: 900px) {
.height-space {
height: 10px;
}
.tr-height {
height: 15px;
}
}
#media only screen and (max-width: 500px) {
.font-14 {
font-size: 12px;
}
.font-12 {
font-size: 10px;
}
.font-10 {
font-size: 8px;
}
.height-space {
height: 7px;
}
.image {
width: 350px;
}
.container {
max-width: 350px;
}
.profile {
max-width: 50px;
max-height: 50px;
}
}
</style>
</head>
</html>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial container"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td style="vertical-align: middle;">
<span class="sc-kgAjT cuzzPp" style="margin-right: 15px; display: block;">
<img src="https://paralympic.sk/wp-content/uploads/2021/01/AC4Q2271-scaled.jpg" role="presentation"
class="sc-cHGsZl bHiaRe profile">
</span>
</td>
<td style="vertical-align: middle;">
<h3 color="#184784" class="sc-fBuWsC eeihxG blue font-14" style="margin: 0px;">
<span>Tomáš</span><span> </span><span>Valach</span>
</h3>
<p color="#000000" font-size="large" class="sc-fMiknA bxZCMx font-12"
style="margin: 0px; color: rgb(0, 0, 0); line-height: 22px;">
<span><b>Motivátor</b></span>
</p>
<p color="#000000" font-size="large" class="sc-dVhcbM fghLuF font-12"
style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); line-height: 16px;">
<span><span class="fa">Národný projekt </span><b> SME SI ROVNÍ</b></span>
</p>
</td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td color="#184784" direction="vertical" width="1" class="sc-jhAzac hmXDXQ blue"
style="width: 0px; border-bottom: none; border-left: 2px solid;"></td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr class="tr-height" style="vertical-align: middle;">
<td style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Mobil:
</p><a href="tel:0914196212" color="#000000" class="sc-gipzik iyhjGb font-10 i-block"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>0914196212</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
E-mail:
</p>
<a href="mailto:tomas.valach#smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>tomas.valach#smesirovni.sk</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Web:
</p>
<a href="www.smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>www.smesirovni.sk</span></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td class="height-space"></td>
</tr>
<tr>
<td color="#184784" direction="horizontal" height="1" class="sc-jhAzac hmXDXQ"
style="width: 100%; border-bottom: 2px solid rgb(24, 71, 132); border-left: none; display: block;"></td>
</tr>
<tr>
<td class="height-space"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="height-space">
<p class="font-10" style="text-align: center; padding: 0 30px;">Tento projekt sa realizuje vďaka podpore z
Európskeho sociálneho
a Európskeho fondu
regionálneho rozvoja v
rámci Operačného programu Ľudské zdroje.</p>
<p class="font-10" style="text-align: center;"><a href="https://www.employment.gov.sk/sk/esf/"
class="font-10">www.esf.gov.sk</a>, <a href="https://www.employment.gov.sk/sk/"
class="font-10">www.employment.gov.sk</a></p>
</td>
</tr>
<tr>
<td style="text-align: center;">
<img class="image" src="oplz.png" alt="" srcset="">
</td>
</tr>
</tbody>
</table>
The media attribute is not supported. The fact is that Outlook uses Word for rendering HTML markup for message bodies. You can find all supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
You are closing off your HTML before starting your table. I have added a body tag as well and same(full) code is below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style media="screen" type="text/css">
.arial {
font-family: Arial;
}
.container {
max-width: 650px;
}
.font-14 {
font-size: 14px;
}
.font-12 {
font-size: 12px;
}
.font-10 {
font-size: 10px;
}
.bold {
font-weight: bold;
}
.i-block {
display: inline-block;
}
.blue {
color: rgb(24, 71, 132);
}
.image {
max-width: 600px;
height: auto;
}
.profile {
width: 90px;
height: 90px;
object-fit: cover;
object-position: center top;
}
.fa {
display: inline-block;
}
.height-space {
height: 20px;
}
.tr-height {
height: 20px;
}
#media only screen and (max-width: 1100px) {
.image {
width: 450px;
}
.container {
max-width: 450px;
}
.profile {
max-width: 70px;
max-height: 70px;
}
.fa {
display: none;
}
}
#media only screen and (max-width: 900px) {
.height-space {
height: 10px;
}
.tr-height {
height: 15px;
}
}
#media only screen and (max-width: 500px) {
.font-14 {
font-size: 12px;
}
.font-12 {
font-size: 10px;
}
.font-10 {
font-size: 8px;
}
.height-space {
height: 7px;
}
.image {
width: 350px;
}
.container {
max-width: 350px;
}
.profile {
max-width: 50px;
max-height: 50px;
}
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial container"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr>
<td style="vertical-align: middle;">
<span class="sc-kgAjT cuzzPp" style="margin-right: 15px; display: block;">
<img src="https://paralympic.sk/wp-content/uploads/2021/01/AC4Q2271-scaled.jpg" role="presentation"
class="sc-cHGsZl bHiaRe profile">
</span>
</td>
<td style="vertical-align: middle;">
<h3 color="#184784" class="sc-fBuWsC eeihxG blue font-14" style="margin: 0px;">
<span>Tomáš</span><span> </span><span>Valach</span>
</h3>
<p color="#000000" font-size="large" class="sc-fMiknA bxZCMx font-12"
style="margin: 0px; color: rgb(0, 0, 0); line-height: 22px;">
<span><b>Motivátor</b></span>
</p>
<p color="#000000" font-size="large" class="sc-dVhcbM fghLuF font-12"
style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); line-height: 16px;">
<span><span class="fa">Národný projekt </span><b> SME SI ROVNÍ</b></span>
</p>
</td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td color="#184784" direction="vertical" width="1" class="sc-jhAzac hmXDXQ blue"
style="width: 0px; border-bottom: none; border-left: 2px solid;"></td>
<td width="20">
<div style="width: 20px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium;">
<tbody>
<tr class="tr-height" style="vertical-align: middle;">
<td style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Mobil:
</p><a href="tel:0914196212" color="#000000" class="sc-gipzik iyhjGb font-10 i-block"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>0914196212</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
E-mail:
</p>
<a href="mailto:tomas.valach#smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>tomas.valach#smesirovni.sk</span></a>
</td>
</tr>
<tr class="tr-height" style="vertical-align: middle;">
<td class="font-12" style="padding: 0px;">
<p class="font-10 bold i-block blue" style="margin: 1px; padding-right: 4px;">
Web:
</p>
<a href="www.smesirovni.sk" color="#000000" class="sc-gipzik iyhjGb font-10"
style="text-decoration: underline; color: rgb(0, 0, 0);"><span>www.smesirovni.sk</span></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td class="height-space"></td>
</tr>
<tr>
<td color="#184784" direction="horizontal" height="1" class="sc-jhAzac hmXDXQ"
style="width: 100%; border-bottom: 2px solid rgb(24, 71, 132); border-left: none; display: block;"></td>
</tr>
<tr>
<td class="height-space"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW arial"
style="vertical-align: -webkit-baseline-middle; font-size: medium; width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="height-space">
<p class="font-10" style="text-align: center; padding: 0 30px;">Tento projekt sa realizuje vďaka podpore z
Európskeho sociálneho
a Európskeho fondu
regionálneho rozvoja v
rámci Operačného programu Ľudské zdroje.</p>
<p class="font-10" style="text-align: center;"><a href="https://www.employment.gov.sk/sk/esf/"
class="font-10">www.esf.gov.sk</a>, <a href="https://www.employment.gov.sk/sk/"
class="font-10">www.employment.gov.sk</a></p>
</td>
</tr>
<tr>
<td style="text-align: center;">
<img class="image" src="oplz.png" alt="" srcset="">
</td>
</tr>
</tbody>
</table>
</body>
</html>
I've been trying to make responsive mail signature. This is my code.
<!-- --><!-- 1. Google Fonts Code --><!-- 2. Dotty Cell Borders -->
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;"> </p>
<table class="table" style="background-color: #ffffff; font-family: lato; text-align: left; color: #000000; font-size: 14px;">
<tbody>
<tr style="height: 1px;">
<th class="table__heading" style="width: 100px; padding-right: 20px; padding-left: 20px; text-align: center;" rowspan="4">
<p><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LOGO.png" width="90px" /></p>
<p><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" /> <img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" /> <img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" /></p>
</th>
<td class="table__content" style="font-weight: bold;" colspan="4">DAMIAN DĄBROWSKI</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="tel:-">-</a></td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="mailto:-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;"> </p>
I found an example how to make second column responsive, but I spent hours on it and can't apply it to my signature...
This is this example:
<!--[if gte mso 9]>
<table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>{Display name}</strong><br>Phone {Phone}<br>Email {E-mail}
</div>
<!--[if gte mso 9]>
</td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<strong>Company.com</strong>
</div>
<span style="clear: both;"></span>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
Can someone please tell me how to make it right?
It's recommended to use tables when doing the HTML layout for mails. The different email readers are not really barely compatible with other than tables.
I'd go with a two-column table to achieve what you are looking for, as float is one of that properties that not all readers understand
Something like
<table>
<tr>
<td>
<strong>{Display name}</strong><br>Phone {Phone}<br>Email {E-mail}
</td>
<td>
<strong>Company.com</strong>
</td>
</tr>
</table>
I'm totaly begginer in creating HTML body, but i need to create HTML body of an email, i have to put into that email message Table with some data. It is pretty simple table with 2 rows and 4 columns but, there are 3 cell that have to be splite. So i've created table (1 row 2 columns) inside that cell. And here is the problem, while filling those new cell, there "main" cell is not filled correctly, please see below.
an example
How to fill that correctly. I would be grateful for a code that fill it.
My html body:
<table style="text-align: center; padding: 8px; width: 600px;" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table style="height: 50px; width: 150px; text-align: center;" >
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
And i would like to get something like that:
example
All of your <table> needs to be
<table cellspacing="0" cellpadding="0" border="0">
this will remove the extra white padding in<td>
<table cellpadding="0" cellspacing="0" border="0" style="text-align: center; padding: 8px; width: 600px;" border="1"
cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Trying to use the below for an email signature, but I cannot get the image in the spanned row to remain centered in all email clients - it works in JSBin fine, but it shows uneven when loaded in GMail. What do I need to change to get it showing correctly (centered) in GMail?
https://jsbin.com/yojinow/1/edit?html,output
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
<tbody>
<tr>
<td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
<img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: inline-block; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="100%" width="100%">
</td>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
John Doe
</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
Accounts
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
T: (02) 4399 9999 |
F: (02) 4399 9999
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
E: example#example.com.au
</font>
</td>
</tr>
</tbody>
</table>
The image must have display: block property to be able to have the 100% height
Try to replace display: inline-block; from the image to display: block;
And look at this example
#TemplateLogo{
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: baseline;
}
#TemplateLogo2{
display: inline-block;
margin-left: auto;
margin-right: auto;
vertical-align: baseline;
}
tbody{
display:block;
border: 1px solid red;
}
h3{
font-family: Arial;
}
<h3>With display: block;</h3>
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
<tbody>
<tr>
<td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
<img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%">
</td>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
John Doe
</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
Accounts
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
T: (02) 4399 9999 |
F: (02) 4399 9999
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
E: example#example.com.au
</font>
</td>
</tr>
</tbody>
</table>
<h3>With display: inline-block;</h3>
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
<tbody>
<tr>
<td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
<img id="TemplateLogo2" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%">
</td>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
John Doe
</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
Accounts
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
T: (02) 4399 9999 |
F: (02) 4399 9999
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
E: example#example.com.au
</font>
</td>
</tr>
</tbody>
</table>
Please use css:
height: auto; // On the <td rowspan="4"...>
and on the image:
display: block;
height: 70px;
.
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
<tbody>
<tr>
<td rowspan="4" style="width: 70px; height: auto; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
<img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: block; height: 70px; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="100%" width="100%">
</td>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
John Doe
</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
Accounts
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
T: (02) 4399 9999 |
F: (02) 4399 9999
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
E: example#example.com.au
</font>
</td>
</tr>
</tbody>
</table>
Change image height value to auto.
<img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: block; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="auto" width="100%">
this may works fine.
Thanks.
You're specifying 4 columns with 18px each, but the column where the image dwells you're specifying 70px. It should be 72px (18px x 4 = 72px) (column and image). You may need to change the text to baseline if you want to align them on the baseline.
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
<tbody>
<tr>
<td rowspan="4" style="width: 72px; height: 72px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
<img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: inline-block; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="100%" width="100%">
</td>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
John Doe
</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
Accounts
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
T: (02) 4399 9999 |
F: (02) 4399 9999
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
E: example#example.com.au
</font>
</td>
</tr>
</tbody>
</table>
One of my favorite CSS properties for aligning things is transform because it is quick and easy. If you are looking for this to be viewable on mobile devices, I suggest you not use px but em or something like that.
table{
border: 1px solid red;
}
img {
transform: translateY(0.15em);
}
<h3>With display: block;</h3>
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
<tbody>
<tr>
<td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
<img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%">
</td>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
John Doe
</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
Accounts
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
T: (02) 4399 9999 |
F: (02) 4399 9999
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
E: example#example.com.au
</font>
</td>
</tr>
</tbody>
</table>
<h3>With display: inline-block;</h3>
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
<tbody>
<tr>
<td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
<img id="TemplateLogo2" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%">
</td>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
John Doe
</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
Accounts
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
T: (02) 4399 9999 |
F: (02) 4399 9999
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
E: example#example.com.au
</font>
</td>
</tr>
</tbody>
</table>
table{
border: 1px solid red;
}
img {
transform: translateY(0.15em);
}
<h3>With display: block;</h3>
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
<tbody>
<tr>
<td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
<img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%">
</td>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
John Doe
</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
Accounts
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
T: (02) 4399 9999 |
F: (02) 4399 9999
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
E: example#example.com.au
</font>
</td>
</tr>
</tbody>
</table>
<h3>With display: inline-block;</h3>
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;">
<tbody>
<tr>
<td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle">
<img id="TemplateLogo2" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%">
</td>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);">
John Doe
</font>
</td>
</tr>
<tr>
<td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);">
Accounts
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
T: (02) 4399 9999 |
F: (02) 4399 9999
</font>
</td>
</tr>
<tr>
<td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;">
<font style="color: #515151; font-size: 10pt; font-family: Arial">
E: example#example.com.au
</font>
</td>
</tr>
</tbody>
</table>
<table>
<tr>
<td class="h1" colspan="12" style="font-family: 'proxima_nova_rgbold', Arial, Helvetica, sans-serif;font-size: 18px;text-align:center; padding-top:10px;padding-left:30px;text-transform: uppercase;padding-bottom: 8px;padding-right:30px;line-height: 26px;color: #262626; font-weight:700; background:#f9f9f9;" align="center">
<hr align="left" style="width: 70px; vertical-align: middle; height: 1px; background: #171717; display: inline-block;">
<img src="http://www.hubilo.in/images_for_links/venue_icon.png" width="25" height="25" align="center" style="vertical-align: middle;">
<hr align="left" style="width: 70px; display: inline-block; vertical-align: middle; height: 1px; background: #171717;">
</td>
</tr>
</table>
When I see this into outlook then it looks like.
left hr in one line
image in 2nd line and
right hr in new line.
How can I solve this?
<table align="center" style="">
<tr>
<td align="left" style="width: 35px; padding: 0; margin: 0;">
<hr style="width: 30px; border:1px solid #000000; background: #000000; ">
</td>
<td align="center" style="width:30px; padding: 0; margin: 0;">
<img src="http://www.hubilo.in/images_for_links/venue_icon.png" width="25" height="25" style="vertical-align:middle;">
</a>
</td>
<td align="right" style="width: 35px; padding: 0; margin: 0;background: ">
<hr style="width: 30px; border:1px solid #000000; background: #000000; ">
</td>
<td align="right" style="width: 20px; padding: 0; margin: 0;">
<span style="color:#FFFFFF; font-size:14px;"> </span>
</td>
</tr>
</table>
Try this