I want to create a table in HTML with this structure:
The contents will then to fit the cells.
I'm having trouble working out exactly what sizes need to be set to what to get this to work. The white space can be cellspacing or padding or anything else that works, but I can't work out what percentage to set it to. I'm more concerned about width than height, here, but the vertical and horizontal spacing should be equal in absolute terms.
For instance, if I wanted it more simply to be 10% - 10% - 80%, setting the spacing to 10% doesn't seem to create this.
<table style="border:1px solid black;width:100%">
<tr><td >ffff</td><td rowspan="2" style="border:1px solid black">hhhhh</td></tr>
<tr><td style="border:1px solid black">rrrr</td></tr>
</table>
your this table structure for this
Try this code:
DEMO
<table cellpadding="0" cellspacing="0" width="100%" height="100%" style='background:red;'>
<tbody>
<tr >
<td style="width: 71.2%;
height: 49.55%; border-bottom: 4px solid white">
Insert header image
</td>
<td rowspan="2" style="height: 49.55%; width: 27.62%; border-left: 4px solid white;">
Insert header image
</td>
</tr>
<tr>
<td>
Insert header image
</td>
</tr>
</tbody>
</table>
Related
I put an image of height 900px inside a table also of height 900px. But for some reason an added 5px height automatically gets added to the bottom of the table. Here is the code. Could someone explain why this is happening? Thanks.
<body style="margin: 0; padding: 0;">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="650" height="900" style="border-collapse: collapse;" style="border-top: 1px solid white;">
<tr>
<td><img src="dummy.png" alt="#" style="width: 296px; height:auto;"></td>
</tr>
</table>
</body>
An image is an inline element by default. Add the following style to your image and the white space will disappear.
img{display:block}
jsfiddle demo
It's a known problem of tables and td
Set the image as background of the td
http://jsfiddle.net/F6Gds/30/
<body>
<table align="center" border="1" width="296" height="900">
<tr>
<td style="background-image:url(http://dummyimage.com/296x900/ccc/fff);">
</td>
</tr>
</table>
</body>
I want to write the simpliest example of the following image
My example should work in ie6,7,8,9 and so on. So I can't use float or anything helpfull. I made jsFiddle using table
<table width="500px">
<tr>
<td width="45px"><span>e-mail</span>
</td>
<td align="center"> <div style="border-bottom: 1px solid;">test#gmail.com</div></td>
</tr>
<tr>
<td width="45px"></td>
<td align="center"> <span>(email)</span>
</td>
</tr>
</table>
, but the bottom (email) have margin from the line.
And I want that everything was like on my first image. Thanks
I have tried this.
Check this jsFiddle link
<table width="500px" style="padding:0px; border-spacing:1px">
<tr>
<td width="45px" style="padding:0px"><span>e-mail</span>
</td>
<td align="center" style="padding:0px"> test#gmail.com <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td>
</tr>
<tr>
<td width="45px" style="padding:0px"></td>
<td align = "center" style = "margin-top:0px; padding:0px">(email)</td>
</tr>
The “margin” you are referring to is partly spacing between cells, partly padding inside the cell, partly leading, and partly spacing in the font. In your approach, the simplest fix is probably to set cell spacing to zero and to move the cell content upwards a bit, using relative positioning.
<table width="500" cellspacing="0">
<tr>
<td width="45">e-mail
</td>
<td align="center" style="border-bottom: 1px solid">test#gmail.com</td>
</tr>
<tr>
<td width="45"></td>
<td align="center"><span style="position: relative; top: -0.15em">(email)</span>
</td>
</tr>
</table>
apply border-spacing: 0 to the table's style (border-collapse: collapsewould work too, aswell as cellspacing attribute)
add padding: 0 to the tdcontaining <span>(email)</span>
To increase the space between the upper e-mail-adress and the bottom border (which you did not mention explicitly but is not the same as your example image):
move the border-bottom style from div to its parent td
add a padding-bottom to the same td
I have a HTML newsletter table, to structure the content I want horizontal borders. Somehow the horizontal borders always have 100% width according to the table width. How can I achieve 20px padding to the left and right of it?
js fiddle
HTML
<table border="1" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr style=" padding: 0 20px 0 20px;">
<td style=" padding: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
you can't able to do what you want in current code
you need to do some trick
see this
<table border="0" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr >
<td> <hr style=" border:0px; margin: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
i have used (HR) tag in 2nd table row, this will solve your problem ☺
A border does not take padding into account, but it does with margin. See the CSS Box Modell for reference.
On CSS, there is the cascade. It parses top-dowmn and specific overrides general
There are many ways to achieve what you want (including ways in which we have to change the HTML code). Suppose you want to keep the table layout. You can just set the border-left and border-right of the middle td like this:
tr.hr > td {
border:none;
border-left:20px solid white;
border-right:20px solid white;
background:red;
height:3px;
}
HTML:
<tr> <td> Banana </td> </tr>
<tr class='hr'> <td></td></tr>
<tr> <td> Apple </td> </tr>
Demo.
Note that the color of border-left and border-right should be the same to the background color of your table. (they are all white in the demo).
Please have a look at the HTML email boilerplate.
http://htmlemailboilerplate.com/#f1
Limitations using CSS: http://www.campaignmonitor.com/css/. It solves may issues with ie. spacing amongst others and email clients rendering issues (Gmail, Outlook,Yahoo, ...)
HTML emails need to respect 600px width as it is a default for the preview.
To test the HTML email (if no mail configured on a testing server) you could use http://putsmail.com/ Check also on smart phone as many people tend to read mail on it
You can achieve the effect using a combination of 3 cells where the first and last use spacers and the middle can be a red solid color gif.
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
<td valign="top" width="560">
<img src="red.gif" width="560" height="3" alt="" />
</td>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
</tr>
</table>
I'm trying to align two table's borders. Please take a look on this small example
http://jsfiddle.net/kf82J/2/
On Internet Explorer and Chrome, the right border is not aligned, but works on Firefox.
My goal is to be able to draw a line that "aligns" width the middle of the title, it's difficult to explain with words, just check the jsfiddle.
Same code below
<table style="width:100%;border-collapse: collapse;">
<tr style="height: 10px;">
<td style="width: 1px;">
</td>
<td rowspan="2" style="font-size:19pwhite-space:nowrap;x;width:1px;">
Title
</td>
<td style="height:50%;">
</td>
</tr>
<tr style="height: 10px;">
<td>
</td>
<td style="height:50%;border-top: 1px solid black; border-right: 1px solid black;">
</td>
</tr>
</table>
<table style="width:100%;border-collapse: collapse;border:1px solid black;border-top:none;">
<tr>
<td>Content</td>
</tr>
</table>
Remove below line from css for table
border-collapse: collapse;
It worked for me in fiddle.
Alternately you could try adding a transparent border for the first table
<table style="border:1px solid transparent;>
I'm trying to make a HTML email template (difficult at the best of times) and I am trying to have a double line between the header and content. I'm trying to use border styles to achieve this like so:
<div class="1"> header image </div>
<div class="2"> random text </div>
using a head style sheet:
.1 {
margin:0;
padding: 0;
border-bottom:thin solid red;
}
.2 {
margin:0;
padding: 0;
border-top:thin solid yellow;
}
it seems to work fine in WLM and other email clients, but not outlook.
In my experience working with email HTML and Outlook, I find I always come back to using tables for layout. The many different email clients do many weird things to HTML, but table layouts seem to be the most cross-client compatible. So, consider something like this:
<table cellpadding="0" cellspacing="0" width="100%" style="border-bottom: solid 1px red;">
<tr>
<td> header image </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="border-top: solid 1px yellow;">
<tr>
<td> random text </td>
</tr>
</table>
I haven't tested this, but it's what I'd try first.
Oke to sart with, the easiest way to make a nice e-mail template is with tables ( not sure if you use them. Try to link as less as possible to your css but do style="" as much as possible.
And take a look at this one :OVER HERE! this one helped me out alot
I would suggest you use inline CSS for the border style and hex values for the color. I have changed your code to old school CSS. Tried and tested on Litmus
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="ffffff">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="50%" style="border-bottom: solid 1px #ff0000;">
<tr>
<td> header image </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="line-height: 20px; font-size: 20px;"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="50%" style="border-top: solid 1px #ffff00;">
<tr>
<td> random text </td>
</tr>
</table>
</td>
</tr>
</table>