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
Related
I am trying to create a HTML Email signature where I place 2 images side by side.
Here is the html code I am using:
https://codepen.io/klodoma/pen/mdeQYrB
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
body{
background-color: white;
margin: 0;
}
img { display: block;}
.row {
white-space: nowrap;
display: flex;
}
</style>
</head>
<body>
<div class="row" style="white-space:nowrap;">
<img src="https://i.postimg.cc/DyCPXxdQ/hair-left.png" alt="Left Image"/>
<img src="https://i.postimg.cc/Mpvbb1dC/hair-right.png" alt="Right Image"/>
</div>
<table border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0;">
<tr>
<td><img src="https://i.postimg.cc/DyCPXxdQ/hair-left.png" alt="Left Image"/></td>
<td><img src="https://i.postimg.cc/Mpvbb1dC/hair-right.png" alt="Right Image"/></td>
</tr>
</table>
</body>
</html>
I tried:
creating a DIV
creating a TABLE
In Html both look very good, but when I paste this code in an email client (Outlook for example) there are some problems.
If the width of the emails page is not enough, then the div shifts the images(even though word-wrap is disabled).
In the table version there is a vertical space I couldn't get rid of.
Any ideas to solve this? I don't care which solution will work, divs or tables.
There are a few aspects here:
Outlook only reads the height and width numerical values (and if they're outside of the style tag too I think). Here you can see below I've added redundancy to my approach.
<img src="https://imageurl....." alt="alt-text" height="48" width="48" style="display: block; width: 48px; height: 48px;" />
You may also find it helpful to set the width of your initial table at the same point where you have applied the margin and padding resets.
To remove any unwanted vertical space you should also reset the padding to 0 in the <td> elements I believe.
I have tried EVERYTHING I could find. The famous 1px vertical gap on the right side of images still doesn't seem to have a solid fix! Please someone help to to resolve this. I literally have no hair left after pulling them out one by one!
Plesae can someone help?
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{
margin:0;
padding:0;
}
img{
border:0 none;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a img{
border:0 none;
}
.imageFix{
display:block;
}
table, tr, td{
border-collapse:collapse;
}
#bodyTable{
height:100% !important;
margin:0;
padding:0;
width:799px !important;
max-width: 799px !important;
}
</style>
<table bgcolor="red" width="799" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="176" height="115">
<img src="https://www.htref.co.za/signatures/images/img01-01.png" class="imageFix" alt="logo" width="176" height="115">
</td>
<td width="623" height="115">
<img src="https://www.htref.co.za/signatures/images/img01.png" class="imageFix" alt="logo" width="623" height="115">
</td>
</tr>
</tbody>
</table>
Example show of 1px vertical gap on the right side of the image
bgcolor="red"
Is it necessary? Without this the gap disappeared.
On my computer, no border appear !
Put a lightgrey background-color to body, anything at the right of the image.
Why using a table when you can do this with Flexbox, for example ?
Have you tried not put any white space before or after your images? I kind of remember that whitespace in your source code HTML is collapsed but still rendered as a space character in the output. So no space, tab or newline character before or after your img tag.
But if this is all you signature has, you don't need a table (which is a very 90s way to align pictures). You could use directly your imgs (but still without whitespace before or after your tags):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
width: 799px
}
</style>
</head>
<body><img src="https://www.htref.co.za/signatures/images/img01-01.png"
alt="logo" width="176" height="115"
/><img src="https://www.htref.co.za/signatures/images/img01.png"
alt="logo" width="623" height="115"
/></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 am coding a html email, the problem is that I have a black border around my table, when I slcide psd make it no image and set background color like this
<td width="640" height="2" colspan="16" style="background-color:#666666;">
left and right <td> look ok in html and the email client, but the upper and bottom one are bit expanded, see attached image for this
This is in my laptop upper <td>
and this is how it looks in emails
code is simple as
<td width="640" height="2" colspan="16" style="background-color:#666666;">
</td>
What's the problem with it? Please help ..!
Outlook expands all table cells to a minimum of 19px high. This is something you'll need to work around in html email design. One method is to create a 20px high image that has your 2px border across the bottom.
Add this to your CSS and see how it works:
body
{
margin: 0;
padding: 0;
}
try adding
style="border-collapse:collapse;"
to your
<table>
like this
<table style="border-collapse:collapse;">
Your table has borders, as is the standard. This is my snippet for all of my tables' structure-
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left">
</td>
</tr>
</table>
Is there a spacer gif in your TD ?
If yes, the trick is simple :
<img src="SPACER" border="0" style="display:block;" height="x" width="y" alt="" />
This will collapse the white space around your images. Make sure you set the same height to your td and img also.
I think you might need to add some position property
Try position: absolute
I have an HTML page which repeats the following table multiple times. Currently the two cells equally share half the page. I'd like to place a border between them that runs vertically down the centre of the page. I've tried placing right borders on the cells of the left cell, but it doesn't produce a uniform border because of the spacing between the cells, and the spacing between the separate tables.
Does anyone have any suggestion as to how I could create this uniform border through the centre of the page?
<table class="ex2" width="100%">
<tr>
<td width=50%>Test Title - Left</p></td>
<td width=50%><p style="font-family:verdana;color:red">Test Title - Right</p></td>
</tr>
<tr>
<td width=50%><p style="font-family:verdana;color:grey">Test Body - Left</p></td>
<td width=50%><p style="font-family:verdana;color:grey">Test Body - Right</p></td>
</tr></table>
Your table does not mention what css is on it already. If there is no top/bottom margins on the table then using border-collapse: collapse on the table works, see http://jsfiddle.net/GY7CW/3/.
If you have top/bottom margin on the tables, and don't care about IE7 or below, then you can use a wrapping element styled to give you the border via a :before pseudo element, see http://jsfiddle.net/GY7CW/2/.
To remove the extra space between the cells you could use:
<style type="text/css">
table.ex2{
border-collapse: collapse;
}
</style>
Okay I've figured out a simple although potentially simplified solution (if you want to use js/jquery/etc)
There are probably better ways to do what you want (i.e not using tables) but here you go haha
<style>
.addborder {
border-right: 1px solid #666;
}
.addspace {
padding-left: 20px;
}
.ex2 { padding: 0px; margin: 0px; }
</style>
for the css and
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ex2">
<tr>
<td class="addborder" width=50%>Test Title - Left</p></td>
<td class="addspace" width=50%><p style="font-family:verdana;color:red">Test Title - Right</p></td>
</tr>
<tr>
<td class="addborder" width=50%><p style="font-family:verdana;color:grey">Test Body - Left</p></td>
<td class="addspace" width=50%><p style="font-family:verdana;color:grey">Test Body - Right</p></td>
</tr></table>
for your table html ;)
Hope this helps!