HTML to Excel changes the code - asp.net

In asp.net (vb), I am trying to write the HTML output that I can have a user open up a report in Excel. It's writing my file fine, but when Excel opens the file it is changing the HTML code. The part that it really changes are formulas!
For instance, I am writing out the following (part of the file):
<table>
<tr>
<td>Trial</td><td x:num x:fmla="=SUM(A2:A10)">0</td>
</tr>
</tr></table>
If I open the file in Excel, the cell has a formula of SUM(A13:A21).
Is there something I can do to prevent Excel from changing this when it opens? I want it to have exactly what I write, but it is changing A LOT!
Thanks for any ideas.

This gives me the expected outcome:
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<table>
<tr>
<td>Trial</td><td x:num x:fmla="=SUM($A$2:$A$10)">0</td>
</tr>
</tr>
</table>
</html>
Even without the $ the formula remains as-written: no adjustment.
Excel 2013/Win7

Tim headed me in the right direction, so thanks.
I'm posting what I found was my idiotic error, just to answer the question. No one is going to do what I did, but here it is.
I was doing a "table" tag for everything when I wrote my program, so my HTML looked like this:
<table><tr>
<tr>
<td x:num>11</td>
<td x:num>12</td>
<td x:num>13</td>
<td x:num>14</td>
</tr></table>
<table> <tr>
<td x:num>21</td>
<td x:num>22</td>
<td x:num>23</td>
<td x:num>24</td>
</tr></table>
<table> <tr>
<td x:num>31</td>
<td x:num>32</td>
<td x:num>33</td>
<td x:num>34</td>
</tr></table>
<tr>
<td>Total Weight</td>
<td></td>
<td x:num x:fmla="=SUM(D4:D10)">0</td>
</tr>
</table>
Obviously, that was changing everything. Changed it to one "table" at the top and "/table" at the end to fix it all.
Thanks for the help!
Ed

Related

css to avoid extra space due to page break in outlook mail , while sending mail from mailchimp?

while sending mail from mailchimp to outlook mail, I'm getting extra space(may be page break).Below is my html skeleton,which i'm sending.
When i keep on adding image2 inside "Td32" in below skeleton i'm finding an extra space between images.
Please can anybody suggest me how to avoid page break or unwanted space?
<table class="T1">
<tr>
<td>
<table class="T2"></table>
<table class="T3">
<tr><td class="Td31">Text</td>
<td class="Td32"><div class="repetableimg1">image1</div>
<div class="repetableimg2">image2</div>
</td></tr>
</table>
<table class="T4"></table>
</td>
</tr>
</table>
Best bet is to eliminate the whitespace (linefeeds, etc) between the closing > and opening <... depending on your platform, you should be able to use a regex similar to this... input.replace(/\>[\s\r\n]+\</g, '><')
Also the table:
<table
border=0
cellpadding=0
cellspacing=0
style="border-collapse: collapse; border-spacing: 0;"
>
<tr>
<td style="padding:0">
...
Email rendering is fairly inconsistent, and best to use 1998 rules regarding your html markup and styling.

Bootstrap table tbody scroll

I'm trying to customize my bootstrap table. If the table height is larger than a certain height I want the <tbody> to scroll without scrolling the rest of the table. I have tried pretty much everything I can think of but the table wont even change sizes.
Does anyone know what classes I need to modify to fix this? Here's the elements I use in my table:
<div class="table-responsive">
<table class="table table-condensed">
<colgroup>
<col class="col-xs-1"/>
<col class="col-xs-1"/>
</colgroup>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
And here's a jsFiddle.
I ran into a similar problem with Bootstrap 2.3.2. I had to modify my table some, but a pretty good website I found with a complete css solution is here:
http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html
I basically took the scrollableArea and scrollableContainer css parts on this site, changed a couple class names to match with what I already had, and used this instead of bootstrap. Maybe this can help, maybe not, but definitely a good alternative.

Now Outlook and Outlook.com add margins to paragraphs inside cells! How to avoid?

