I am creating HTML Emailer.
I want to have the td elements to be center in the next tr. if there is 1 td element then it should be center of tr , if there is 2 td elements then also it should be in the center of tr and if there is 3 td elements then it should be in the center of tr.
How can I do so?
I can't use any external CSS or library as I am making HTML Emailer.
I have used the below code.
<table cellspacing="0" cellpadding="0" border="0" style="background:white; text-align:center; margin: 0 auto !important; padding: 0px; width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-family:Arial" >
<tbody>
<tr>
<td >
<table style="width:450px;margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Any help would be great.
I'm not sure I get what you want. But I think you are looking for colspan.
<table>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
</tr>
<tr>
<td colspan="3" style="text-align: center">Centered</td>
</tr>
</table>
Working with colspan and rowspan should also make those nested tables a little more manageable.
Your question is not clear to me ,and also you need to be cautious when nesting tables.
you can use 'colspan'
Your question is not really clear about what you want to do but if you want a pure HTML one then,
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td align="right">Right</td>
</tr>
<tr>
<td>February</td>
<td align="center">Centered</td>
</tr>
<tr>
<td>February</td>
<td align="left">left</td>
</tr>
</table>
</body>
</html>
Another example with colspan,
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="text-align:center">
<td>Month</td>
<td>Savings</td>
<td>Gone</td>
</tr>
<tr>
<td colspan="3">
<table style="width:100%">
<tr style="text-align:center;">
<td>
test
</td>
<td>
test2
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You need to make use of colspan and text-align: center. Just remember that if a column has less than the maximum number of TDs in it, then colspan must be set to that. So below the columns with one and two TDs are set to 3 to line up with the one with three. I put the two TDs in an individual table which is also another techniques you can use to have different TDs in a TR. Note that the TD the table is in also has its colspan declared as 3 they must also be equal.
Think of it in an excel sheet, you have column a, b, c and so on. If you want a column to be the centre of three then it has to cross a, b and c.
<table cellspacing="1" cellpadding="0" border="1" style=" width:100%; text-align:center;">
<tr>
<td colspan="3">ipsum</td>
</tr>
<tr>
<td colspan="3">
<table cellspacing="1" cellpadding="0" border="1" style=" width:100%; text-align:center;">
<tr>
<td>ipsum</td>
<td>ipsum</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>ipsum</td>
<td>ipsum</td>
<td>ipsum</td>
</tr>
</table>
I think what you need is the hybrid approach. It requires more code than what you might be used to.
To see the code in action:
Run the code snippet, do full screen and resize your browser.
Hybrid method of coding:
Hybrid coding uses outlook conditional statements to create the columns specifically for outlook while all other email clients read the div tags to create the columns.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="600">
<![endif]-->
<table class="container hundred" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="width:100%; max-width: 600px;">
<tr>
<!-- 5 column starts -->
<td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 1 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 2 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 3 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 4 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 5 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
<!-- 5 column ends -->
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Hope this is the answer you were looking for.
Cheers
Related
So I'm trying to send an HTML email (using PHP if that matters) with wide tables in it and have it formatted as horizontally scrollable in Gmail for Android and iOS. Anyhow, no matter what I do, I can't get a horizontal scrollbar to appear in the Gmail app for Android, although it does seem to work in Gmail on the web. I've tried this with table width 100% and no table width and min-width and nothing works. I have also tried it with overflow-x: auto instead of scroll.
Gmail for Android just shows up to a certain column and then, if you swipe right to scroll, it takes you to the previous email. What I have noticed is that, if I go into my Gmail for Android settings and disable "Auto-fit messages," it solves the problem. Unfortunately, that's the default setting and I can't count on all of my readers to disable it (is there a way to disable it in my html?).
Here's my html for the email.
<html>
<head></head>
<body>
<div style="overflow-x: scroll;">
<table style="width: 100%;">
<tr>
<th>Article</th>
<th>Entrance</th>
<th>Page Views</th>
<th>Author</th>
<th>Images in Article</th>
<th>Links in Article</th>
<th>Links to Article</th>
<th>Meta Title</th>
<th>Google Referrers</th>
<th>AMP Traffic</th>
<th>Users</th>
</tr>
<tr>
<td>How to Scroll in Gmail</td>
<td>500,000</td>
<td>700,000</td>
<td>John Smith</td>
<td>25</td>
<td>200</td>
<td>How to Scroll in Gmail: a Comprehensive Guide</td>
<td>2,000,000</td>
<td>3,000,000</td>
<td>100,000,000</td>
</tr>
</table>
</div>
</body>
</html>
Any ideas? Or is it impossible to make a horiz scrollbar appear in the Gmail app, because Google wants to have its swipe right thing?
I would seriously advise against horizontal scroll for something as important as a data table. Gmail mobile app default practise for side scroll/swipe is to switch emails, as you've seen.
ActionRocket ran a test of this with their own newsletter a few years back and the email clients that actually did support it were Apple Mail (Mac & iOS), Outlook for Mac and Gmail Webmail. The coverage is actually quite small and you would need a reliable fix for the rest of the email clients you would be sending to.
I would suggest a different approach to your table, such as stacking the column header and column content together in a group like below (also in Codepen):
<style type="text/css">
#media only screen and (max-width:1300px) {
.row { display:block!important; width:100%!important; }
}
</style>
<div style="overflow-x: scroll;">
<table style="width: 100%;">
<tr>
<th>Article</th>
<th>Entrance</th>
<th>Page Views</th>
<th>Author</th>
<th>Images in Article</th>
<th>Links in Article</th>
<th>Links to Article</th>
<th>Meta Title</th>
<th>Google Referrers</th>
<th>AMP Traffic</th>
<th>Users</th>
</tr>
<tr>
<td>How to Scroll in Gmail</td>
<td>500,000</td>
<td>700,000</td>
<td>John Smith</td>
<td>25</td>
<td>200</td>
<td>How to Scroll in Gmail: a Comprehensive Guide</td>
<td>2,000,000</td>
<td>3,000,000</td>
<td>100,000,000</td>
</tr>
</table>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" role="presentation">
<tr>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;" colspan="2">
Article
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
How to Scroll in Gmail
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
Entrance
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
500,000
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
Page Views
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
700,000
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
Author
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
John Smith
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
Images in Article
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
John Smith
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
Links in Article
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
25
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
Links to Article
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
200
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
Meta Title
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
How to Scroll in Gmail: a Comprehensive Guide
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
Google Referrers
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
2,000,000
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
AMP Traffic
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
3,000,000
</td>
</tr>
</table>
</th>
<th class="row" valign="top" style="font-weight:400;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<th style="background:#16818D; color:#fff; padding:10px 0;">
Users
</th>
</tr>
<tr>
<td style="background:#eeeeee; color:#333; padding:10px 0;">
100,000,000
</td>
</tr>
</table>
</th>
</tr>
</table>
Obviously I've left styles from another project in there but it gives you an idea of the potential. It's als more code but a great alternative to keep in mind for smaller screens, across the board.
I'm having this extremely odd problem with creating bulletproof background images, and this thing is driving me nuts.
Issue:
There are two variable content blocks and they include code that makes a background image appear on Outlook 2013 and Windows 10 Mail.
While the background images do show, the v:rect created seems to refuse to take up the 800 px width it's supposed to. See attached for a demonstration of how it looks in Microsoft Outlook 2013.
It shows fine in Outlook 2010.
Code for the first block (which is pretty much suffering the same issue as the 2nd) for brevity:
<!-- // Begin Module: Welcome Block \\ -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper_table" mc:repeatable="layout" mc:variant="Welcome Block" >
<tbody>
<tr>
<td bgcolor="#3b3f40" style="background:rgb(59,63,64) url('https://gallery.mailchimp.com/0728d953751ef38036e722a85/images/0ecfdaa9-07ef-4f83-8e45-ef4ed827bcb0.jpg'); background-repeat:no-repeat; background-position: center top 100% 100%; background-size: 100% 100%; width:800px; max-width:800px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px; height:340px; mso-position-horizontal:center;">
<v:fill type="frame" src="https://gallery.mailchimp.com/0728d953751ef38036e722a85/images/0ecfdaa9-07ef-4f83-8e45-ef4ed827bcb0.jpg" color="#3b3f40" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]--><div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="content" style="width:800px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td class="padding" style="width:20px;">
</td>
<td class="content_row" align="center" style="width:760px;">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="mobile_centered_table">
<tbody>
<tr>
<td class="section_h" height="90">
</td>
</tr>
<tr>
<td class="content_row" valign="top" align="center" style="color:#ffffff;font-family:Montserrat, Arial, sans-serif;font-size:36px;font-weight:700;line-height:36px;text-transform:uppercase;width:760px;">
<span class="white_text" mc:edit="welcome_header"> WELCOME TO ULTIMAIL </span>
</td>
</tr>
<tr>
<td height="15" class="space_class" style="font-size:1px;line-height:1px;">
</td>
</tr>
<tr>
<td class="white_text" align="center" style="color:#ffffff;font-family:Montserrat, Arial, sans-serif;font-size:16px;font-weight:400;line-height:24px;width:760px;" mc:hideable mc:edit="welcome_subheader">
Curabitur et ligula. Ut molestie a, ultricies porta urn vestibulum commodo
</td>
</tr>
<tr>
<td height="30" colspan="3">
</td>
</tr>
<tr>
<td valign="middle" align="center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td bgcolor="#0d793d" class="button blue_button" align="center" width="160" height="45" style="border-radius:100px;display:block;background-color:#0d793d;border-color:rgb(57,57,57);border-width:0px;" mc:hideable mc:edit="a9">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="color:#ffffff;font-family:Montserrat, Arial, sans-serif;font-size:14px;font-weight:400;text-align:center;text-transform:uppercase;" align="center">
<a class="white_text" href="#" target="_blank" style="color:#ffffff;display:block;line-height:45px;text-decoration:none;width:100%;">
read more
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="padding" style="width:20px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td height="45" class="nomobile">
</td>
</tr>
</tbody>
</table></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!-- // End Module: Welcome Block \\ -->
See it malfunction in Outlook 2013: https://i.stack.imgur.com/mwTKx.png
See it malfunction in Windows Mail 10: https://i.stack.imgur.com/bXczG.png
I am working on an email template so my options are limited to tables.
I need a way to achieve the following using tables
All content is generated dynamically via RSS feed so I cannot use images.
Here's what I have so far
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="banner"><tbody><tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody><tr>
<td width="100%">
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody><tr>
<!-- start of image --><td align="center"> *|FEEDBLOCK:http://domain.com/feed/|* *|FEEDITEMS:[$count=1]|*
<a target="_blank" href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a>
</td>
</tr></tbody></table>
<!-- end of image -->
</td>
</tr>
<tr>
<td width="100%">
<table width="150" align="left" bgcolor="#ff4800" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody><tr>
<!-- start of title --><td align="left">*|FEEDITEM:TITLE|*</td>
</tr>
<tr>
<!-- start of content -->
<td align="left" bgcolor="#ffffff">*|FEEDITEM:CONTENT|* </td>
</tr>
</tbody></table>
<!-- end of title -->
</td>
</tr>
<!-- Spacing -->
<tr><td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td></tr>
<!-- Spacing -->
</tbody></table>
</td>
</tr></tbody></table>
Yes you can always do that. I have tried to get some similar kind of layout with respect to the screen-shot in your post.
You may check this code
<html>
<head>
<title>My Layout</title>
<style type="text/css">
table{
border:1px solid #c4c4c4;
}
td{
border:1px solid #c4c4c4;
}
#table1{
width: 800px;
}
.table1-td-left{
height:400px;
width:200px;
background-color: green;
}
.table1-td-right{
width:600px;
background-color: yellow;
}
.table2-td-left{
background-color: red;
width: 200px;
}
.table2-td-right{
background-color: blue;
width: 300px;
}
</style>
</head>
<body>
<table id="table1">
<tr>
<td class="table1-td-left">LHS</td>
<td class="table1-td-right">
<table id="table2">
<tr>
<td class="table2-td-left">Content # 1</td>
<td class="table2-td-right">Content # 2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You may also see this Fiddle Demo.
Basically you need to table within td.
This can be achieved, however, know that background images are not supported in Outlook 2003, 2007, and 2013. If you are not looking to support those email clients here is how you can achieve this. Disclaimer: this should be tested in Litmus or Email on Acid to verify the email clients you wish to support are producing the results you intended.
<table width="620" height="400" cellspacing="0" cellpadding="0" border="0" background="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png">
<tbody>
<tr>
<td align="left" valign="top" style="padding-top: 75px;">
<table width="200" bgcolor="#dddddd" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><h2>Title</h2></td>
</tr>
<tr>
<td><p>Some text</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
You can also view it here: http://jsfiddle.net/fcpz1um2/
using the backgrounds.cm method, you can do something like below sample and it should work in about 99% of email clients. It will need media queries and such to make it responsive, but should render consistently - even in ALL Outlooks.
<table width="620">
<tr>
<td background="http://i.stack.imgur.com/dDVdU.png" bgcolor="#EFEFEF" width="100%" height="300" valign="top" style="-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center; background-image:url(http://i.stack.imgur.com/dDVdU.png); background repeat: no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;height:250px;">
<v:fill type="frame" src="http://i.stack.imgur.com/dDVdU.png" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="text-align:left;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="34" style="font-size:1px; mso-line-height-rule:exactly; line-height:1px;"> </td>
</tr>
</table>
<table align="left" width="230" cellpadding="0" cellspacing="0" border="0" style="vertical-align:bottom; max-width:430px;">
<tr>
<td style="padding-left:5px;">
<table align="left" bgcolor="red" width="100%" cellpadding="0" cellspacing="0" border="0" style="vertical-align:bottom; max-width:430px;">
<tr>
<td style="color:#FFFFFF; font-size:67px; line-height:80px; padding:5px;">30% <span style="font-size:40px;">Off</span></td>
</tr>
<tr>
<td bgcolor="#000000" style="color:#FFFFFF; padding:5px;">HURRY UP! GRAB YOUR BITE</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
My html code with inline css:
<div id="ggicci_syntax_highlighter" style="border: solid 3px black; cursor: text; overflow-x: auto; width: 100%;">
<table id="ggicci_outer_table" cellspacing="0" style="font-family:Consolas;">
<colgroup>
<col style="background-color: #44F;"><!-- You can set font here -->
<col style="background-color: #f4f4f4; width: 100%;">
</colgroup>
<tr>
<td></td><!-- corner -->
<td id="ggicci_language_text" style="font-size:25px; color: #777; font-family: Arial Black;"> <!-- header -->
C++
</td>
</tr>
<tr>
<td>
<table id="ggicci_line_number" style="font-size: 14px; color: #DDD;"><!-- You can set style here -->
<tr>
<td>1:</td>
</tr>
<tr>
<td>2:</td>
</tr>
<tr>
<td>3:</td>
</tr>
<tr>
<td>4:</td>
</tr>
<tr>
<td>5:</td>
</tr>
<tr>
<td>6:</td>
</tr>
<tr>
<td>7:</td>
</tr>
<tr>
<td>8:</td>
</tr>
</table>
</td>
<td>
<table id="ggicci_code_body" style="font-size: 14px; width: 100%;"><!-- You can set style here -->
<tr>
<td style="background: #FFF">
<span style="color:#FF7700; font-weight:bold;">#include</span> <iostream>
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">using</span> namespace std;
</td>
</tr>
<tr>
<td style="background: #FFF">
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">int</span> main()
</td>
</tr>
<tr>
<td style="background:#FFF;">
{
</td>
</tr>
<tr>
<td>
std::cout << <span style="color:#EB2244;">"Hello World!"</span> << std::endl;<span style="color:green;">//write "Hello World!" to console............................................................</span>
</td>
</tr>
<tr>
<td style="background: #FFF"> <span style="color:blue; font-weight:bold;">return</span> 0;</td>
</tr>
<tr>
<td>
}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and I can't make the content in div scroll when the text in a line in the table where the id is "ggicci_code_body" overflows. I'm new to css and now I'm designing a syntax highlighter for programming practice. So any solution? and why this can't work?
Add '<!doctype html>' at the start of html file.
I have this code on my print.css:
#header, #tae, #nav, .noprint {display: none;}
width: 100%; margin: 0; float: none;
In order not to display the elements within those div tags. But I don't know with the code below why it isn't cooperating. If I place the div tags on it. And then I hit the print button. I see no output.
Here it is:
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5"><table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="" width="30" height="30" /></td>
</tr>
</tr>
<tr>
<td class="text2">
</div>
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>
What's wrong with my code? Does the php script depend on the one where I put the div tag in?
What do I do? All I want to show up in my page when printed is the mysql table. I'm using
Universal Document Converter to simulate printing.
The HTML in that snippet is broken and the entire document is contained in #tae, thus nothing will print as everything is in a container that is display: none;
Here's a cleaned up version of that markup.
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5">
<table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td>
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/spacer.gif" alt="" width="30" height="30" />
</td>
</tr>
<tr>
<td class="text2"></td>
</tr>
<!-- All this is missing, from here... -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- ...to here. -->
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>