I have browsed through a few answers here on how to turn a HTML table row into a usable link. I could only find people aiming to do this -
<tr>
<td width="15%">Test3</td>
<td><b>Test1</b></td>
<td>Test2</td>
</tr>
Although that does work, it is obviously all separate links and not really what I am looking for. Call me fussy, but I am really trying to aim for something that works similar to the privileges page here.
That is, the entire table row is a link, and no matter where you click, it will redirect. I'm not sure if I would need to use a HTML Table or some kind of List group? Any help would be great!
this solution is really the only way you can do this with HTML properly
<tr>
<td width="15%">Test3</td>
<td><b>Test1</b></td>
<td>Test2</td>
</tr>
Any other solution involves changing the table CSS
I suggest adding the href tag after the like this:
<tr>
<a href="https://google.com">
<td width="15%">Test3</a></td>
<td><b>Test1</b></td>
<td>Test2</td>
</a>
</tr>
This will make all the links clickable with the same URL. However, it wont look 100% like the privileges page since it has no style. Once you add CSS you should be able to achieve exactly what you want.
Related
I need to put 3 links in the same line aligned like left, center, and right without using CSS.
Its something like this, I hope this helps
If you really want to do all of this without using any CSS, you can use tables.
<table>
<tr>
<td>First link</td>
<td>Second link</td>
<td>Third link</td>
</tr>
</table>
Otherwise you don't really have much of an option if you want the spacing and all you got on your image example. I would also not recommend using tables all that much, because pretty much everything should be responsive for mobile devices these days, and tables are really hard to fit in to a 320px of screen width.
This is extremely bad practice. A list of links is not tabular data. HTML is not a layout tool. This is how things were done in 1996. The web is better (in some ways) now and we do not do things this way now.
It is possible to hack a layout with a table and obsolete presentational attributes. The data is not tabular, however, so this is bad food for screen readers and search engines.
It is also not HTML 5. What you want to achieve is not possible with HTML 5. This is HTML 4.01 Transitional which, when it was released two decades ago, was only ever intended as a stop-gap while people converted over to using CSS for presentation.
<table width="100%">
<tr>
<td width="33%">A link</td>
<td width="34%" align=center>A link</td>
<td width="33%" align=right>A link</td>
</tr>
</table>
assuming you can add inline styling ,you can use this
<div>
<a href="" >firstlink</a>
<a href="" style ="text-align: center;
width: 90%;
display: inline-block;
margin: auto;">secondlink</a>
<a href="" >thirdlink</a>
</div>
else you can use one by answered by community wiki
Our CRM allows us to send automatic emails to our customers using their software. Things like purchase receipts and so forth. While they offer HTML editing of the emails, it's heavily restricted and we may not use any CSS.
As far as what their style guide does allow, it appears to be all HTML and some inline styling, for example:
<span style="color:#ffffff">white</span>
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">
...are all OK according to the guide. However, no other CSS or CSS references are allowed, including:
<link rel="stylesheet" href="/stylesheet.css" type="text/css">
or
<style type="text/css">
#import "/stylesheet.css";
</style>
or
<style type="text/css">
body { color:green; }
</style>
To add insult to injury, and I should have included this above, everything above the <body> tag (and including the body tag itself) is stripped out upon saving the file in their in-software HTML editor. They have some kind of auto-code modification scripts that reference the "approved" code in their style guide, and strips what's left. So what am I left with? Not much at all. Basically from between opening <table> to the closing </table>. They even strip out </body> and </html>.
With the remaining code, I'm unable to use #media at all or allow any <td> stacking. So, are their any alternate ways of linking to a style sheet you know about? ...a method that will allow stacking without access to CSS? I'm basically looking for a way to make these emails responsive under the restrictions outlined above.
I uploaded the style guide to JSfiddle: https://jsfiddle.net/Lxfqus7f
Yes, yes 100 times yes. Everyone who has ever designed an email template has had the same complaints. Email design is Web design circa 1999. First off just forget CSS references just inline everything you can and do not bother with #media tags, forget they even exist.
Table Design
Think of a <table> as a spreadsheet, a <tr> as a table row, and a <td> as a table cell. Instead of "stacking" TDs try nesting tables. A new table can go inside a TD and in a sort of Matryoshka doll style fashion you can make any layout you want.
<table>
<tr>
<td>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>5</td>
</tr>
</table>
The above works fine.
Responsive emails
The words responsive and email do not normally go together. What email clients render is severely limited but there are ways to work around it. Like setting your Master Table's width to 100% and having two TDs on each side. Like this:
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="500px" valign="top">
<td width="*" bgcolor="#00FFFF"> </td>
<td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td>
<td width="*" bgcolor="#00FFFF"> </td>
</tr>
</table>
Here are both examples in a JSfiddle.
http://jsfiddle.net/e8r9ky4x/
Looks like your style guide includes the use of some inline styles:
<p>Our studio is <span style="color:purple">purple.</span></p>
Define sections of text that require different HTML <div>
<div style="color:#FC8301">
<h3>This title.</h3>
<p>This is sentence.</p>
</div>
Since you're automatically generating emails anyway, why not just let this one slide and declare your styles in variables and use them where appropriate?
Are they stripping out all style tags? Could you just put a style hidden at the begginning of a TD?
<td><style>/*rules are for quitters!*/</style>Stuff</td>
Using a style tag in the body may not be the best of things to use and may even induce vomiting in many web developers, but it IS a possibility to utilize in Email.
I would strongly recommend not to use it this way outside of cases like you have listed, and would recommend HEAVY testing across all clients as it can sometimes cause buggy results.
I would look to make your inline styling do most of the heavy lifting and just use the style tags in body for items that cannot be done any other way.
Below is some good resources on Responsive HTML email made to work on GMAIL APP (which strips the style tag almost completely) and should help give you a baseline on best way to create your emails.
Hybrid coding approach - http://labs.actionrocket.co/the-hybrid-coding-approach
Hybrid coding redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2
Is Hybrid right option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question
Working on an email blast and for the life of me I cannot get the text to center in mobile view. The URL is: http://strictpixel.com/clients/relevant/fbc/email/
I am referencing the top navigation, under the logo. In mobile, it slides to the left and I am not sure why.
I know this is something simple but I have been pulling my hair out for an hour.
Thanks!
Yeah that really is a mess and you should consider refactoring. There's no way you need all those nested tables.
However, if you plan to keep it this way, the problem is likely stemming from your HTML being invalid. First, the <center> tag is dead and should not be used. Second, you break the flow of your table structure beginning after the comment I inserted below:
<p class="template-label">469-952-6404</p></td>
<td class="expander"></td>
</tr>
</table>
</td>
<!-- You can't start the new table below here without first either
opening a new <td> or closing the <tr> and <table> that is open!! -->
<table class="container">
<tr>
<td class="wrapper">
<table class="twelve columns" style="background-color:#f1f5f8;vertical-align:center;">
...
My best guess is that you missed opening up the next <td> tag just before that table begins.
Use an online HTML validator to help you find where your table structure is broken. Something like http://www.freeformatter.com/html-validator.html may prove useful.
I've actually created a template on Mailchimp. I used a basic template of Mailchimp and transformed it into the design they gave me. I used the the CSS inline tool of Mailchimp to insert all the code in an inline mode as Gmail does not accept any style on the header. I only have this issue on Gmail, the rest work perfectly. What can I do?
As the code is long I inserted it in a fiddle if you wish to check it out:
http://jsfiddle.net/z27Bw/
I need an answer as its a mystery for me!
You have 2 unclosed <td> tags in the HTML -- one on line 476, one on 482. That might be what's causing the issue in Gmail. If that doesn't fix it, I'd say yeah, it might be a colspan issue.
you can try this
Write first tr code like this
<tr>
<td colspan="2" height="281"> </td>
</tr>
instead of
<tr>
<td width="35" height="281"> </td>
<td class="headerContent"> </td>
</tr
>
and then put that big header image inside it.
I created a design for my website. I am planning to make it with TABLES because it seems to be the easiest. The tables are not going the way I intended.
There was a problem putting the code on the page so I put my HTML document (.html) and the way I want it to look (.jpg) in the below zip-file link:
http://ericlounge.host22.com/000/22014/0aa.zip
If someone could give me the code or explain my error that would be great!
I would avoid using tables, but it's your choice.
<Table>
<TR>
<TD rowspan ="3">
Navigation
</TD>
<TD>
TITLE
</TD>
<TD rowspan ="3">
SideBar
</TD
</TR>
<TR>
<TD>
ADS
</TD>
</TR>
<TR>
<TD>
Content
</TD>
</TR>
</Table>
This does not answer your question, however, it will give you reasons why you should look at a different approach for your layout/design rather than tables.
Why not use tables for layout in HTML?
To counteract the "tables is the easiest" option then have a look at Yahoo's YUI templates and examples. These can probably produce exactly what you are after with little effort.
http://developer.yahoo.com/yui/grids/