<table width="825" border="0" cellspacing="1" class="tableLines1" cellpadding="0">
<tr>
<td align="left" valign="middle">Account / BIC</td>
<td align="left" valign="middle">Name</td>
<td align="left" valign="middle">Email Address</td
</tr>
<tr>
<td ><%=Data.getAccount())%></td>
<td ><%=Data.getName())%></td>
<td width="250px"><%=Data.getEmailAddress())%></td>
</tr>
</table>
I have the following table. This data object get populated from database. The problem is when email address gets bigger the width of table also increases. For example
emailAddress = lolol#ghgg.fdg, jjjjjjoj#hiuh.com, jojo#hsc.comddddddddddddddddddddddddddddddddd
then html intelligently breaks it from spaces and make three two rows like this.
lolol#ghgg.fdg, jjjjjjoj#hiuh.com,
jojo#hsc.comddddddddddddddddddddddddddddddddd
but what i want is that if emailAddress size increases a certain value table size i.e column width should remain constant.
lolol#ghgg.fdg, jjjjjjoj#hiuh.com,
jojo#hsc.comdddddddddddddddddddddd
ddddddddddd
To be more specific i want the data to be displayed as shown above!
Can anyone please guide me. Thanks !
Edited : I want html to intelligently decide the column widths itself. Just not itself increase the table width from the specified value !
Use this CSS rule: word-wrap: break-word;
break-word means the text will wrap to next line.
word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
you can try wrapping your email address in a div with overflow set to hidden or scroll
<td width="250px"><div style="overflow:hidden; width:100%"><%=Data.getEmailAddress())%></div></td>
Related
I am customizing forms in NetSuite and have gotten everything to work as I would want, except the footer. For some reason the text-align: center function is working based on the number of characters in the row of the footer, rather than the center of the page. Below are images of my code and print examples that show the error better. The only difference in the code between footer code images 1 and 2 is that I removed the word "number" in row 55 to depict the centering is based on characters.
Footer Code 1
Footer Print 1
Footer Code 2
Footer Print 2
If you were to show the borders on your tds you'd get a better sense of what's going on. Basically you are not providing hints for the td and table sizes so the normal table width processing is happening. ie. the tables will only be wide enough to hold the text so they appear to be text size based.
Also I suspect you have a lot more markup than you need. The following will give you what I think you are looking for. Note that you may want to play with padding to get the correct left and right alignments.
<macro id="nlfooter">
<hr />
<table class="footer" style="width: 100%;">
<tr>
<td align="left" colspan="4">email</td>
<td align="center" colspan="6">Phone</td>
<td align="right" colspan="4">Page info</td>
</tr>
<tr>
<td align="center" colspan="14">
<b>Thank you</b>
</td>
</tr>
</table>
</macro>
I have a webpage at http://bikepaths.com/Armstead/GBA1.html , and I have set up an HTML table to arrange text and pictures using rowspan such that the first column has a small amount of text above a tall picture, while the second column has a tall picture above a small amount of text.
<table>
<tr>
<td>George's first memory of note was ... </td>
<td rowspan="2"><img src="image/IM-GBA1885.jpg" height="440" width="280"></td>
</tr>
<tr>
<td rowspan="2"><img src="image/IM-JBA4-GBA.jpg" height="400" width="280"> </td>
</tr>
<tr>
<td>Also he recalled watching his half brother, James Benson Armstead IV <i>[on left]</i>, go through .... </td>
</tr>
</table><br>
So 3 rows, with rowspan=2 on each of the picture cells.
This displays as desired in both Firefox and Chrome, but the MS browsers I have tried (IE11 and Edge) both display it as a simple 2-row table, leaving massive amounts of space above and below each text cell.
I know MS should be banned from creating browsers until they learn what 'following standards' means, but until that happens, is there a workaround to make this display properly in IE and Edge?
<table style="table-layout:fixed">
<tr><td></td><td></td><td></td></tr>
<tr><td colspan="3">three colunms width</td></tr>
<tr><td colspan="2">two columns width</td><td>one column</td></tr>
<tr><td colspan="1">one column</td><td colspan="1">one column</td><td colspan="1">one column</td></tr>
</table>
note that the sum of the colspan attribute values or the sum of the number of td elements in each row equals the number of td elements established by the first (hidden, because the td cells are empty) row.
go to validator.w3.org/nu and copy and paste your markup into the direct input form and then press the validate button.... the w3 validators can detect where the number of td elements and the sum of colspan attributes does not match.
I'm building an email and for some reason my table widths alter when viewing in Outlook 2013 DPI 120. This is a new email client added into Litmus so I'm not sure how to fix. I have three tables in one full width table and the widths are changing, breaking the layout. Any ideas how to fix?
<table align="left" border="0" cellpadding="0" class="fullWidth" style=
"padding:0px; margin:0px;border:1px #333 solid;" width="178">
<tr>
<td style="padding:20px;">
<table align="left" border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td style="color:white;text-align:center;padding:10px 5px;font-size:13px;
font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;border-bottom:1px solid #fff;">
<strong>A title</strong></td>
</tr>
</table>
</td>
</tr>
</table>
It is fine in every other client.
The issue is due to Outlook scaling the content to a larger size, forcing your images and other declared items to resize. This can destroy your layout and there is really nothing you can do to change it - it is a setting client-side on the subscribers computer.
Your best way to fix this is to use MSO conditionals to wrap into a single table and separate each column into a separate td. Or to use the TD or TH stack (TD no longer works in Android) with media queries. Outlook will stretch the table to fit two columns, but will not stretch the table to fit two tables, it will instead force the second table below the first.
I'm having an impossible time getting border-collapse to work for me. The page I'm working with has a table in it. The table has 2 columns, one for a label and the other for data. Sometimes there is no data to display, but I still need to rendor the table row and label column because I have a JQuery script that might need to write data to the data column. In other words, regardless of whether there is data or not, I need to rendor the table row as a placeholder. If there is no data I want the row to collapse.
In the html below, visibility:hidden is working since I won't see the label 'Condition:', but the row doesn't collapse. I've tried looking at it in FireFox 13, Safari 5 and IE 8. All three show the same problem - the row never ccollapses even though it doesn't display anything.
#data
{
font-size: 95%;
}
#data table
{
border-collapse: collapse;
margin-top: 15px;
margin-bottom: 15px;
}
#data table td
{
padding-left: 5px;
}
<div id="data">
....
<table>
<tr style="visibility:hidden;">
<td><div class="datalabel">Condition:</div></td>
<td class="datainfo"></td>
</tr>
</table>
....
</div>
What more do I need to do to make this happen? I'd like it to be cross-browser compatible. I'm trying to support IE7 and above. I'm guessing someone is going to give me hell for using a table in the first place... ;)
The visibility property determines whether a given element is visible
or not (visibility="visible|hidden"). However, when visibility is set
to hidden, the element being hidden still occupies its same place in
the layout of the page.
Display VS Visibility
use display:none; to hide and display:block; to show
<table style="border-collapse:collapse;">
<tr style="display:none;">
<td><div class="datalabel">Condition:</div></td>
<td class="datainfo"></td>
</tr>
</table>
Note: border-collapse:collapse; is used in a situation, where you have borders specified for container and the contained and you want border to be displayed once.
<table border="0" cellpading="0" cellspacing="0">
and try to use and &nbps; or something like that, if you don't have data in a cell
something like:
<table border="0" cellpading="0" cellspacing="0">
<tr style="visibility:hidden;">
<td><div class="datalabel">Condition:</div></td>
<td class="datainfo"> </td>
</tr>
</table>
I was wondering if I use colspan attribute in a HTML table that I intend to have as an email, will email clients (Outlook etc...) understand what colspan does, as I have read that this might cause an issue with the layout?
Colspan and rowspan are both fully supported in all major email clients. They are more difficult, but if you get it right they are a great option in combination with nested tables.
The reason they have a bad reputation, besides the difficulty is because there is a particular quirk in Outlook you need to take into consideration, otherwise your layout can break.
Colspan:
Outlook has an issue where if you put a colspan in the first row of a table, it will mess up the widths of the subsequent rows. The work around for this is that you need to specify your cell widths in the top row, even if it is an empty row.
Here is an example:
<!-- the second row in this example will not respect the specified widths in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
</td>
<td width="400">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
Rowspan:
Even more avoided than colspan is rowspan. I've found it can actually display more consistently than nesting tables depending on your target audience. This is because rows (particularly a spanned one) do not separate as much as tables when forwarding the email from Outlook due to the <p class="msoNormal"> tags Outlook wraps around them. These gaps are particularly unavoidable if someone forwards your email to Gmail.
One thing to note is that rowspan doesn't seem to work with Blackberry (which I wouldn't consider a major client). So like with anything in html email, you need to play the percentages game and decide where you least want it to break.
A basic example of colspan and rowspan working together:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr><!-- hidden row to establish widths in Outlook -->
<td width="200">
</td>
<td width="200">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#333333">...
</td>
<td width="200" height="400" rowspan="2" bgcolor="#444444">...
</td>
</tr>
<tr>
<td width="200" height="400" rowspan="2" bgcolor="#555555">...
</td>
<td width="200" height="200" bgcolor="#666666">...
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#777777">...
</td>
</tr>
</table>
To accomplish something similar to this without rowspan/colspan, you would have to split the rectangular table cells into small squares. Imagine if the top right cell was an image overlapping the header see this question for a real world example. If you were to avoid rowspans and split the logo image horizontally within two stacked cells, this would become problematic when Outlook does it's msoNormal thing. Nobody likes a seam in their image.
In html email, you can always split images vertically without any risk of seams/gaps, but as a rule, you should always avoid splitting an image horizontally. Rowspan helps to avoid this in scenarios when you want overlapping images.
One last note - Outlook also has the same spanning issue with rowspan as it does with colspan. You need to establish your row heights in the first column for it to respect the heights of the subsequent spanned rows. Here is an example of that. Note the first cell in each row is empty.
Just thought id add a bit of input to your question
Colspan can be used but i would suggest against it. Whenever i create emails (6 months experience) i have always used nested tables. Also you can only use inline css in emails so i would be very careful using even margin and padding.
Couple of things i do on every email.
Always use this code in every image on your page. It will correct a gmail space below the image bug.
style="display:block"
Also use border="0" on any image links to stop a blue border appearing.
I hope this helps!
Another tip in addition to the style="display:block' is to add line-height:0 on the with an image in - this sorts out the odd whitespace bug in Outlook 2007.
I use colspans all the time but also nest tables where possible - avoid rowspans - they are are nightmare, and when you do nest tables don't go too mad and nest 4 / 5 or 6, I find that starts to muck things up.
Yep. All HTML markup is allowed in most if not all email clients. When it comes to scripting, then you've got an issue to contend with, for scripting is simply not allowed by most if not all email clients.
Rowspans and Colspans are okay but I would strongly suggest you use nested tables. You will have extra lines of code, however, this will save you from any breaks on other email clients.