Today I was testing emails and email signatures with outlook.com and while I'm sending from Outlook 2007 I found both add the usual unnecessary paragraph with msoNormal class around my content in the table cells.
That give stupid 13.5pt line-height and other paragraph 14pt bottom margin.
I did managed the line-height issue but I still receive it on outlook.com with that bottom margin (14pt) with spans inside or only text .. with styling or not while it's fine on all other mail providers / clients.
HTML for test
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="80" style="height:13px;">data</td>
<td style="height:13px;">data</td>
</tr>
<tr>
<td width="80" style="height:13px;">data</td>
<td style="height:13px;">data</td>
</tr>
<tr>
<td width="80" style="height:13px;">data</td>
<td style="height:13px;">data</td>
</tr>
</table>
Screenshots
Here after a couple of screenshots for the problem with and without styling:
Without any type of styling
Here is how it should be and how it appears on Gmail while it was sent also from Outlook 2007
There is no way to avoid the Outlook msoNormal gaps on forwarding to Gmail. Here is an interesting article on the topic.
There are ways to limit it's effect though. The gap created between tables is bigger than the gap created between table rows. As you have rows, you are already experiencing the lesser.
The easiest fix would be simply combining your rows into one row with <br>'s separating the lines of text.
Example:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100">
address<br>
phone<br>
fax
</td>
<td width="500">
: your address<br>
: your phone<br>
: your fax
</td>
</tr>
</table>
This may also have something to do with the min <td> height. Outlook has a minimum height of 19px, so anything smaller can create unwanted vertical space. There are some line-height hacks, you can try to work around this also.

select specific column in all rows from table header class name

In a table all <th> are having class and <td> dont.
Is it possible to apply the styles from those <th> class to all its corresponding <td>'s with plain css and dont need of any script?
Additionally table is dynamic and so columns index may differ. So i cant use nth-child and only way i can navigate it with class.
Here is the Fiddle
Any better ideas for cross-browser?
Update:
table may have n number of columns and not limited to 2 columns
You could handle this using <col>, http://www.quirksmode.org/css/columns.html#background, only other way I see would need to add the classes everywhere or to use JS.
Try this
<table>
<tr>
<th class="a">`Column A`</th>
`<th class="b">`Column B`</th>
</tr>
<tr>
<td class="a">`aaa`</td>
<td class="b">`bbb`</td>
</tr>
<tr>
<td class="a">`ccc`</td>
<td class="b">`ddd`</td>
</tr>
</table>

How to set size for divs with different parents

I want to create a div layout which is similiar to the following table result:
<html>
<head>
<title>Basic</title>
<style>
table { border: 1px solid;}
</style>
</head>
<body>
<table style="border: 1px solid;">
<tr>
<td> Asia</td>
<td>
<table>
<tr>
<td>South Asia</td>
</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>Singapore</td></tr>
<tr><td>India</td></tr>
</table></td>
</tr>
<tr>
<td>Monarchy</td>
<td><table>
<tr><td>Bhutan</td></tr>
<tr><td>Nepal</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>East Asia</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>China</td></tr>
<tr><td>South Corea</td></tr>
</table></td>
</tr>
<tr>
<td>Constitutional Monarchy</td>
<td><table>
<tr><td>something</td></tr>
<tr><td>Japan</td></tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
I managed to replicate this with some effort. The problem is that I want the names of the countries to be in a column or if you will - the containers for the government types to be the same width so other containers will align.
If I don't do it in nested containers (in the example - nested tables) the rows will get displaced. Currently rows are shown exactly how I want them - the text is in the vertical middle of the what they refer to.
Only thing that comes up to my mind is to set the text in the same columns as class=column1, class=column2, etc. and then somehow define the width for the column classes. Problem is the data is defined dynamically and I can't say how much pixels or % of the page I can give to a column, I just need it to stretch with the text.
This is my first time I ask about help here so if I am doing it wrong, tell me how do improve my inquiry.
EDIT: I just read it a second time and I noticed my title doesn't match my question.
My second idea to work around this was to have more than one parent to a single div without the parents having a relation between them, is this even possible?
If you're looking for a decent grid framework for your CSS, I highly recommend blueprint. As for not knowing the pixel or % for the column, that will always be a problem. Are you able to 'play it safe' and just give them a large enough box to handle all text possibilities?

Resources