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>
Related
I'm totally stuck trying to figure out why setting a td width attribute in the following table is throwing off the display.
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
The above is rendered with the word "Invested" outside of the table entirely (see screenshot).
Any thoughts on why this might be happening? Thanks in advance!
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
</tr>
</tbody>
</table>
Problem:
All you have to do is to format your code. There is a NON-BREAKING-SPACE between td and style <td style (the one with the Investment text) that destroys the layout. To reproduce you can delete the whitespace and add the whitespace again.
Note:
You have to <big><big> there wrapped - this can be reduced to just one element.
<table style="width:100%">
<tbody>
<tr>
<td colspan="4">
<big><b>Investments By Bruce Wayne</b></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
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/
This sounds very similar to previous questions, but I've not found something that matches what I'm trying to do here.
My current code (very verbose with everything in line) looks like this:
td { border: 1px solid black }
<table style="table-layout:fixed">
<tr>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
</tr>
<tr>
<td style="width:25%;text-align:center">Some text here</td>
<td style="width:25%;text-align:center">More text</td>
<td style="width:25%;text-align:center">Hi</td>
<td style="width:25%;text-align:center">Somewhat longer text</td>
</tr>
</table>
What I'm trying to accomplish should look like this:
That is, the four main columns should all be the same width, which is the width of the largest content of any of the columns.
The green columns should always be 30px, and the red and blue columns should fill the remaining space each side of that middle column, only up to the width available in the auto-sized outer column.
Setting the internal tables to 100% width makes this happen, but of course the outer table then takes up the entire page width.
I'm also aware that using tables for this is probably not a great idea now we can use CSS, but I'd like to get this example working in tables before 'translating' it.
I'm very opposed to using JavaScript to solve this, for the record!
Edit: I also tried putting all 'subcolumns' in one row, and setting the text to colspan three at a time, with the 25% then applied to that. This ended up confusing the engine, and the width ended up about 75% of the page.
<table style="table-layout:fixed" border="1">
<tr style="font-size: 1px;">
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
</tr>
<tr style="font-size: 6px;">
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
</tr>
<tr>
<td colspan="3" style="text-align:center">Some text here</td>
<td colspan="3" style="text-align:center">More text</td>
<td colspan="3" style="text-align:center">Hi</td>
<td colspan="3" style="text-align:center">Somewhat longer text</td>
</tr>
</table>
this might solve your answer, your previous code html elements are not properly closed look on that also.
<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 have the following table.
<table>
<tr>
<td align="right">
<b>Car Name:</b>
</td>
<td>
<div><%=Model.DataMayLoad1%></div>
<div><%=Model.DataMayLoad2%></div>
<div><%=Model.DataMayLoad3%></div>
<div><%=Model.DataMayLoad4%></div>
</td>
</tr>
</table>
The "Car Name:" column is right aligned, but in the center. Is there a way to align that column to the top right corner?
<table>
<tr>
<td align="right" style="vertical-align: top;">
<b>Car Name:</b>
</td>
<td>
<div><%=Model.DataMayLoad1%></div>
<div><%=Model.DataMayLoad2%></div>
<div><%=Model.DataMayLoad3%></div>
<div><%=Model.DataMayLoad4%></div>
</td>
</tr>
</table>
Use: <td align="right" valign="top">