I'm working on a site targeting older feature phone type mobiles that have limited css and html support. I have a table with a single row and two cells, that each contain a link. Ideally i would like both to be clickable. I tried a div solution but on some of the phone browsers I tested the text would dissapear, I assume because this is not entirely semantical.
Any sugggestions on how to accomplish this without using a div?
here is my html
<div><table style="width:100%;"><tbody><tr>
<td class="leftTd"><Left</div></td>
<td class="rightTd"><a href="link2>Right</a></td>
</tr></tbody></table></div>
The markup of the HTML you gave isn't valid. Here it is as valid markup
<table style="width:100%;">
<tbody>
<tr>
<td class="leftTd">Left</td>
<td class="rightTd">Right</td>
</tr>
</tbody>
</table>
then if you make sure the a element are set to display: block; e.g
td a {
display: block;
}
DEMO
td a {
display:block;
width:100%;
height:100%;
}
Also fixed your HTML markup from errors:
<div>
<table style="width:100%;">
<tr>
<td class="leftTd">Left</td>
<td class="rightTd">Right</td>
</tr>
</table>
</div>
In the first link, you have a stray <.
In the second, you didn't close the quotes after href.
Old phones typically have browsers that won't grok broken HTML syntax very well, so I think this is the reason the links won't render.
I suggest you use an editor that checks HTML syntax, or at least some checker like the W3C validator.
HTML4 event attributes
<table border="0" style="cursor:pointer" onMouseover="window.status='http://www.stackoverflow.com/'" onMouseout="window.status=''" onMouseup="window.location='http://www.stackoverflow.com/'" width="158" height="158" style="background-image: url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png')">
<tr>
<td style="display:none;">This entire table is a link with no content</td>
</tr>
</table>
Related
Hello guys i am trying to send an email with HTML in it, and of course i know that the formatting and alot of CSS is not supported in Outlook, but i was wondering why this simple thing was showing broken, is there any quick fix or a workaround/alternative? look at how the buttons should appear:
http://puu.sh/84ijt.png
But they appear like this:
http://puu.sh/84ijA.png
Here is the code for it:
<tr>
<td style="display:block;min-height:38px;max-height:38px;">
<p style="margin-left:15px;">
<a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;"
href="link here..">Enquire</a>
Full Details
</p>
</div>
</tr>
</td>
There is a bit of mis-information in this thread.
You can use an image for a button, however more advanced designers are trending towards "bulletproof" buttons these days. They display with images turned off. See this link: buttons.cm
Background images are supported in Outlook, but only in the <body> tag OR using VML, see the buttons.cm link above or backgrounds.cm for examples.
Back to your specific example, there are a few ways to accomplish it, but here is how I would do it:
<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
<tr>
<td style="padding-top:20px; padding-bottom:10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Enquire
</td>
<td width="20">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Full Details
</td>
<td width="50">
</td>
</tr>
</table>
</td>
</tr>
</table>
On a side note, you need to use the 6-digit hex colors in html email, and don't waste your time with the following css properties as they have inconsistent support:
margin (use padding instead)
text-align (use align="" instead)
min-height & max-height
float (use align="" instead)
background-color (use bgcolor="" instead)
Also, avoid shorthand like padding:5px 5px 0px 5px;. Unfortunately you need to write it out padding:5px; padding-bottom:0;
As an email marketer I suggest you use an image for your button. Especially if it is a call to action. The one thing you don't want to be broken is that, and the only way you can trust it wont be and that is to use an image within a table cell.
I hope that helps!
Have you tried giving the <td> the background-color? (or another container)
You could also try
<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>
I haven't tested in Outlook but it might work.
Using images isn't the best solution, especially since most of the time emails are rendered without images until the user accepts to view images.
The way I do it is a table with in a table, so something like this:
<table width="outside container width here">
<tbody>
<tr>
<table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned">
<tbody><tr><td>Your button actually goes here</td></tr></tbody>
</table>
</tr>
</tbody>
</table>
I have this HTML code:
<body>
<table width="650">
<tr width="650">
<td width="650">
lots of text here
</td>
</tr>
</table>
</body>
How can I use a variable/constant to represent 650? Do I need to use javascript or something?
What I really want is a way to reuse some code so that I only need to change the width value in one place.
Nb. I'm not using a database or anything. Just a simple html page, so I'd like to do something like:
int x = 650
Using css:
table,tr,td{width:650px;}
CSS
table, tr, td {
width: 650px;
}
HTML
<body>
<table>
<tr>
<td>
lots of text here
</td>
</tr>
</table>
</body>
So. I am creating a small site to test my capabilities.
In my site i have a page that in Firefox looks like this:
The additional files and additional actions buttons are inside a table. and each button is inside a <td> which are set to appear one under another with CSS using display:block; on the <td> element.
The problem is that when i open the page in IE9 or lower the td's are shown inline like this:
Because of this the responsiveness of the page is broken and resizing the viewport will move the page content below the left menu...
Here is the HTML of the tables:
<table class="buttons">
<tbody>
<tr>
<th colspan="2">Additional files:</th>
</tr>
<tr>
<td>
<a id="cv" href="">Curriculum Vitae</a>
</td>
<td>
<a id="cover" href="">Cover Letter</a>
</td>
</tr>
</tbody>
</table>
<table class="buttons">
<tbody>
<tr>
<th colspan="3">Additional actions:</th>
</tr>
<tr>
<td>
<a class="approve" href="">Denie</a>
<span style="display: none;">31</span>
</td>
<td>
Reply
</td>
<td>
Delete
</td>
</tr>
</tbody>
</table>
And this is the CSS:
.buttons {
float: left;
margin: 20px auto 0;
width: 50%;
}
.buttons td {
display: block;
width: 100%;
}
Can anyone suggest me a solution?
Thank you in advance!
You need to set table-layout: fixed; to your table and if still not working add a div inside td and manage the css which might work.
The real answer here is that you shouldn't be using <table> tags for this. What you have there is not a table, and so <table> is not semantically correct.
It's even worse because you're then overriding the default table layout by using display:block, which moves us even further away from wanting to use a <table>.
By using tables like this, and forcing the browser to restructure it with CSS, you're making it quite confusing for the browser. Particularly with the colspan attributes and then three columns of buttons, when you actually want them all in one column. Its easy to see why you'd get inconsistent behaviour with this, especially with older browsers.
So the solution here is to swap your <table> layout for a set of <div> elements. This will be semantically correct, and it will be easier to get it styled consistently. And you'll need less markup as well.
If you really want to carry on using tables for this layout, then you need to re-style all the elements -- display:block on the tr elements doesn't affect the display property of the table, tbody and tr elements, and these would also need to changed. But really, I would avoid that. Just use divs; it'll make things much cleaner.
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.
I want to put a background image in only 1 cell of the table. When I'm specifying in table tag or in 'style' background is being applied to whole screen. Is it possible to specify different local images to different cells in a table using only html?
Relevant HTML (from comment by the OP):
<table align="center" height=501 border=2>
<tr>
<td height=167 align="center" style="background: (C:\Users\user\Desktop\4R9EF00Z.jpg);">[here]
Apple pie s</td>
<td rowspan=3 width="80%"> <b>Ingredients</b> .........</td>
</tr>
</table>
<table style="width: 100%; height: 300px; ">
<tr>
<td style="background-image:url(http://www.housecatscentral.com/kittens.jpg)">CELL ONE</td>
<td>CELL TWO</td>
</tr>
</table>
Ways to apply the style:
Inline style (usually not the preferred method)
Class selector
CSS2/3 hierarchy selector or pseudo-class
ID selector
Simply use inline CSS on the <td> element of the cell.
For example:
<td style="background: url(/resources/images/background.png);">
Specify your background (using style attribute) for <td> tag (or <th> tag)
You have to specify it to the cell (td tag), not to whole of table.
do it like this:
<tr><td style="background-image:url('yourPath')"></td></tr>
HTML:
<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr>
<td class="cell">Cell 1</td>
<td id="cell">Cell 2</td>
<td style="background-color: yellow">Cell 3</td>
<tr>
</table>
CSS:
.cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
#cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
Preview here: http://jsfiddle.net/384An/
With CSS there are two ways, assign an id to the cell:
#tableCellID {
background-image: url(path/to/image.png);
}
Or use nth-child:
tbody tr:nth-child(2) td:nth-child(3) {
background-image: url(path/to/image.png);
}
Combining both approaches in one JS Fiddle demo.
If you must use in-line styles (and I heartily recommend avoiding this if you can):
<td style="background-image: url(path/to/image.png);">...</td>
Or, possibly (but it's deprecated):
<td background="path/to/image.png">...</td>
But, please note that I do not recommend, or support, using either of these approaches. Certainly the final approach is horrible, but if it's the only approach you can take then...just don't tell me you used it. It's horrible, and it'll keep me awake for days feeling guilty.
Updated the previous JS Fiddle demo.