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.
Related
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.
I just want to decrease the size of space between this two images I put in the table. I'm so sorry I know this is just a basic html code. Please help me.
This is the code:
<table class="sample" width="200" border="0" cellpadding="1" cellspacing="1" >
<tr>
<td align="center" valign="center">
<a href="#" ><img src="images/reception2.png" alt="" /></a>
</br>
SERVICES
</td>
<td align="center" valign="center">
<img src="images/services2.png" alt="" />
</br>
OFFERS
</td>
</tr>
</table>
It's hard to advise without seeing the CSS you are using. You could try adjusting the width of the table.
Demo here: http://codepen.io/sol_b/pen/VmQGzr
You can remove the inline style on your table and then target it in your CSS, like this:
.sample {
width: 200px;
}
Change the width to whatever works.
you can use margin property of CSS. for your question margin-right for the SERVICES img and margin-left for the OFFERS img are proper solutions.
Try to add this snippet:
<img src="images/reception2.png" alt="" style="margin-right: -25px"/>
<img src="images/services2.png" alt="" style="margin-left: -25px"/>
Also, You can change the number range to finally find the suitable numbers.
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
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
Hi i have a issue in outlook 2010 i want to give 10px space between the tds but its not working. please help.
<table style="cellspacing:0px;cellpadding:0px;border:0;border-spacing:10px;">
<tbody>
<tr>
<td id="cont0" align="top" style="border-collapse:collapse;padding:0;overflow: hidden;height: 96px; width: 96px;margin-right:auto;vertical-align:top;border: 1px solid #CCCCCC;">
<a id="link0" href="#" style="border:0">
<img id="previewimage0" style="border:0" src="http://i.sample.com/00/s/MTY2WDIwMA==/$(KGrHgoS,KEEk,K!Bv9GBQIi!CNhLg~~60_0.JPG">
</a>
</td>
<td id="cont1" align="top" style="border-collapse:collapse;padding:0;overflow: hidden;height: 96px; width: 96px;margin-right:auto;vertical-align:top;border: 1px solid #CCCCCC;">
<a id="link1" href="#" style="border:0">
<img id="previewimage1" style="border:0" src="http://i.sample.com/00/s/MTQ5WDIwMA==/$(KGrHqERQ,IE+tWswcklBQIi!C8rQg~~60_0.JPG">
</a>
</td>
</tr>
</tbody>
</table>
try adding a table cell between them with the width of 10px :
</td>
<!-- your first td ends -->
<!-- the spacer td -->
<td align="top" width="10> </td>
<!-- your second td begins -->
<td id="cont1" align="top">
Works for my email templates everytime in all email clients.
Try adding the cellspacing property to the table tag
<table cellspacing="10" style="border:0;">
Marks answer will do the job perfectly, don't add cellspacing or cellpadding as it is incredibly inconsistent across email clients, I would also say don't use margin and padding for the same reason but in rare cases where you cannot use any other spacing method you wont have any choice. For your border I would also avoid using the shorthand and set each part of the border individually:
border-color: #ffffff;
border-style: solid;
border-width: 1px;
as some clients will just ignore the shorthand version.
where possible you should use html styling rather than inline css, as even though inline is the only real way to use css, html is still more widely recognised across older email clients.
valign="top"
cellpadding="0"
cellspacing="0"
all of these can be added to the tag rather than including them in styles. This will ensure any old clients or even just company webmails wont kick up a fuss.
I know you didn't ask about it, but just for consistencies sake I thought I would point that out.