HTML code table

[BernadettP]

Hi all,

I’m trying to display a section of data in an HTML email template, directly above a table. My goal is for the text and the table to appear immediately below one another, with no unnecessary spacing or empty lines in between.

The issue:
No matter how I format it, there’s always a huge (~8–10 lines) empty space between the text and the table. This space doesn’t exist in the HTML code, but it still shows up in Gmail’s preview.

Even ChatGPT has given up trying to fix it.

This what I want:

and this is what it will be

this is my html formula:

Please help

Thank you

[Steve]

I believe <br> should be <br/>.

It’s been awhile since I worked with HTML templates, but my recollection is that many line breaks in the template are preserved. Try removing some line breaks and see what happens.

<span style="display: inline-block; font-family: Arial, sans-serif; font-size: 13px; margin: 0; padding: 0;
line-height: 1;"><b>Káresemény adatai:</b><br/><b>Okozó:</b> <<[Okozó?]>><br/><b>Rendszám:</b> <<[Rendszám].[Rendszám]>><br/><b>Gépjárművezető:</b> <<[Sofőr neve]. [Név]>><br/><b>Káreset leírása:</b> <<[Káreset leírása]>><br/><b>Sérülés leírása:</b> <<[Sérülés leírása]>></span><span style="display: inline-block; margin: 0; padding: 0; line-height: 1;"><table border="1" cellpadding="0" cellspacing="0" style="margin: 0; border-collapse: collapse; font-
family: Arial, sans-serif; font-size: 12px; line-height: 1;"><thead style="background-color: #f2f2f2;"><tr><th style="padding: 2px;">Kód</th><th style="padding: 2px;">Tipus</th><th style="padding: 2px;">Dátum</th><th style="padding: 2px;">Fájl</th></tr></thead><tbody><<START: [Alkáresemény dokumentumok]>><tr><td style="padding: 2px;"><<[Aliktatószám]>></td><td style="padding: 2px;"><<[Irat tárgya]>></td><td style="padding: 2px;"><TEXT([Dátum], "YYYY.MM.DD")>></td><td style="padding: 2px; text-align: center;"><a href="<<[File]>>" target="_blank"><img src="https://img.icons8.com/ios-filled/14/000000/pdf.png" alt="PDF" style="height: 14px; width: 14px; vertical-align: middle;" /></a></td></tr><<END>></tbody></table></span>

Attn @SkrOYC

[Denzil_Snyman]

I also get unnecessary spaces when the HTML is nicely formatted like yours, so usually I remove all formatting/visual “beautification” and line breaks as Steve mentioned.

One back to back long code of HTML always comes out cleanest on my side.

[SkrOYC]

@BernadettP Please try this one.

<span style="display: inline-block; font-family: Arial, sans-serif; font-size: 13px; margin: 0; padding: 0; line-height: 1;">
	<b>Káresemény adatai:</b><br/>
	<b>Okozó:</b><<[Okozó?]>><br/>
	<b>Rendszám:</b><<[Rendszám]>><br/>
	<b>Gépjárművezető:</b><<[Sofőr neve]>><br/>
	<b>Káreset leírása:</b><<[Káreset leírása]>><br/>
	<b>Sérülés leírása:</b><<[Sérülés leírása]>>
</span>
<span style="display: inline-block; margin: 0; padding: 0; line-height: 1;">
	<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="margin: 0; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 12px; line-height: 1; border: 1px solid #f2f2f2;">
		<thead style="background-color: #f2f2f2;">
			<tr>
				<th style="padding: 2px;">Kód</th>
				<th style="padding: 2px;">Típus</th>
				<th style="padding: 2px;">Dátum</th>
				<th style="padding: 2px;">Fájl</th>
			</tr>
		</thead>
		<tbody>
			<<START: [Alkáresemény dokumentumok]>>
			<tr>
				<td style="padding: 2px;"><<[Aliktatószám]>></td>
				<td style="padding: 2px;"><<[Irat tárgya]>></td>
				<td style="padding: 2px;"><<TEXT([Dátum], "YYYY.MM.DD")>></td>
				<td style="padding: 2px; text-align: center;">
					<a href="<<[File]>>" target="_blank">
						<img src="https://img.icons8.com/ios-filled/14/000000/pdf.png" alt="PDF" width="14" height="14" style="height: 14px; width: 14px; vertical-align: middle; display: block; border: 0;" />
					</a>
				</td>
			</tr>
			<<END>>
		</tbody>
	</table>
</span>

In general, HTML in email is problematic but not impossible to deal with!

I suggest you to use this site as a good reference of dos and don’ts

Good Email Code

Let me know if that works!

Thx @Steve

[BernadettP]

Dear Steve,
the preview:

And the email:

Lol

There was some error in the HTML formula that wouldn’t let me insert it, but I have the correct formula based on yours.

<span style="display: inline-block; font-family: Arial, sans-serif; font-size: 13px; margin: 0; padding: 0; line-height: 1;"><b>Káresemény adatai:</b><br/><b>Okozó:</b> <<[Okozó?]>><br/><b>Rendszám:</b> <<[Rendszám].[Rendszám]>><br/><b>Gépjárművezető:</b> <<[Sofőr neve].[Név]>><br/><b>Káreset leírása:</b> <<[Káreset leírása]>><br/><b>Sérülés leírása:</b> <<[Sérülés leírása]>></span><br/><span style="display: inline-block; margin: 0; padding: 0; line-height: 1;"><table border="1" cellpadding="0" cellspacing="0" style="margin: 0; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 12px; line-height: 1;"><thead style="background-color: #f2f2f2;"><tr><th style="padding: 2px;">Kód</th><th style="padding: 2px;">Tipus</th><th style="padding: 2px;">Dátum</th><th style="padding: 2px;">Fájl</th></tr></thead><tbody><<START: [Alkáresemény dokumentumok]>><tr><td style="padding: 2px;"><<[Aliktatószám]>></td><td style="padding: 2px;"><<[Irat tárgya]>></td><td style="padding: 2px;"><<TEXT([Dátum], "YYYY.MM.DD")>></td><td style="padding: 2px; text-align: center;"><a href="<<[File]>>" target="_blank"><img src="https://img.icons8.com/ios-filled/14/000000/pdf.png" alt="PDF" style="height: 14px; width: 14px; vertical-align: middle;" /></a></td></tr><<END>></tbody></table></span>

@SkrOYC
Unfortunately, your HTML code produced the same result as mine. There was a large blank space between the table and the text, but thank you very much for your help,

Thank you @Steve and @SkrOYC