I am fairly new to HTML and CSS, I've been working on creating a clickable banner by using a table, but I'm having trouble getting rid of white spaces between my rows and spliced images.
This is what the table looks like in a browser
And below is my code for the table:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>A Spot Banner</title>
</head>
<body>
<table style="width: 100%;">
<tbody>
<tr>
<td colspan="3"><img src="images/top%20header%201.jpg" alt="TOP BANNER" /></td>
</tr>
<tr>
<td><img src="images/top%20row%20left%20side%201.jpg" alt="SECOND BANNER" /></td>
<td><img src="images/last%20image%20to%20line%20with%20top%20header%201.jpg" alt="THIRD BANNER" /></td>
</tr>
<tr>
<td><img src="images/bottom%20row%20left%20side%202.jpg" alt="FOURTH BANNER" /></td>
</tr>
</tbody>
</table>
</body>
</html>
I've tried inline styling using padding and margin, but both seem to affect the placement of the other banners, specifically the third banner.
I'm quite new and not too sure what else to try, does anyone have any advice or resources I can use to figure this out?
Try adding this CSS:
table {
border-collapse: collapse;
}
td {
padding: 0;
}
Border-collapse will do just that: remove the space in between each of the table data (<td>) elements.
Padding will also remove any leftover space between these elements.
Related
I created an email template that uses a two-column layout. This was my approach:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
It works great on desktop! I have a two-column layout exactly as I wanted it. The problem is on phones because screens are too small for a two-column layout. I need one picture per row, not two, for mobile devices. What I could do is to use float:left;width:100% for the <td> elements that contain the images so that I have the one column layout that I need. However, that float:left;width:100% should apply only when #media screen and (max-width:450px) for example. But there is no way to use #media screen and (max-width:450px) using inline CSS. Remember, this is for an email template. So I cannot invoke external CSS files or add CSS to the <head> of the page because this is code that will be sent for an email template.
I found at https://kb.benchmarkemail.com/using-css-in-html-emails/ this advice, but that is not a solution for responsive tables:
Things To Do
Use tables for layout. Tables are more consistently supported. We
recommend that you place your CSS code inline to your content. It
should look something like this: Your content
here.... Declare width, cellpadding, and cellspacing for all
tables and table cells. This will result in a fixed width for the
template. Use hspace and vspace tag attributes to add whitespace
around an image. Margin and padding inline styles are supported by
most, but not all email clients
Any ideas? Thank you.
Google offers CSS support: https://developers.google.com/gmail/design/css as A. Meshu pointed out in his comments to my question.
I found at https://templates.mailchimp.com/development/responsive-email/ that they say this:
"You can leave the media query styles in the <head> of your email, as
clients that support media queries don’t strip out the <head> or
<style> areas."
That made me think I had to send a complete <HTML> document, so I even included <html><head><style type="text/css">..........</style></head><body>...........</body></html>.
For my other email templates I just send code for the <body>. I start the template with a <div> and everything works. But for this template now I am using this structure:
<html>
<head>
<style type="text/css">
#media screen and (max-width:450px) {
.responsive {
float:left!important;
width:100%!important
}
}
</style>
</head>
<body>
..........
</body>
</html>
Thanks to A. Meshu for providing very important hints in his comments to my question to figure it out.
Since table elements are block-level, I would say to change those tds into nested tables like it's 1999, and then float the first one left:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<table style="float:left;">
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
</tr>
</table>
<table>
<tr>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
This is my first post here, sorry if my formatting sucks.
Trying to assemble image slices together inside a to create the effect of a full size image. FF and edge both display the image correctly however chrome appears to be generating different heights despite all images in the row having the same height (they do have different widths). The problem only occurs when giving the table a set width (and shrinking the image size to fit within the table )
Ive tried changing .img to height:100% but that just changes the height to the full length of the original image warping it. Ive also tryed making height 100% with no luck
please note that the image pieces all have different heights per row and different widths per column do hardcoding is not possible
<style>
tr,
td,
table,
img,
tbody {
padding: 0;
}
table {
border-spacing: 0;
width: 300px;
}
img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src="https://i.imgur.com/OfAxJus.jpg"></td>
<td><img src="https://i.imgur.com/N1bcNYU.jpg"></td>
<td><img src="https://i.imgur.com/qCkFcIW.jpg"></td>
<td><img src="https://i.imgur.com/xqBG6zQ.jpg"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/bddCcSn.jpg"></td>
<td><img src="https://i.imgur.com/7ySyHqq.jpg"></td>
<td><img src="https://i.imgur.com/ulHRT4Q.jpg"></td>
<td><img src="https://i.imgur.com/reU0Gyr.jpg"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/rBsFVNI.jpg"></td>
<td><img src="https://i.imgur.com/ikub1e4.jpg"></td>
<td><img src="https://i.imgur.com/0RVlEWg.jpgg"></td>
<td><img src="https://i.imgur.com/v22RK32.jpg"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/1nLECe5.jpg"></td>
<td><img src="https://i.imgur.com/R9hI0ka.jpg"></td>
<td><img src="https://i.imgur.com/Bs8pQEY.jpg"></td>
<td><img src="https://i.imgur.com/ndLkcTb.jpg"></td>
</tr>
</table>
What can i do to make it so chrome doesnt generate the different heights?
For example, inside a table I have an image inside a td, and some text at right td:
<table>
<tr>
<td><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
<td>test1<br/>test2<br/>test3</td>
</tr>
</table>
Now I want the height of image follows the height of its right td automatically:
When the right td is shorter than the image, the image is scaled down:
When the right td is taller, the image is scaled up:
Is there any way to do this? I tried:
<table style="position:relative;height:auto;">
<tr style="position:relative;height:auto;">
<td style="position:relative;height:auto;"><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" style="position:relative;height:auto;"/></td>
<td style="position:relative;">test1<br/>test2<br/>test3</td>
</tr>
</table>
but I can't get my desired result.
You could try setting the max-height CSS rule to 100%
Like this:
<img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" style="max-height:100%;"/>
I believe it will be easy to do it with jQuery than plain CSS.
You can try below solution if that helps:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td id="first"><img
src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" /></td>
<td id="second">test1<br />test2<br />test3<br /> test1<br />test2<br />test3<br />
test1<br />test2<br />test3
</td>
</tr>
</table>
<script type="text/javascript">
var h1 = $("#second").css("height");
console.log(h1);
$("img").css("height", h1);
</script>
</body>
</html>
Hy all. I have problem with my basic HTML code. My task is to combine 4 picture parts without wisible margins. Im allowed to use only HTML code without CSS elements, and I must use table.
My problem is that i can't get rid out of space between rows. I narowed out that border spacing comes from webkit browser table stylesheet. Is there a way using only HTML code to remove this spacing.
Forgot to mention picture sizes is 3 - 200px x 200px and 1- 600px x 200px
Chrome debugger shows that extra 4px is inherited from table stylesheet
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
border-color: gray;
}
P.s. If i set picture height="100%" and width="100%" than i achieve my goal, but im no shure is this a proper way to do it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>LR1</title>
</head>
<body>
<!--Using table without CSS-->
<table bgcolor="green" border="0px" cellpadding="0px" cellspacing="0px">
<tbody>
<tr>
<td ><img src="p_01.jpg" alt="Part 1" width="200px" height="200px"></td>
<td ><img src="p_02.jpg" alt="Part 2" width="200px" height="200px"></td>
<td ><img src="p_03.jpg" alt="Part 3" width="200px" height="200px"></td>
</tr>
<tr >
<td colspan="3">
<a href="http://en.wikipedia.org/wiki/Swan" target="_blank"><img src="p_04.jpg" alt="Part 4" width="600px" height="200px">
</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The only way I found to solve your problem is adding style="display: block" to the image. The display: inline by defaults add extra space to the cell.
I was given some sliced images to put together in an html. I did not slice them myself. I built a table. For each row, I placed 4 images with borders that need to be aligned. The final html should look like a grid with the borders of all the images aligned correctly. However, I noticed that in a specific row, the 4 original images do have the same dimensions. Eg.
I've tried changing the width and the height of all the images, no margin/padding in the table and the cells. But, the borders are not aligned horizontally and vercally. Here's an example of one of the rows with original dimensions of the images. I know that some of the rules might be redundant but I was just trying everything without finding a solution.
Thank you for your quick feedback.
<html>
<head>
<meta charset="utf-8">
<title>No name</title><style type="text/css">
img {vertical-align: top; margin:0 auto 0 auto; padding:0}
table, td {border:0; padding:0; margin:0; border-collapse: collapse; cellpadding:0; cellspacing:0;}
</style>
</head>
<body>
<pre width="" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td id="imgA"><img src="ImageA" width="187" height="127" alt=""/></td>
<td id="imgB"><img src="ImageB" width="184" height="127" alt=""/></td>
<td id="imgC"><img src="ImageC" width="182" height="126" alt=""/></td>
<td id="imgD"><img src="ImageD" width="187" height="126" alt=""/></td>
</tr>
</pre>
</body>
</html>
you can try this :
table, td img
{
width :100%;
height:100%
}
Apply border in img class