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; }
Related
I created an email template that uses a two-column layout. This was my approach:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
It works great on desktop! I have a two-column layout exactly as I wanted it. The problem is on phones because screens are too small for a two-column layout. I need one picture per row, not two, for mobile devices. What I could do is to use float:left;width:100% for the <td> elements that contain the images so that I have the one column layout that I need. However, that float:left;width:100% should apply only when #media screen and (max-width:450px) for example. But there is no way to use #media screen and (max-width:450px) using inline CSS. Remember, this is for an email template. So I cannot invoke external CSS files or add CSS to the <head> of the page because this is code that will be sent for an email template.
I found at https://kb.benchmarkemail.com/using-css-in-html-emails/ this advice, but that is not a solution for responsive tables:
Things To Do
Use tables for layout. Tables are more consistently supported. We
recommend that you place your CSS code inline to your content. It
should look something like this: Your content
here.... Declare width, cellpadding, and cellspacing for all
tables and table cells. This will result in a fixed width for the
template. Use hspace and vspace tag attributes to add whitespace
around an image. Margin and padding inline styles are supported by
most, but not all email clients
Any ideas? Thank you.
Google offers CSS support: https://developers.google.com/gmail/design/css as A. Meshu pointed out in his comments to my question.
I found at https://templates.mailchimp.com/development/responsive-email/ that they say this:
"You can leave the media query styles in the <head> of your email, as
clients that support media queries don’t strip out the <head> or
<style> areas."
That made me think I had to send a complete <HTML> document, so I even included <html><head><style type="text/css">..........</style></head><body>...........</body></html>.
For my other email templates I just send code for the <body>. I start the template with a <div> and everything works. But for this template now I am using this structure:
<html>
<head>
<style type="text/css">
#media screen and (max-width:450px) {
.responsive {
float:left!important;
width:100%!important
}
}
</style>
</head>
<body>
..........
</body>
</html>
Thanks to A. Meshu for providing very important hints in his comments to my question to figure it out.
Since table elements are block-level, I would say to change those tds into nested tables like it's 1999, and then float the first one left:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<table style="float:left;">
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
</tr>
</table>
<table>
<tr>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
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.
I am producing a personalised HTML email which has already been designed. I have coded the email with all the content placed within a table. I need to place text in three different areas in one row in a kind of scattered way. I tried placing the text into a div within the table row and styling it using inline CSS however, when i tested it on emailonacid (email testing website) it doesn't display correctly on the different email programs. Is there a way i can do this so that it works for all email programs?
I would like to position the text like so:
http://i754.photobucket.com/albums/xx182/rache_R/image_zps0604dece.jpg
The black boxes is where the images are.
<tr>
<td>
<div id="cambelts" style="margin-top: -30px;text-transform: uppercase; position: relative; top: 80px; left: 170px;">This is text 1
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<img src="images/Untitled-1_04.jpg" width="800" height="418" alt="">
<div id="Accessory_Belt_kits" style="text-transform: uppercase; position: relative; top: -235px; left: 20px;">This is text 2
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<div id="Water_Pumps" style="text-transform: uppercase; float: right; position: relative; top: -80px; right: 40px;">This is text 3
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
</td>
</tr>
You should not concentrate with fancy CSS tricks in E-mail. Email should be more about content and less about CSS positioning and gimmicks.
Having said that Email clients do support certain CSS attributes.
Click here to check which attributes are supported by different Email clients.
Also here is a tool which can allow you to see how your email will be rendered in different E-mail clients.
So my advice is instead of trying to hack your way into getting your content displayed , focus more on what the end user will see rather than how he see's it.
Instead of using CSS, you can also add the another table in the row to adjust the text position. This way you can manage the text position easily.
Set the border of the table to zero (<table border="0">) to make it invisible if necessary.
I am fairly new to creating HTML emails but I have found that not all CSS code really works across all email clients so it is better to stick with as much HTML as possible.
One way you could accomplish this is a table with two columns. In the left column you have text 1 and 3 then in the right column you have text 2. In order to create the spacing, you will need to include empty "cells" that give the spacing.
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="290">
<table align="center">
<tr>
<td>
<h1>Text 1</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
<tr>
<td>
<h1>Text 2</h1>
</td>
</tr>
</table>
</td>
<td width="20">
</td>
<td width="290">
<table align="center">
<tr>
<td height="20">
</td>
</tr>
<tr>
<td height="20">
<h1>Text 2</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should give you a solid base to work with and all email clients will render tables properly.
I am a bit of a noob with HTML and CSS. I am wondering what is the best way to:
1) Arrange 4 tables on a page in a square formation -- ie, each table is a quadrant, or
2) Put 4 tables within another table.
Any advice is appreciated.
Regards.
If you're want to split the page to a 2X2 table best way is to use Divs (also easier to apply css on divs)
<div style="width:auto;">
<div style="float:left; width:50%">
x-1,y-1
</div>
<div style="float:left; width:50%">
x-2,y-1
</div>
<div style="clear:both"></div>
</div>
<div style="width:auto;">
<div style="float:left; width:50%">
x-1,y-2
</div>
<div style="float:left; width:50%">
x-2,y-2
</div>
<div style="clear:both"></div>
</div>
http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables
To answer the "Put 4 tables within another table." part of your question: as Jonthan Sampson said in his comment to your quesiton: create one table with two rows and two cells per row. In each of these cells, put one table within the td tags:
<table>
<tr>
<td>
<table>
<tr>
<td>
Table 1/4
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Table 2/4
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
Table 3/4
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Table 4/4
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td> Top left Information Here </td>
<td> Top right Information here </td>
</tr>
<tr>
<td> Bottom left Information Here </td>
<td> Bottom right Information here </td>
</tr>
</table>
JSFiddle
http://jsfiddle.net/DNYwc/
This seems to be reducible to the question “to display four elements in a two by two formation, should I use a table or some other method?” Whether the elements are tables or something else seems to be irrelevant to the basic question.
If the four elements logically constitute a 2 × 2 table, make it such a table in markup. If the two by two formation is just the preferred rendering in some situations, then you could some other approach, such as floats, something like
<div style="float: left">A</div>
<div>B</div>
<br clear=all>
<div style="float: left">C</div>
<div>D</div>
<br clear=all>
This would result in a 2 by 2 rendering if there is enough width, but in a narrow window, A, B, C, D would appear in a 4 by 1 formation. If you use a table, then a narrow window would force horizontal scrolling. The choice really depends on which alternative is better for the content and structure.
Honestly, it sounds like you want 1 table, 2 rows, 2 cells per row.
<table>
<tbody>
<tr>
<td>Top Left</td><td>Top Right</td>
</tr>
<tr>
<td>Bot Left</td><td>Bot Right</td>
</tr>
</tbody>
</table>
Fiddle: http://jsfiddle.net/jonathansampson/gy5YC/
If it's layout you're after, there's a better way...
Please note that although this may give you the layout structure you're desiring, using tables for non-tabular data (think of a spreadsheet) is an illegal use of the element.
If you're attempting to layout a page, there are far better options available to you. You could use four div elements, positioned in a fixed fashion to the viewport:
<div class="panels">
<div>Top Left</div>
<div>Top Right</div>
<div>Bottom Left</div>
<div>Bottom Right</div>
</div>
Fiddle: http://jsfiddle.net/jonathansampson/gy5YC/2/
Everybody knows how a dropdown menu works where a person clicks on the drop down menu and it displays a drop down list where the user can select an option from the list. What I want to know is that is there a way in html where except displaying a dropdown list can I display a grid instead with the options in the grid? I havn't got any code for this but if anyone knows this is possible and can provide an example of this I would be very greatful and it would be very helpful.
Here's a basic example:
http://jsfiddle.net/QmLmC/
<!-- HTML -->
<div id="myDropdownGrid" class="dropdownGrid">
<div>
<button type="button">Open/Close</button>
</div>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<p>Click the button above to view open or close the grid.</p>
.
/* CSS */
.dropdownGrid{position:relative;}
.dropdownGrid table{position:absolute; z-index:999; display:none;}
.dropdownGrid td{width:20px; height:20px; background-color:white;}
.dropdownGrid td:hover{background-color:blue;}
.
// Javascript using jQuery
$("#myDropdownGrid button").click( function(){
$('#myDropdownGrid table').toggle();
});
... well, there's no such thing as a 'grid' but a table would present the info in 'grid' form. You could build a grid out of div elements, but that can get unduly tedious.
Feel like using jQuery for this?
/* make button clickable */
$("#someButton").click( function(){
/* grid like container of data, talbe or a complex div 'structure' */
$("#someGrid").toggle() // if grid is visible hide it, if hidden show it
})
... so you'd have a button with an id of "someButton" and whatever grid structure/wrapper with id id of "someGrid" and css of "display:none" on it.