Trying to replicate this sort of design/structure:
Notice Below the two boxes on one side of the table and the one big one on the other!
How would I achieve this using table css? Here's my current code, which is vertically stacked:
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
<tr>
<td align="center" valign="top">
This is where my body content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Any idea?:
Steven is right, in theory:
the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet:
table
{
margin-left: auto;
margin-right: auto;
}
But the article mentioned in the beginning of this answer gives you all the other way to center a table.
An elegant css cross-browser solution:
This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class="centered">
<table>
…
</table>
</div>
See this post
edit thats center this is horizontal just change the neccecery css or see here!
Related
I am working on HTML email template. There is a small spacing below the image and I am not able to get rid of it. And this space is caused by the DOCTYPE is all I know.
Sample Image
I tried everything possible like:
Adding style="display:block" to the image.
Setting the "Align" Attribute to "absmiddle", "absbottom", "texttop", "middle", "left", "right" and "top".
Setting the Line-Height to 10px or Less by placing the image in div.
Setting Font-Size to 2px or Less.
Using Float:Left or Float:Right.
But nothing seemed to work for me. Can anyone help me figure it out please ?
I having been trying to figure it out for the past two days :P
I have attached the sample code below:
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;">
<div class="mj-column-px-600 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<a href="#">
<img src="./assets/img/hero#3x.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I've got an image within a relatively complex table structure and inside a td tag. I'm trying to make the image response so that when the page is viewed on mobile, the image is slightly scaled down vs. when viewed on a desktop i.e. ideally, I want it to be 50% of the width page.
I've tried adding a max-width on the img tag as well as the tg tag outside it and neither appeared to work.
My code:
<html>
<table bgcolor="#efefef" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="middle" style="font-family:Helvetica, Arial, sans-serif; font-size: 12px; color: #353535; padding:3%; padding-top:5px; padding-bottom:5px;">
.........
</td>
</tr>
<tr>
<td align="center" valign="middle" style="padding:1%; padding-top:10px; padding-bottom:5px;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50%"></img></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</html>
You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases and make tr text-align: center;
For some reason I can not get the td with 100% inside the table and align the text as center.
How can I make the <td class="order-details"> full width, so it full the 600px of the table obove?
JSFIDDLE: https://jsfiddle.net/61s1cdyo/1/
CODE:
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
<tr class="details">
<td align="center">
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff; max-width: 600px; display: block;">
<tr align="center" class="header">
<td class="order-details">
<h1 style="text-align: left; display: table-cell; padding: 10px 0px;">ORDER DETAILS</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
Assuming you want to keep the max-width: 600px, you need to remove the display: block from the inner table to make it act like a table.
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
<tr class="details">
<td align="center">
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff; max-width: 600px;">
<tr align="center" class="header">
<td class="order-details">
<h1 style="text-align: left; display: table-cell; padding: 10px 0px;">ORDER DETAILS</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here's a Fiddle
There is a max-width: 600px inline setting for the nested table. If you erase that, it's 100% wide:
https://jsfiddle.net/b594a5d5/1/
http://imgur.com/a/fKv2H
I need banner with height 100px. and img inside it with height 120px. So the picture comeee out my banner for 20px;
Its for emails.
Also i need text column right before picture, so that text in column with background f4f4f4
<table>
<tr>
<td>
<img src="" style="margin-top:-20px;" />
</td>
<td>
banner text here
</td>
</tr>
</table>
You can do this two ways, one involved slicing the image into two and the other is using two more tables. I have added the code below for you to decide which one you want to go with.
Option 1:
This option has the image as one piece sitting in an outer table with 3 columns. The outer two columns have a table with white background to cater for the heads/hats popping out of the grey area. I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
<td width="171" valign="top"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Option 2
For this option, you will need to slice the top part of the image (with white background) and place both the images in one table with two rows. Both images are centered and I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#ffffff"><img src="http://i64.tinypic.com/lz7f6.png" style="display: block;">
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#f4f4f4"><img src="http://i68.tinypic.com/4qo1mu.png" style="display: block;"></td>
</tr>
</tbody>
</table>
The final outcome for both codes should look like this:
Let me know which option best suits you.
** UPDATE **
Your question asked if you can have option 1 with image to the left and text on the right, here is the example:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="171" valign="top" style="padding-left:20px;"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
<tr>
<td style="font-family:Arial; font-size:12px; color:#000000; padding:5px 10px;">This is some text for your email</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I added colors so you could see that it was outside the table. I gave the image a height of 120px, width of auto. Made the td's have a max-height of 100px; And I left your -20px margin on the image.
<body style="background-color:pink">
<table style="background-color:orange;">
<tr>
<td style="max-height:100px; overflow-y:initial;">
<img src="https://i.imgur.com/ZESO4DT.png" style="margin-top:-20px; height:120px; width:auto;" />
</td>
<td style="max-height:100px;overflow-y:initial;">
banner text here
</td>
</tr>
</table>
</body>
Having a little trouble with a HTML email on older versions of IOS in that tables will not align next to eachother. I am creating a responsive email layout for a client and have a need to use align="left" to float tables. ( sample code below )
I have tested on every client i can think of and it is only old IOS versions with this issue.
Sample code: ( this isnt the actual code i am using but same princible )
<table cellspacing="0" cellpadding="0" width="600" border="0" class="full-width">
<tr>
<td width="600" class="full-width">
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 1</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 2</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 3</td>
</tr>
</table>
</td>
</tr>
</table>
Here is an image of whats happening with IOS 5 (Incorrect) and IOS 6 (correct):
Image of IOS 5 and 6 respectively with table included
Any assistance would be greatly appreciated. If you need further info let me know.
You have align="200" on your table cells - not sure if it is just a typo in the sample code, but that could possibly be messing things up. Otherwise, it looks good to me, maybe try adding float:left; to the aligned tables as a fallback to see if it helps.
Also set the width of your table cells to 100% or 200 to make sure they are behaving as expected and check that your full-width class or other css isn't doing anything funky.
Right, after hours of playing around with the code the answer is... :
Make sure the container TD also as align="left" so the code would become:
<table cellspacing="0" cellpadding="0" width="600" border="0" class="full-width">
<tr>
<td width="600" class="full-width" align="left">
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 1</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 2</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 3</td>
</tr>
</table>
</td>
</tr>