I'm trying to figure out why my tables cells are not displaying at the height I specify:
<html>
<head>
</head>
<body>
<table style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px;" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" height="842" width="595">
<tbody>
<tr><td height="100">Test</td></tr>
<tr><td height="100">Test</td></tr>
</tbody>
</table>
</body>
</html>
On my browser (Firefox), this page displays with each cell taking 50% of the height of the table (covering the whole table) instead of the specified 100px each cell. I've tried every combination, setting the tr height (which actually doesn't exist), and the td height as I've posted.
I need to avoid using CSS as I'm generating HTML for emails and email clients are not very tolerant to CSS. I would like my table as much as possible to be set using HTML tag attributes.
EDIT
Now I'm really confused. Even setting the height with CSS doesn't work:
<table style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px;" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" height="842" width="595">
<tbody>
<tr><td style="height: 100px;">Test</td></tr>
<tr><td style="height: 100px;">Test</td></tr>
</tbody>
</table>
EDIT
Someone posted a JSFiddle in the comments saying it worked. But here is a screenshot of that fiddle on my browser (Firefox):
I guess the question now is why can I not set the row height on Firefox?
Just figured it out. On Firefox you must set display: block; in the CSS or the table height will not be applied:
<body>
<table style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px; display: block;" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" height="842" width="595">
<tbody>
<tr><td height="100" style="display: block">Test</td></tr>
<tr><td height="100" style="display: block">Test</td></tr>
</tbody>
</table>
</body>
Related
I have a screenshot as shown below which I have to replicate in html/css.
Attached is the fiddle for the above screenshot which I am able replicate at this moment.
Problem Statement:
I am wondering what changes I need to make in the inline styles in the fiddle so that I am able to limit the length of a border. At this moment, it is covering the full screen.
The snippets of code which I have used in order to achieve the above screenshot are:
<tr>
<td style="text-align:left;padding-left:10%;padding-bottom:1%;">poster: donald duck</td>
<td style="text-align:center;;padding-left:10%;padding-bottom:1%;">customer: donald duck</td>
</tr>
Based on the code you gave in the fiddle,you set the width attribute in the table tag width="100%", try set it to whatever value you want.
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:
20px;
...
">
to
<table cellpadding="0" cellspacing="0" border="0" width="600" style="font-size:
20px;
...
">
You can try doing this.
You need to add margin: 0 auto; to align it to center
Set the width of the table so it will have a limit and will not occupy the whole screen.
Please see the code below.
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="50%" style="
margin: 0 auto;
font-size: 20px;
border-bottom: 2px solid #484848;
border-top: 2px solid #484848;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 5%;
padding-right: 5%;
">
<tr>
<td style="text-align:left;padding-bottom:1%;">poster: donald duck</td>
<td style="text-align:left;padding-bottom:1%;padding-left: 10%;">customer: donald duck</td>
</tr>
<tr>
<td style="text-align:left;padding-bottom:1%;">phone: 613-613-6134</td>
<td style="text-align:left;padding-bottom:1%;padding-left: 10%;">phone: 613-613-6134</td>
</tr>
<tr>
<td style="text-align:left;padding-bottom:1%;">email: dduck#gmail.com</td>
<td style="text-align:left;padding-bottom:1%;padding-left: 10%;">email: dduck#gmail.com</td>
</tr>
</table>
</td>
</tr>
How can I center an image in a html mail that it works in outlook as well.
I tried this:
<th align="center">
<center data-parsed="" class="logo">
<img src="[%embedded-image(1335);logo.png]" alt="" width="207" height="55" border="0"/>
</center>
</th>
as well tried like this
<p style="text-align: center"><img src="[%embedded-image(1335);logo.png]" alt="" width="207" height="55" border="0"/></>
In browser it looks nice. But in outlook not.
What could be a working solution?
thanks.
<center> has been deprecated in favour of text-align: center.
Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the
process of being dropped. Avoid using it and update existing code if
possible; see the compatibility table at the bottom of this page to
guide your decision. Be aware that this feature may cease to work at
any time.
Ref: <center> - HTML | MDN
Consider using:
text-align: center instead on the containing element (th) of the
img element, or
display: block; margin: auto on the nested img element
...as demonstrated in the embedded code snippet below.
Code Snippet Demonstration:
*:not(code) {
font-family: arial;
}
code {
background: #cccccc;
padding: 3px;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">
<tr>
<th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">
Using <code>align="center"</code> attribute <sup><small><i class="fa fa-thumbs-o-down"></i> (deprecated)</small></sup> on containing element
</th>
</tr>
<tr>
<th align="center" style="border: 1px solid gray; padding: 10px;">
<img src="https://placehold.it/207x55" alt="" width="207" height="55" border="0"/>
</th>
</tr>
</table>
<br>
<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">
<tr>
<th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">
Using <code>text-align:center</code> inline-style property on containing element
</th>
</tr>
<tr>
<th style="border: 1px solid gray; padding: 10px; text-align: center;">
<img src="https://placehold.it/207x55" alt="" width="207" height="55" border="0" style="display: inline-block;"/>
</th>
</tr>
<tr>
<td style="padding: 10px;">
<p>In most cases declaring <code>text-align: center</code> on the containing parent element is enough since <code>img</code> elements are inheritly <em>inline</em>. But to ensure that this behaviour is consistent across all email clients declare <code>display: inline-block</code> on the nested <code>img</code> as well.</p>
</td>
</tr>
</table>
<br>
<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">
<tr>
<th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">
Using <code>display: block; margin: auto;</code> inline-style properties on nested <code>img</code>
</th>
</tr>
<tr>
<th style="border: 1px solid gray; padding: 10px;">
<img src="https://placehold.it/207x55" alt="" width="207" height="55" border="0" style="margin: auto; display: block;"/>
</th>
</tr>
</table>
Summary:
To center align an inline element horizontally, you need to:
declare text-align: center on the containing (parent) element
To center align a block element horizontally, you need to:
declare margin: auto on the block element
ensure that it is defined as a block element (display: block)
ensure a specified width is defined (width: 207px)
Vertical & Horizontal Alignment Demonstrations:
For Reference Sake.
Horizontal Alignment (Arbitrary Elements)
Horizontal Alignment (Text Elements)
Vertical Alignment (Arbitrary Elements)
Vertical Alignment (Text Elements)
<table align="center" width="75%">
<tr>
<th>
<div style="margin: 0 auto; text-align: center;">
<img align="center" src="[%embedded-image(1335);logo.png]" alt="" width="207" height="55" border="0"/>
</div>
</th>
</tr>
</table>
Trick is to make the parent table fixed width with align center property.
Giving margin: 0 auto; is 2nd option.
And if it is regular text content, then only align="center" will do the job. Like the following,
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
Your Content
</td>
</tr>
</table>
Hope this one helps.
Below is my code for 2x tables. There is PHP & results I have removed. But I cannot get these on one line but next to each other.
I have tried Align Left/Right and this puts them on 2x separate lines? I have tried float as well and this has not helped either.
Does anybody have advice for me?
HTML
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Received Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent To</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Sent Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent By</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
CSS :
table
{
border: #000000 1px solid;
background-color: #363636;
}
You could also add a class of left and right to each table and define floats in your css if you want the tables to always align left and right.
table.left {
float: left;
}
table.right {
float: right;
}
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="left">
YOUR LEFT TABLE content
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="right">
YOUR RIGHT TABLE content
</table>
You don't need the 'table' class because you can use the table tag as a selector.
Try adding display:inline-block;
Update CSS
table
{
border: #000000 1px solid;
background-color: #363636;
display:inline-block;
}
WORKING:DEMO
Float doesn't work on display: table which is the default table display property.
You have to put display: block on it in order to float them
table {
border: 1px solid #000;
display: block;
float: left;
width: 40%;
}
table:first-child {
margin-right: 40px;
}
Working Fiddle
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 have in a, e-mail that I code in HTML, a div with two colors and a text in span.
I have coded this:
<div class="msg" style=" width: 500px; background-color: gray; position: relative;">
<span class="text" style="font-size: 11px; color: white; position: absolute; bottom: 5px; left: 1%;">A text in a span.</span>
<div class="refus" style="width: 50%; height: 25px; background-color: #EF4135"></div>
</div>
You can find a demo here:
http://jsfiddle.net/aWvcp/2/
The problem is, in an mail tool like Thunderbird, it's working but not in outlook.
Is it possible to have the same render but for compatible with Outlook?
To ensure strictest adherence to your design, I would avoid <DIV>s, CSS position statements and spans. Be as regimented as possible with tables, inline margin tags and <p> with inline style. See a recreation of what you wanted in JSfillde.
It is hard to tell exactly what you are after, but here is an example in proper html email format:
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" bgcolor="#EF4135" valign="bottom" style="font-size: 11px; color: white; padding:1%; padding-bottom:5px;">
First column<br>...<br>...
</td>
<td valign="top" width="50%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" bgcolor="#818181">
</td>
</tr>
</table>
</td>
</tr>
</table>