I am working on a a html form which is used by a third party tool which takes HTML format to generate the output form.
Here is the html output:
This is the current output:
The issue which I am facing is when I trying to separate below marked table to a new table I am loosing the format. Can anyone please guide me how to maintain the same format when I remove the below mentioned table to a new table.
Here is my HTML code:
<table cellpadding="1" cellspacing="1" style="width: 100%; border-collapse: collapse; border: solid;">
<tbody>
<tr>
<td rowspan="4" style="width: 289.333px; text-align: center; border: solid;"><span style="font-family: Calibri, sans-serif; font-size: 11px;">section 1</span></td>
<td rowspan="4" style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">section 2</span></span>
</td>
<td rowspan="4" style="width: 289.333px; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">section 3</span></span>
</td>
<td rowspan="4" style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">4</span></span>
</td>
<td colspan="7" style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(4)<br> DAY AND DATE</span></span>
</td>
<td rowspan="4" style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(5)<br> section</span></span>
</td>
<td rowspan="4" style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(6)<br> section</span></span>
</td>
<td rowspan="4" style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(7)<br> section</span></span>
</td>
<td colspan="4" rowspan="3" style="text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(8)<br> DEDUCTIONS</span></span>
</td>
<td colspan="3" rowspan="4" style="text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">(9)<br>section<br></span></span>
</td>
</tr>
<tr>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Sun</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Mon</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Tue</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Wed</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Thur</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Fri</span></span>
</td>
<td style="width: 1.5%; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> Sat</span></span>
</td>
</tr>
<tr>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 1.5%; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
<tr>
<td colspan="7" style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"><br></span></span>
</td>
<td style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">Tot</span></span>
</td>
<td style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">Tot<br></span></span>
</td>
<td style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">Tot<br></span></span>
</td>
<td style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;">Tot</span></span>
</td>
</tr>
<tr>
<td colspan="21" style="width: 289.333px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
<tr>
<td rowspan="2" style="width: 289.333px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"><br></span></span>
</td>
<td rowspan="2" style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 289.333px; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td colspan="3" rowspan="4" style="text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
<tr>
<td style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
</tbody>
</table>
<p><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</p>
<table>
<tbody>
<tr>
<td rowspan="2" style="width: 289.333px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"><br></span></span>
</td>
<td rowspan="2" style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 289.333px; border: solid; text-align: center;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td rowspan="2" style="width: 3.7763%; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td colspan="3" rowspan="4" style="text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
</tr>
<tr>
<td style="width: 7px; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 269px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 70px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-size: 11px;"><span style="font-family: Calibri, sans-serif;"> </span></span>
</td>
<td style="width: 150px; text-align: center; border: solid;"><span style="font-family: Calibri, sans-serif; font-size: 11px;"> </span></td>
</tr>
</tbody>
</table>
Related
I have a table.html file which contains a large table with a lot of inline style
The file is formatted that a tableData tag is in one line.
Here is a short example:
<table>
<tbody>
<tr style="height: 17px;">
<td style="width: 120.078px; height: 17px;" align="RIGHT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong>CEO </strong></span></td>
<td style="width: 438.922px; height: 49px;" rowspan="2" align="LEFT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong> Name<br/></strong> E-Mail<br/></span></td>
</tr>
<tr style="height: 32px;">
<td style="width: 120.078px; height: 32px;" align="RIGHT" valign="TOP"><span style="font-family: verdana, geneva, sans-serif; font-size: 10pt;"> </span></td>
</tr>
</tbody>
The file is huge and I want to delete every line that is a <td> </td> line and has no content (whitepaces counts also as no content)
I tried to use awk but my knowledge is not enough
In this short example the output after the delete would look like this:
<table>
<tbody>
<tr style="height: 17px;">
<td style="width: 120.078px; height: 17px;" align="RIGHT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong>CEO </strong></span></td>
<td style="width: 438.922px; height: 49px;" rowspan="2" align="LEFT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong> Name<br/></strong> E-Mail<br/></span></td>
</tr>
<tr style="height: 32px;">
</tr>
</tbody>
Using sed
$ sed -E '/\<td\>/{\~(<[^>]*>)+ *[[:alpha:]] *~!d}' input_file
<table>
<tbody>
<tr style="height: 17px;">
<td style="width: 120.078px; height: 17px;" align="RIGHT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong>CEO </strong></span></td>
<td style="width: 438.922px; height: 49px;" rowspan="2" align="LEFT" valign="TOP"><span style="font-size: 10pt; font-family: verdana, geneva, sans-serif;"><strong> Name<br/></strong> E-Mail<br/></span></td>
</tr>
<tr style="height: 32px;">
</tr>
</tbody>
font-size will auto render bigger than it defiend.
only use iphone safari visit the following snippet, under the div.contenteditable="true" the content2 will auto render bigger than it defined.
but the other content1,content3,content4,content5,content6 is OK。
Has anyone had the same problem and solved it someway?
Thanks
td, th {
padding: 5px 10px;
border: 1px solid #DDD;
}
table {
margin-bottom: 10px;
border-collapse: collapse;
display: table;
}
<div contenteditable="false">
<table style="width: 300px; table-layout: fixed;">
<colgroup>
<col data-offset-left="8.5" data-offset-right="309.76043701171875" data-resize-pixel="301.26043701171875"
data-resize-percent="22.18412643679814" style="width: 33.1841%;">
<col data-offset-left="309.76043701171875" data-offset-right="881.4688110351562"
data-resize-pixel="571.7083740234375" data-resize-percent="42.099291165201585"
style="width: 33.0993%;">
<col data-offset-left="881.46875" data-offset-right="1365.5" data-resize-pixel="484.03125"
data-resize-percent="35.64294918998527" style="width: 33.6429%;">
</colgroup>
<tbody>
<tr class="firstRow">
<td valign="top" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: black; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content1
</span>
</p>
</td>
<td valign="top" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: red; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content2
</span>
</p>
</td>
<td valign="top" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: red; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content3
</span>
</p>
</td>
</tr>
<tr>
<td valign="top" height="30" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: black; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content4
</span>
</p>
</td>
<td valign="top" height="30" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: green; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content5
</span>
</p>
</td>
<td valign="top" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: red; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content6
</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
I've not been able to achieve it because media-query is not supported on Gmail IMAP which my client uses.
How do I achieve the column layout on the top to be like the stacking elements below it without any media query?
What is the workaround of it?
I can't find any workaround
The column layout should be shown when in desktop mode.
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="padding: 10px 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td colspan="2" style="padding: 10px 10px 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
style="border-collapse: collapse;background: #FFFFFF;border-radius: 10px;">
<tr>
<td height="45" style="padding: 65px 45px;">
<div class="hide-for-small">
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin-top: 40px">
<tr style="height: 60px">
<td style="vertical-align:top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top; width: 45%;">
<span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</span>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
text
</span>
</td>
<td style="vertical-align: top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top;">
<div style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</div>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif;">
text
</span>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top; width: 45%;">
<span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</span>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
text
</span>
</td>
<td style="vertical-align: top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top;">
<span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</span>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif;">
text
</span>
</td>
</tr>
</table>
</div>
<div class="hide-for-large">
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin-top: 40px">
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
stacking elements start
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
<tr style="height: 30px;"></tr>
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
text
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
<tr style="height: 30px;"></tr>
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
text
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
<tr style="height: 30px;"></tr>
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
text
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I'm trying to update HTML column in SQL Server, but I came across the following error and I don't seem to be able to resolve it. The error:
Msg 102, Level 15, State 1, Line 1 Incorrect syntax near
'Trebuchet'.
I have tried using single and double quotes around the HTML, but none worked.
update SC_EmailTemplates set HTML = '<p> </p> <center> <table style="text-align: left;" width="600" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="border-bottom: 1px solid #e4e4e4;" width="31" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-bottom: 1px solid #e4e4e4;" width="466" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td style="border-bottom: 1px solid #e4e4e4;" width="31" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-bottom: 1px solid #e4e4e4;" width="466" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <!--GREEN STRIPE--> <tr> <td style="border-top: 1px solid #FFF; border-bottom: 1px solid #FFF;" bgcolor="#673090" width="31" height="113"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <!--WHITE TEXT AREA--> <td style="border-top: 1px solid #FFF; text-align: center;" valign="middle" bgcolor="#FFFFFF" width="131" height="113"><span style="font-size: 25px; font-family: Trebuchet MS, Verdana, Arial; color: #673090;">Hello!</span></td> <!--GREEN TEXT AREA--> <td style="border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; padding-left: 15px;" bgcolor="#673090" height="113"><span style="color: #ffffff; font-size: 18px; font-family: Trebuchet MS, Verdana, Arial;">A quick email from Abcd. </span></td> </tr> <!--DOUBLE BORDERS BOTTOM--> <tr> <td style="border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;" width="31" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-top: 0px solid #e4e4e4; border-bottom: 0px solid #e4e4e4;" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td colspan="3"><!--CONTENT STARTS HERE--> <br /> <br /> <table width="598" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="15"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="padding-right: 10px; font-family: Trebuchet MS, Verdana, Arial; font-size: 12px;" valign="top" width="598"><span style="font-family: Trebuchet MS, Verdana, Arial; font-size: 17px; font-weight: bold;">Dear [Cr_Clients.NameFirst]</span> <br /> <p>[Message]</p> </td> </tr> </tbody> </table> <br /> <table style="border-top: 0px solid #e4e4e4; text-align: center; font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 586px;" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="border-bottom: 0px solid #e4e4e4; width: 589px;" colspan="3" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 589px;" colspan="3">Unsubscribe</td> </tr> <tr> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 589px;" colspan="3"> <p>company address 123456798 asdf</p> </td> </tr> <tr> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 123.5px;"> <p><img src="https://img.icons8.com/color/48/000000/twitter.png" alt="Follow us on Twitter" width="60" height="48" /></p> <p> Follow us on Twitter</p> </td> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 347.5px;"> <p><img src="http://abcd.org.uk/assets/images/logo.jpg" alt="Workabout" width="190" height="58" longdesc="http://www.workabout.org.uk" /></p> <p> </p> </td> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; width: 118px;"> <p><img src="https://img.icons8.com/color/48/000000/facebook.png" alt="Find us on Facebook" width="60" height="62" /></p> <p>Find us on Facebook</p> </td> </tr> <tr> <td style="font-family: 'Trebuchet MS', Verdana, Arial; font-size: 12px; background: #673090; width: 589px;" colspan="3"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center>'
where ID =57;
When using single quotes, you have to double the up (escape them) in your literal string.So for a value like "don't", you would have 'don''t'.
UPDATE SC_EmailTemplates
SET HTML = '<p> </p> <center> <TABLE style="text-align: left;" width="600" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="border-bottom: 1px solid #e4e4e4;" width="31" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-bottom: 1px solid #e4e4e4;" width="466" height="18"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td style="border-bottom: 1px solid #e4e4e4;" width="31" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-bottom: 1px solid #e4e4e4;" width="466" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <!--GREEN STRIPE--> <tr> <td style="border-top: 1px solid #FFF; border-bottom: 1px solid #FFF;" bgcolor="#673090" width="31" height="113"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <!--WHITE TEXT AREA--> <td style="border-top: 1px solid #FFF; text-align: center;" valign="middle" bgcolor="#FFFFFF" width="131" height="113"><span style="font-size: 25px; font-family: Trebuchet MS, Verdana, Arial; color: #673090;">Hello!</span></td> <!--GREEN TEXT AREA--> <td style="border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; padding-left: 15px;" bgcolor="#673090" height="113"><span style="color: #ffffff; font-size: 18px; font-family: Trebuchet MS, Verdana, Arial;">A quick email from Abcd. </span></td> </tr> <!--DOUBLE BORDERS BOTTOM--> <tr> <td style="border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4;" width="31" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td width="131" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="border-top: 0px solid #e4e4e4; border-bottom: 0px solid #e4e4e4;" height="3"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td colspan="3"><!--CONTENT STARTS HERE--> <br /> <br /> <table width="598" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="15"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> <td style="padding-right: 10px; font-family: Trebuchet MS, Verdana, Arial; font-size: 12px;" valign="top" width="598"><span style="font-family: Trebuchet MS, Verdana, Arial; font-size: 17px; font-weight: bold;">Dear [Cr_Clients.NameFirst]</span> <br /> <p>[Message]</p> </td> </tr> </tbody> </table> <br /> <table style="border-top: 0px solid #e4e4e4; text-align: center; font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 586px;" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="border-bottom: 0px solid #e4e4e4; width: 589px;" colspan="3" height="2"> <div style="line-height: 0px; font-size: 1px; position: absolute;"> </div> </td> </tr> <tr> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 589px;" colspan="3">Unsubscribe</td> </tr> <tr> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 589px;" colspan="3"> <p>company address 123456798 asdf</p> </td> </tr> <tr> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 123.5px;"> <p><img src="https://img.icons8.com/color/48/000000/twitter.png" alt="Follow us on Twitter" width="60" height="48" /></p> <p> Follow us on Twitter</p> </td> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 347.5px;"> <p><img src="http://abcd.org.uk/assets/images/logo.jpg" alt="Workabout" width="190" height="58" longdesc="http://www.workabout.org.uk" /></p> <p> </p> </td> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; width: 118px;"> <p><img src="https://img.icons8.com/color/48/000000/facebook.png" alt="Find us on Facebook" width="60" height="62" /></p> <p>Find us on Facebook</p> </td> </tr> <tr> <td style="font-family: ''Trebuchet MS'', Verdana, Arial; font-size: 12px; background: #673090; width: 589px;" colspan="3"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center>'
WHERE ID = 57;
The reason this was so hard for you to fix though is because you don't have a single line break in your HTML. Good use of white space and line breaks is paramount in every language. Just like grammar is paramount in spoken language. Without it, all you have is an unreadable mess.
Rather than having separate td for triangle , I would like to make the content td with left arrow triangle. Just like in the image.
<table>
<tr>
<td width="2%" align="center" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
<p style="width: 0;height: 0;border-style: solid;border-width: 5px 10px 5px 0;border-color: transparent #fa4b00 transparent transparent; vertical-align: middle"></p>
</td>
<td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">11 -20 : 11:40 </span>
<br>
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:12px; padding-left: 10px; text-transform: uppercase;"> Tea Break </span>
</td>
</tr>
</table>
Any Help Would be Grateful.
If you want to do it by using this kind of workflow then work with margins.
In this example i gave
margin-right:-3px;
but i would suggest using pseudo elements before and after.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="2%" align="center" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
<p style="width: 0;height: 0;border-style: solid;border-width: 5px 10px 5px 0;border-color: transparent #fa4b00 transparent transparent; vertical-align: middle;"></p>
</td>
<td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">11 -20 : 11:40 </span><br>
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:12px; padding-left: 10px; text-transform: uppercase;"> Tea Break </span>
</td>
</tr>
</table>
Given this is for html-email, I would advise you to use an img, to support all the email clients
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="2%" align="right" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
<img src="http://i.stack.imgur.com/uLRTb.png" style="vertical-align:top;" />
</td>
<td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">11 -20 : 11:40 </span>
<br>
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:12px; padding-left: 10px; text-transform: uppercase;"> Tea Break </span>
</td>
</tr>
</table>
The solution for using CSS triangles using border won't work (as expected) in Outlook 2007-2013, so,if you are going with that, you might need to take a look at this article
Where you have to define the triangle's shape with VML and call it defining its color and size.