I am creating an email newsletter layout and I got a bit confused with coding one element.
Here is the desired result: Screenshot
Here is what I've got: Screenshot
What am I doing wrong?
Please see my code below:
<tr>
<td style="background-color:#ffffff;">
<table style="max-width: 535px; margin-top: 50px; text-align:center; margin-left:auto; margin-right:auto;">
<colgroup>
<col span="1" style="width: 60%;">
<col span="1" style="width: 40%;">
</colgroup>
<tr>
<td style="padding:0; background-color:#e9e9e9; text-align: left; font-family: Lora; width:235px;">
<div style="padding: 10px 30px;">
<h2 style="color:#BF1435; text-transform:uppercase;">Срок завершения работ - 01.09.2023</h2>
<p><strong>Всего 25 апартаментов.</strong></p>
<p><strong>Редкие планировки - от 25 м².</strong></p>
<p><strong>Высота потолка - 3 м.</strong></p>
<p><strong>Апартаменты с отделкой:</strong> стены выкрашены в светлые тона, плитка в с/у, на полу паркет, выполнена разводка электрики и сделаны основные выводы.</p>
</div>
</td>
<td>
<img src="images/image-card-1.png" style="width:200px">
</td>
</tr>
</table>
</td>
</tr>
Try increasing the height of the image, the content will follow along.
Like this:
<img style="width: 250px; height: 400px; object-fit: cover"
src="images/image-card-1.png"
/>
Related
It should support for html email, so I can't use justify-content and align-items.
I try to use position: absolute for <img />, but It's not working on html email ?
Hot do I make the Twitter icon on the left side and on the same line with 1 2 3 for html email ?
<div
class="footer-container"
style="
position: relative;
background: pink;
position: fixed;
bottom: 0;
width: 100%;"
>
<!-- position is not working on html email -->
<div
class="image-container"
style="position: absolute; top: 30px; left: 24px"
>
<img
src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png"
alt="test"
width="94"
/>
</div>
<div
class="centered"
style="padding-top: 40px; padding-bottom: 40px; padding-right: 30px; text-align:right;"
>
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
In email-templates you have limited support and as such sue techniques that are outdated or would not be semantically correct for normal HTML files.
In this case, you should use a table for layout purposes. You can shrink the table cells to their minimum content by using: style="width: 0; white-space: nowrap;"
<table width="100%">
<tr>
<td>
<img src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png" alt="test" width="94">
</td>
<td style="width: 0; white-space: nowrap;">
<a>1</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>2</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>3</a>
</td>
</tr>
</table>
People forget that HTML email Table can be treated as a "grid" layout by using colspan (and rowspan as well). Usually a grid of 6 columns fits best for most of the cases. Knowing you have such a grid, the top row can be constructed as such colspans, and by using text-align:
<style>
td {
border: 1px solid #ddd;
padding: 1rem;
}
</style>
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed; border-collapse: collapse; border: 0px;border-spacing: 0;">
<tbody>
<tr>
<td colspan="2">
<img src="https://i.stack.imgur.com/q9TPY.png" alt="logo" style="display: block; vertical-align: middle; border: 0;" width="57" height="48">
</td>
<td colspan="4" style="text-align: right;">
Link 1
Link 2
Link 3
</td>
</tr>
<tr>
<td colspan="6" style="text-align: center; background: gold;"><br><br>6<br><br><br></td>
</tr>
<tr>
<td colspan="3">3</td>
<td colspan="3">3</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="5" style="text-align: center; background: #567; color:#fff;">5</td>
<td colspan="1" style="text-align: center; background: #456; color:#fff;">1</td>
</tr>
</tbody>
</table>
I am working on updating a table in a Pardot email template. I am trying to align an image in column 1 with the first line of text in column 2. Meaning, for this master template, when users go in the first line text will remain in alignment with the image and additional lines of text can be added below in column 2- currently when lines are added the first line of text is bumped up higher in the cell and is no longer in alignment with the image in column 1.
<tr pardot-repeatable="" style="">
<td align="center" style="padding:20px 0">
<table border="0" cellpadding="0" cellspacing="0" class="hund" width="90%">
<tbody>
<tr pardot-repeatable="" style="">
<td align="center" class="rePad" pardot-region="" style="text-align:left; color:#333333; font-family:Calibri,Arial,sans-serif; font-size:16px; line-height:21px; padding:20px 0"><table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 87px; height: 113px;"><span style="font-family:arial,helvetica,sans-serif;"><img alt="" border="0" height="75" src="https://mma.marshmma.com/l/644133/2019-08-28/hslnh/644133/69036/Icons_TrainingsHead_emerald.jpg" style="width: 75px; height: 75px; border-width: 0px; border-style: solid;" width="75"></span></td>
<td style="width: 424px; height: 113px;"><span style="text-align:left;font-family:arial,helvetica,sans-serif;"><b>Title</b></span><br>
Content</td>
</tr>
<tr>
<td style="width: 87px; height: 107px;"><span style="font-family:arial,helvetica,sans-serif;"> <img align="left" alt="" border="0" height="75" src="https://mma.marshmma.com/l/644133/2019-08-28/hsmhk/644133/69076/D_I_icons_Committees.jpg" style="width: 75px; height: 75px; float: left; border-width: 0px; border-style: solid;" width="75"></span></td>
<td style="width: 424px; height: 107px;"><span style="font-family:arial,helvetica,sans-serif;"><b>Title</b></span><br>
<span style="font-family:arial,helvetica,sans-serif;">Content</span></td>
</tr>
<tr>
<td style="width: 87px; height: 107px;"><span style="font-family:arial,helvetica,sans-serif;"><img alt="" border="0" height="75" src="https://mma.marshmma.com/l/644133/2019-08-28/hslnf/644133/69034/Icons_handshake_Amethyst.jpg" style="width: 75px; height: 75px; border-width: 0px; border-style: solid;" width="75"></span></td>
<td style="width: 424px; height: 107px;"><span style="font-family:arial,helvetica,sans-serif;"><b>Title</b><br>
Content</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
i think i have a understanding of what you are trying to say, so in order to place text below, there are currently two ways that i see it. either place the text in div tag such as
<th>
<td>
<img src="https://mma.marshmma.com/l/644133/2019-08-28/hslnh/644133/69036/Icons_TrainingsHead_emerald.jpg" width="50"></td>
<td>Test Test Title content</td>
</th>
<div>Test im placing text below</div>
or another method of placing text below is by using a paragraph tag such as
<th>
<td>
<img src="https://mma.marshmma.com/l/644133/2019-08-28/hslnh/644133/69036/Icons_TrainingsHead_emerald.jpg" width="50"></td>
<td>Test Test Title content</td>
</th>
<p> test i have more text below</p>
However it looks like the that the Div tag will be more suited to you as i feel like you will be using this code in the navigation bar
I have a table, always three columns of relatively the same info.
I'm trying to get it to look like this:
So, each "cell" (in the x area) is currently two td's, one for the text and other for the image.
I'm trying to figure out how to evenly space them all across the page and put a small margin in between each one.
Currently, it looks like this
HTML:
<div>
<table>
<colgroup>
<col style="width:33%">
<col style="width:33%">
<col style="width:33%">
</colgroup>
<tbody>
<tr>
<td class="cellData">
<h2><u>Brennon Huels</u></h2>
<p id="email">Meghan35#hotmail.com</p>
<p id="phoneNumber">279-027-8862 x78041</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Xzavier Schinner</u></h2>
<p id="email">Ayla_Fritsch#hotmail.com</p>
<p id="phoneNumber">078-723-5610 x715</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Leone Mayert</u></h2>
<p id="email">Nicolette.Nicolas#yahoo.com</p>
<p id="phoneNumber">003-101-8397</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
</tr>
<tr>
<td class="cellData">
<h2><u>Moriah Howe</u></h2>
<p id="email">Carli_Friesen7#hotmail.com</p>
<p id="phoneNumber">1-837-151-2364 x2091</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Jayce Koch</u></h2>
<p id="email">Joaquin.Barrows#hotmail.com</p>
<p id="phoneNumber">1-227-294-3980 x9561</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Mekhi Haag</u></h2>
<p id="email">Neva3#hotmail.com</p>
<p id="phoneNumber">(682) 411-5607 x6897</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
</tr>
<tr>
<td class="cellData">
<h2><u>Merl Kshlerin</u></h2>
<p id="email">Harold_Deckow#yahoo.com</p>
<p id="phoneNumber">627-951-5298 x726</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
</tr>
</tbody>
</table>
</div>
CSS:
table{
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
tr{
display: block;
padding: 5px;
margin-bottom: 10px;
}
table td{
border:3px solid red;
width:33%;
padding-right: 10px;
}
tr td{
margin: 10px;
width: 33%;
}
td img{
/*display: block;*/
vertical-align: middle;
padding: 4px;
}
tr p{
margin: 0px;
padding-left: 10px;
}
I've tried playing with the classes to no avail, and tried applying this answer but also didn't work, so I'm stuck.
Any ideas or help would be greatly appreciated!
Edit: if a table is the wrong way to go, I'm open to alternatives...I'm still learning html so just did a table because since I wanted something that looks like it, but no other reason.
When you create a table with
table-layout: fixed;
and it consumes 100% width. Then you try to create 4 columns (10%, 10%, 40%, 40%)
However, some rows are only 2 columns long so we use colspan="2", this however breaks the predefined width value and distributes everything evenly.
My current solution is to have nested tables in td tags.
Is there a better way to do this or stop the colspan from breaking my width?
A simple 2 column example that breaks is below:
EDIT: CODE Updated the code for a better example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table style="width: 100%">
<caption>Table of Contents</caption>
<tbody>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>3</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
UPDATED WITH SOLUTION
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="3">
<div>Table of Contents</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td>
<div>3</div>
</td>
<td>
<div>-</div>
</td>
<td>
<div>Chapter Name</div>
</td>
</tr>
</table>
</body>
</html>
CSS
table {
table-layout: fixed;
}
.short {
width: 5%;
}
.long {
width: 90%;
}
table {
table-layout: fixed;
}
.short {
width: 5%;
}
.long {
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="3">
<div>Table of Contents</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td>
<div>3</div>
</td>
<td>
<div>-</div>
</td>
<td>
<div>Chapter Name</div>
</td>
</tr>
</table>
</body>
</html>
You can use colgroup (original answer here)
html * {
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
table-layout: fixed;
width: 100%;
}
th,
td {
padding: 15px;
word-break: break-all;
border: 1px solid black;
}
.short {
width: 5%;
}
.long {
width: 95%;
}
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="2">
<div style="font-size: 300%;">Table of Contents</div>
</td>
</tr>
<tr>
<td>
<div>1</div>
</td>
<td>
<div>2</div>
</td>
</tr>
</table>
Is there any reason you can't simply specify table { width: 100%; } instead of using table-layout: fixed; ?
html *
{
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
width:100%;
}
th, td {
padding: 15px;
word-break: break-all;
background:#ccc;
}
https://jsfiddle.net/L05v6s8z/
Have you considered using a caption tag?
The caption element is semantically defined as the title for a table (which is what you are trying to do) and has been available since at least HTML 3.2. It is compatible with all browser versions, including IE6. You can style it with CSS to achieve the look & feel you're after.
html *
{
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
table-layout: fixed;
}
table caption {
font-size: 300%;
}
th, td {
padding: 15px;
word-break: break-all;
}
<table style="width: 100%">
<caption>Table of Contents</caption>
<tbody>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;">
<div>Name</div>
</td>
</tr>
</tbody>
</table>
I have a HTML table whose data is coming from the database. Currently the data is getting filled from the center instead of top. Like below:-
Have a look at the below HTML
<table style="width: 100%; height: 550px; text-align: center" border="1" runat="server"
id="tbl1Details">
<colgroup>
<col width="5%" />
<col width="45%" />
</colgroup>
<tr>
<td colspan="4">
<asp:Label ID="lblpltfrm_Number" runat="server" Style="height: 20px;"></asp:Label>
</td>
</tr>
<tr>
<td align="center" style="height: 20px;">
SR.
</td>
<td align="center" style="height: 20px;">
Stop
</td>
<td align="center" style="height: 20px;">
Time
</td>
<td align="center" style="height: 20px;">
Status
</td>
</tr>
<tr>
<td id="tTime" runat="server">
<div id="list" runat="server" style="font-size: 25px;">
</div>
</td>
<td>
<table style="width: 100%">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tr>
<td style="text-align: left">
<div id="dv_FromStop" style="font-size: 25px;" runat="server">
</div>
</td>
<td style="text-align: left">
<div id="Dv_ToStop" style="font-size: 25px;" runat="server">
</div>
</td>
</tr>
</table>
</td>
<td>
<div id="dv_Time" style="font-size: 25px;" runat="server">
</div>
</td>
<td>
<div id="dv_status" style="font-size: 25px;" runat="server">
</div>
</td>
</tr>
</table>
Use the following CSS:
table td {
vertical-align: top;
}
Or in HTML, use either:
<td valign="top">
<td style="vertical-align: top;">
The second one is preferred because, valign is deprecated.
You need to use vertical alignment.
css:
td { vertical-align:top; }
Use vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
In CSS:
td { vertical-align: top; }
In HTML:
<td valign="top">...</td>