I have the following html in one of my mails:
<center>
<table class="button">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</center>
The problem is that on Gmail this Set Now button is properly centered but on Yahoo it is aligned to the left side. Here is picture that shows the problem:
Try following code :
<td align="center">
Set Now
</td>`
Nesting another <table> is safer than using <center>. This should cover all your bases:
<td style="text-align: center;">
<table class="button" align="center" style="margin: auto">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</td>
Try with
<table class="button" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center">
Set Now
</td>
</tr>
</tbody>
Set margin-left and margin-right to auto to the parent table. Like this,
<table class="button" style="margin-left:auto;margin-right:auto;">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
Although I must say that only styling the anchor tag to be a button is not going to work across all email clients, you probably should use code generated from here https://buttons.cm/
Related
I'm doing a text over an image and learning how to do the text size and position so it will look align, and right now I really don't know how to make the gap in between the h3 and p smaller.
I don't want to use CSS if possible I want it to be in HTML only just using the style in the code.
If you have a better way to do text over an image and multiple sentences with adjustable gap size and use each sentence use different font. It will be great.
Image from desktop
<table width="600" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#f9c9d5">
<td></td>
<td rowspan=2>
<img src="bimage/box.jpg" alt="box">
</td>
</tr>
<tr>
<td colspan=2>
<h3 align="center" style="font-size:20px"> WELCOME</h3>
<p align="center">Jinho</p>
</td>
</tr>
</table>
you can use line-height property
<table width="600" cellspacing="0" cellpadding="0" align="center">
<tr bgcolor="#f9c9d5">
<td></td>
<td rowspan=2>
<img src="bimage/box.jpg" alt="box">
</td>
</tr>
<tr>
<td colspan=2>
<h3 align="center" style="font-size:20px, line-height:0"> WELCOME</h3>
<p align="center">Jinho</p>
</td>
</tr>
</table>
It is not recommended to use tables and inline styles, but perhaps you meant this?
<table style="width:600px; height:132px; border-spacing: 0; border-collapse: separate;
background-image: url(https://i.stack.imgur.com/B49ut.jpg)">
<tr>
<td style="text-align:center;">
<h3 style="font-size:20px; margin-bottom:0">WELCOME</h3>
<p style="margin-top:0">Jinho</p>
</td>
</tr>
</table>
<table width="600">
<tbody>
<tr>
<td> <span>Price:</span> </td>
<td width="100%">
<table width="100%">
<tbody>
<tr>
<td style="width:100%;border-bottom:3px dotted #0b863c"> </td>
</tr>
</tbody>
</table>
</td>
<td>$30.9 sdfsdfd fgertwet</td>
</tr>
</tbody>
</table>
So I am trying to create a email template. It contains dynamic content with space. Every time when it has space inside the third column, it will create a new line. But I only want it to be in one line.
I know it works with white-space: no-wrap. However, white-space doesn't support in outlook -- https://www.campaignmonitor.com/css/. Any other ideas? Thanks!
See Expected:
<table width="600">
<tbody>
<tr>
<td> <span>Price:</span> </td>
<td width="100%">
<table width="100%">
<tbody>
<tr>
<td style="width:100%;border-bottom:3px dotted #0b863c"> </td>
</tr>
</tbody>
</table>
</td>
<td style="white-space: nowrap;">$30.9 sdfsdfd fgertwet</td>
</tr>
</tbody>
</table>
That is pretty much default behavior of text in HTML.
If you have control over the dynamic content, you could replace the spaces with non-breaking spaces ( ) as in the following example.
<table width="600">
<tbody>
<tr>
<td> <span>Price:</span> </td>
<td width="100%">
<table width="100%">
<tbody>
<tr>
<td style="width:100%;border-bottom:3px dotted #0b863c"> </td>
</tr>
</tbody>
</table>
</td>
<td>$30.9 sdfsdfd fgertwet</td>
</tr>
</tbody>
</table>
I am placing a heading/title on a HTML page using following code:
<table width="100%" height="55px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:10px">
</td>
</tr>
<tr>
<td style="width:105px;"></td>
<td align="left" style="padding-right:10px;padding-left:10px">
<div style="font-family:quicksand;font-size: 28px; color:##bdbdc0;z- index:1000000;position:relative;">
De Graef <font size="2">Landelijk & Sfeervol Wonen</font>
</div>
</td>
</tr>
</table>
Other content is in other tables.
When i zoom in or zoom out, or simply change resolution, this text is not moving it's position in sync with the other page elements.
Any ideas?
Change your header row to this :
<tr>
<td align="center" style="font-family:quicksand;font-size: 28px; color:##bdbdc0;margin-left:-50px;background-color:##4D4946;">
<table width="956" border="0" height="100%" cellspacing="0" cellpadding="0" style="background-color:##4D4946;">
<tbody>
<tr>
<td style="background-color:##4D4946;">
<br>
<br>
<img style="background-color:##4D4946;" src="images/logonew.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I'm helping you here but should seriously consider rewriting all of it in a clean and modern way, most of your code is deprecated :
Use appropriate HTML markup for segmenting your document
Use <table> only when then you need an actual table
Use separate CSS files for keeping your markup clean
Read the W3C recommendations about all of this
I am constructing a webpage using fairly elementary techniques. I have three rows on a certain part of the webpage, each of which is structured as . The text units and the listbox units of the different rows are in perfect horizontal alignment, but the vertical spacing between the listboxes is inconsistent. Furthermore the vertical alignment of each listbox in relation to its paired text is different. I've tried readjusting the table structure and experimenting with valign, but to no avail. How do I fix this so that it looks neat? Thanks!
You could set the height of each td by css like
td {
height: 50px
}
also you should check out some tutorials on how to design forms without using tables http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/
<form>
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%">
Please choose the test category:
</td>
<td align="left" width="50%">
<form action="">
<select name="categories" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%" valign="center">
Please choose the test:
</td>
<td align="left" width="50%" valign="center">
<form action="">
<select name="tests" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%">
Please choose the difficulty:
</td>
<td align="left" width="50%">
<form action="">
<select name="difficulties" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
This is only the present state. I've tried other things with it.
Edit:
That includes the non-existence of any valign things in there. When I tried adding them, nothing happened.
Look at this code:
<table width="100%">
<tbody>
<tr>
<td style="width:20%;"><span>hello world</span></td>
<td style="width:60%;">
<textarea style="width:100%;height:200px;"></textarea>
</td>
<td>
</td>
</tr>
</tbody>
</table>
The "hello world" in the left <td>
just stays at the middle (sometimes even at the bottom),
so what attribute should I set to let the word stay at the top of the table?
Here is an online example at JSFiddle
Just add vertical-align: top; to the td style.
See it here.
<table width="100%">
<tbody>
<tr>
<td style="width:20%;" valign="top"><span>hello world</span></td>
<td style="width:60%;">
<textarea style="width:100%;height:200px;"></textarea>
</td>
<td>
</td>
</tr>
</tbody>
</table>