I'm trying to create an Email Template for my client. They are sending an HTML Newsletter. I originally had the layout perfect only to find out that Outlook and other email programs (Gmail, etc) do not support positioning like I need. The overall layout of the newsletter is as follows: (Forgive the ASCII Art)
---------------------------------------------------
| Header Image | Email Title |
| | |
----------------------------------------------------
| Date | Contents |
----------------------------------------------------
| Main Content | TOC |
| | Related links|
| | |
| |--------------|
| |
| |
----------------------------------------------------
| Footer Info |
| |
----------------------------------------------------
Because I need to use HTML Tables in order to get this positioning, I cannot wrap content into the section under the Related Links.
Is there a way to mimic the concept of a DIV with float:right (The way I originally implemented it) using HTML tables? My output now is the content stays in the left "Main Content" column and I get a long white strip down the right side under the "Related Links" section.
I've tried various CSS styles, but nothing seems to render properly in Outlook or GMail.
I have toyed around with the idea of leaving it up to the user to enter text until they reach the end of the right Content box and then start entering text in another entry, and then I stitch them together with a ColSpan of 2. However that seems overly complex for my users, and somewhat of a kluge.
It's fairly straightforward markup
<table border="0" cellspacing="1" cellpadding="0" style="width:750px;">
<tr style="height:205px">
<td style="width:500px;">
<img/>
</td>
<td style="width:250px;">
<span>Some Title</span>
</td>
</tr>
<tr style="height:22px">
<td style="width:500px;">NewsLetter Title</td>
<td style="width:250px;">Contents</td>
</tr>
<tr>
<td style="width:500px;">
Main content of newsletter
</td>
<td style="width:250px;">
Table of Contents Related Links
</td>
</tr>
<tr>
<td colspan="2">
Footer Info
</td>
</tr>
</table>
I would like the Main Content area to expand as needed, and once the content grows beyond the right "Contents" section, the main content will flow over into that column.
First, it should be pointed out that this isn't the natural behaviour in email clients.
You're going to see issues somewhere because you're effectively hacking together a solution. More detail below...
Points to consider:
As I commented on some of the previous answers - Divs can mimic what you want, but in Outlook, divs will blow out to 100%. Fixes such as calc widths etc aren't the solution to fix this. Tables will absolutely do the exact same job, without the drawback of having to add hack fixes such as Ghost tables just for Outlook.
Try not to use floats in email. They may work in some places but won't work everywhere. The align attribute (e.g. align="right") is what you're looking for. It's best to define these on table cells and the content inside will inherit this property, but when working with more than one table inside of the cell, it's best to define directly on the element. You can see this in my code below... My table is next to a group of text. Defining the align on the cell would force the text to right align, not great!
Because this isn't the natural behaviour, you're going to see an issue somewhere.
In the case of the code below, this removes the reliance on floats, divs and calc widths and uses tables and fixed widths, although these can be changed to percentages.
However, the group of text is messing with the colspan and widths of the table cells in Outlook. Specifically, it is blowing out the first cell, throughout the table and so it isn't adhering to the fixed with of 316px you've defined. *FYI - I've used a Litmus account to test this code in the big email clients including Gmail webmail, Gmail App (iOS), Outlook 2010/2013/2019, Outlook webmail, Outlook 365, Yahoo Webmail, Outlook App (iOS) and Apple Mail App (iOS).
<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000; border-collapse:collapse; width:100%;">
<tr>
<td style="width:316px; font-size:0; padding:0; border:1px solid #000;"><img width="316" height="159" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g" style="display:block;" /></td>
<td style="border:1px solid #000; padding:3px;">Email Title</td>
</tr>
<tr>
<td style="padding:3px; border:1px solid #000;">Date</td>
<td style="padding:3px; border:1px solid #000;">Content</td>
</tr>
<tr>
<td colspan="2" style="padding:3px; border:1px solid #000;">
<table align="right" border="0" cellspacing="0" cellpadding="0" style="width:272px;">
<tr>
<td style="padding:3px; background:#000; color:#fff;">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td>
TOC
</td>
</tr>
<tr>
<td>
Related Links
</td>
</tr>
</table>
</td>
</tr>
</table>
Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content
</td>
</tr>
<tr>
<th colspan="2" style="padding:3px; border:1px solid #000;">Footer Info</th>
</tr>
</table>
Without CSS you would want to do something like:
<table style='border:1px solid #000; border-collapse:collapse;'>
<thead>
<tr>
<th style='width:316px; font-size:0; padding:0; border:1px solid #000;'><img width='316' height='159' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g' /></th>
<th style='border:1px solid #000; padding:3px;'>Email Title</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan='2' style='padding:3px; border:1px solid #000;'>Footer Info</th>
</tr>
</tfoot>
<tbody>
<tr>
<td style='padding:3px; border:1px solid #000;'>Date</td>
<td style='padding:3px; border:1px solid #000;'>Content</td>
</tr>
<tr>
<td colspan='2' style='padding:3px; border:1px solid #000;'>
<table style='width:calc(100% - 316px); padding:3px; background:#000; color:#fff; float:right;'>
<tbody>
<tr>
<td>TOC</td>
</tr>
<tr>
<td>Related Links</td>
</tr>
</tbody>
</table>
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
Main Content Main Content Main Content Main Content
</td>
</tr>
</tbody>
</table>
Of course, you want to use CSS, if possible.
Related
https://jsfiddle.net/therbq0h/
this link provides something similar to is being displays, its not formatted but it gives 2 pages. Has to be printed in IE.
I have a page that stores data in a database and a separate page that displays its in a generic way. I am creating custom pages to exactly match word documents, the way all the documents were created before. The page has a header, body, footer.
I need print to look like:
Page 1
------------Header-------------
------------Body---------------
Partial Data pulled from database entered in a form
------------footer-------------
Page 2
------------Body---------------
Partial Data pulled from database entered in a form
Page 3
------------Body---------------
remaining Data pulled from database entered in a form
data is dynamic in size.
Currently thead and tbody works fine, but i need footer on page 1 only with a horizontal line at the top.
<body>
<div class="wrapper_class" >
<div>
<table style="width:100%;font-size:8pt;">
<thead>
<tr>
<td style="width:33%;">
Customer names:
</td>
<td style="width:33%;">
<img src="" />
</td>
<td style="width:33%;">
Customer names:
</td>
</tr>
<tr>
<td colspan="3">
<table>
<tr>
<td>
some more rows and columns
</td>
</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<div class="floatCenterParent">
<p><%SELECT MemoField FROM Table WHERE ID = 100%></p>
</div>
<div>
<p><%SELECT MemoField FROM Table WHERE ID = 101%></p>
</div>
<div style="some more styling">
more text
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
static text
</td>
</tr>
</tfoot>
</table>
</div>
<div class="floating_Menu">
buttons that dont get printed
</div>
</div>
</body>
page layout matches the word document, I need the footer on page 1 only, and must be at the bottom even if there isn't a full page. Only needs to print correctly in IE10+. If possible cross-browser would be nice.
The footer does display correctly on every page at the bottom except for the last page, it follows right after the body text.
.footer { display: none; }
.page-one > .footer { display: block; }
Is it possible to have a table that distributes the cell heights like the following?
______________________________________
| fixed height |
|____________________________________|
| |
| |
| dynamic height |
| |
|____________________________________|
| fixed height |
|____________________________________|
So the height of the first and the last cells are fixed, the center cell should be dynamic and scrollable.
Currently I have the following code but it doesn't work:
<table style="max-height:200px">
<tr>
<td height="30px">First element</td>
</tr>
<tr>
<td>
<!-- Div for scroll functionality if content is too high -->
<div style="overflow:auto">
Dynamic content which needs to be scrolled sometimes
</div>
</td>
</tr>
<tr>
<td height="30px">last element</td>
</tr>
</table>
EDIT: it doesn't need to be a table it is just important that the center element has a dynamic height and is scrollable
EDIT: I know that I can specify the height of the element to be scrolled - then it works. But I want the height of the element to be dynamic
You might want this:
1) I gave height:auto to table, and here width:80% to table is optional.
2) The Div inside td is given height:60px;(just random to bring up scroll-bar), along with overflow:auto;.
3) The first and second td's have specific height:30px;
Check this out:
<table style="height:auto; width:80%;" border=1>
<tr>
<td height="30px">First element</td>
</tr>
<tr>
<td>
<!-- Div for scroll functionality if content is too high -->
<div style="overflow:auto; height: 60px;">
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
</div>
</td>
</tr>
<tr>
<td height="30px">last element</td>
</tr>
</table>
Update : No Specific Height
Here in a update i used max-height
<table style="height:auto; width:75%; margin:0px auto;" border=1>
<tr>
<td height="30px">First element</td>
</tr>
<tr>
<td>
<!-- Div for scroll functionality if content is too high -->
<div style="overflow:auto; max-height:100px;">
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
</div>
</td>
</tr>
<tr>
<td height="30px">last element</td>
</tr>
</table>
Note: If you want to use % for max-height give height and width equals 100% to your body.
I'm trying to use nowrap on td properties so that the result can be seen on the first table:
As you can see, on the first table, it wrapped nicely.
But on the second table the first "td" exceeding it's second "td" because the content is too long.
How do I fix this?
Here's my code:
<table cellspacing="0">
<tr>
<td class="content" style="width: 1%; white-space: nowrap; max-width:300px">
/*php content*/
</td>
<td class="author">
/*php content*/
</td>
</tr>
</table>
To make it more clear, here's what I'm trying to do:
At first I created a list which each element is a table, here's what each of the list code:
<div class="post">
<table cellspacing="0">
<tr>
<td class="content" style="max-width:300px">
/* php content */
</td>
<td class="author">
/* php content */
</td;>
</tr>
</table>
<div class="nav">
/* php content for navigation buttons */
</div>
But the result is like this:
As you can see on the first list, there are white spaces between "test 1" and the "admin todo" status.
I want to remove it, therefore I use the nowrap method. If this impossible, is there any alternative method?
If I interpretate correctly the question and understand your expected results i suggest you tu use text-overflow
Since you stated 300px as width of td.content and still want the content to be rendered in one line only, I guess the only solution is to hide the exceding content. It can be done with this simple CSS:
.content{
text-overflow:ellipsis;
overflow:hidden;
}
I'm trying to get a resposive table with a % and not hard coded pixel values, but the column in which I want to place the image gets very small when I resize the window.
HTML:
<TABLE BORDER=1 style="width: 90%; margin: 5%;">
<TR>
<TD width="70%">
<h4>ABOUT US</h4>
<p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</p>
<p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
<br/><br/><br/><br/><br/>
</TD>
<TD width="30%" rowspan=2><img src="images/foto.jpeg"></TD>
</TR>
<TR>
<TD>
<h4>MEET THE TEAM</h4>
<p>content</p>
</TD>
</TABLE>
jsFiddle
Is there any way to do this so that the table resize in such manner that the column 2 becomes row 3? If I would have to do the same thing using divs I would by okay with that.
Here's a simple rule when it comes to responsive web design (or any web design in general)...
Never
Ever
Ever
... Use tables to define the layout of a page. Tables are designed to present tabular data not to define the layout of a page. Use div elements instead
A useful link to bear in mind is http://shouldiusetablesforlayout.com/.
Tables shouldn't be used for layout (as #davblayn pointed out), but if you want/need to use them:
HTML:
<TABLE BORDER=1 style="width: 90%; margin: 5%;">
<TR>
<TD id='firstItem' width="70%">
<h4>ABOUT US</h4>
<p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</p>
<p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
<br/><br/><br/><br/><br/>
</TD>
<TD width="30%" id='responsiveItem' rowspan=2><img src="images/foto.jpeg"></TD>
</TR>
<TR>
<TD>
<h4>MEET THE TEAM</h4>
<p>content</p>
</TD>
</TABLE>
CSS:
#media all and (max-width: 699px) and (min-width: 520px) {
td{
width:100%;
}
#firstItem{
display:block;
}
#responsiveItem{
float:left;
}
}
jsFiddle
Play with resizing the JSFiddle window, the column with the image drops down to become a row when there isn't enough room.
Don't use tables for layout. You can't easily do what you want with CSS anyway, since you'd have to override the display property for multiple elements.
If by "responsive" you mean does not go screwy when text does not fit, and maintains image size (images do not scale nicely), then you can use this:
<table border="1" width="800px" height="250" style="min-width:800px; width: 90%; margin: 5%;">
<tr>
<td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
</td>
<td style="height: 250px; width: 250px;" rowspan="2">CONTENT</td>
</tr>
<tr>
<td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
</td>
</tr>
</table>
Basically, you need to set minimum space to accomodate the content, then you can scale outwards as much as you want.
While yes, tables are generally frowned upon, it is another form of "WHY WOULD YOU WANT TO DO THAT" and since the question particularly asks for tables, there is no need to completely change the question to satisfy your pet peeve.
Tables work fine for websites, the main issue with them is that they take a while to set up, and once they are set up, they stay that way forever, and changing them is impossible without total re-tabling.
This does not appear to the main issue here.
I have a table that is split into 3. My problem is I have content on the left side and pic on the right side. When I open the page the pic is starting in the middle of the page I need the pic to be displayed at the top of the page. How can I do that?
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td >
<table> Lots of Content </table>
</td>
<td width ="10%">
<table> Empty table (that gives space between left content and right image </table>
</td>
<td width = "20%">
<table width="100%">
<tr>
<td> <Asp:Image Runat="server" Id="Image" align="top"> </td>
</tr>
</table> </td>
</tr>
</table>
If you really want / need to keep the existing structure and look for a quick and dirty fix, then set the position of the Image to absolute and with top and left position it exactly where you want.
Use this page to figure out what kind of positioning you want (not sure from post) http://www.w3schools.com/css/css_positioning.asp
And then embed the code like this:
<head>
<style type="text/css">
img
{
[Style properties you pic]
}
</style>
</head>
Or consult css_howto and use a proper CSS file for you entire page layout (no more tables)
that's easy... here's the hack... add a class to the td
.positionhack {position:relative}
then on the image
.positionTop {
position:absolute;
top:0;
}