How to get rid of lines in colspan/rowspan cell of table? - html-table

I am trying to recreate something close to this table:
I am getting weird lines, though, with the way that I've gone about trying to do it. How do I get rid of them? Or could someone tell me the easiest way to achieve what is done in the table pictured above? Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<style>
table
{
font-family:"Courier New", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin: auto;
border-bottom-style: double; border-top-style: double;
}
table.border tr {border: 1px solid black; border-left: 0px solid;
border-right: 0px solid;}
th
{
font-size:18px;
font-style: bold;
padding-top:2px;
padding-bottom:2px;
background-color:lightblue;
color:#000000;
}
tr.white td
{
color:#000000;
background-color: #ffffff;
}
td,th
{
font-size:1em;
padding:3px 7px 2px 7px;
text-align: left;
</style>
</head>
<body>
<body>
<h3 style="text-align: center; font-family: courier new;">
<strong>Code-page support in microsoft windows</strong></h3>
<table class="border">
<tr>
<th>Code-Page ID</th>
<th style="border: 1px solid black; text-align: center;">Name</th>
<th colspan="2">ACP OEMCP</th>
</tr
<div>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">1200
<br/>1250
<br/>1251</td>
<td style="border: 1px solid black;" rowspan="3">Unicode
<br/>Windows 3.1 Eastern European
<br/>Windows 3.1 Cynillic</td>
<td rowspan="3"><br/>X <br/>X</td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
</div>
<div>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td>
<td style="border: 1px solid black;" rowspan="3">MS-DOS
<br/>Arabic (ASMO 708)
<br/>Arabic (ASMO 449)</td>
<td><br/></td>
<td colspan="2">X <br/>X <br/>X</td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
<tr class="white">
<td style="border: 1px solid black;"></td>
</tr>
</div>
<div>
<tr class="white">
<td style="background-color: lightblue;">Assignment#4</td>
<td style="border: 1px solid black;">
Mansfield University</td>
<td colspan="2"><center>
<img src="http://mansfield.edu/files/images/Facebook.gif"> </center></td>
</tr>
</div>
</table>
</body>
</html>


First of all the link of the image sample didn't work here for me :(
But if you mean the vertical lines like line1|line2 are your problem, you can use colspan=2. This will result in something like line1 line2.
Example:
<tr>
<td colspan=2>
</td>
<td>
</td>
</tr>
Hope that will help,
Regards,
Otacon


Your code is a mess! You put two "body" and forgot some "}" and ">".
Apart that the problem was the "td's" in blank that you put inside the "tr". Here you have the code:
<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<style>
table {
font-family:"Courier New", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin: auto;
border-bottom-style: double; border-top-style: double;
}
table.border tr {
border: 1px solid black;
border-left: 0px solid;
border-right: 0px solid;
}
th{
font-size:18px;
font-style: bold;
padding-top:2px;
padding-bottom:2px;
background-color:lightblue;
color:#000000;
}
tr.white td {
color:#000000;
background-color: #ffffff;
}
td,th{
font-size:1em;
padding:3px 7px 2px 7px;
text-align: left;
}
</style>
</head>
<body>
<h3 style="text-align: center; font-family: courier new;">
<strong>Code-page support in microsoft windows</strong></h3>
<table class="border">
<tr>
<th>Code-Page ID</th>
<th style="border: 1px solid black; text-align: center;">Name</th>
<th colspan="2">ACP OEMCP</th>
</tr>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">1200
<br/>1250
<br/>1251</td>
<td style="border: 1px solid black;" rowspan="3">Unicode
<br/>Windows 3.1 Eastern European
<br/>Windows 3.1 Cynillic</td>
<td rowspan="3"><br/>X <br/>X</td>
</tr>
<tr class="white">
</tr>
<tr class="white">
</tr>
<tr class="white">
<td style="background-color: lightblue;" rowspan="3">437 <br/>708 <br/>709</td>
<td style="border: 1px solid black;" rowspan="3">MS-DOS
<br/>Arabic (ASMO 708)
<br/>Arabic (ASMO 449)</td>
<td><br/></td>
<td colspan="2">X <br/>X <br/>X</td>
</tr>
<tr class="white">
</tr>
<tr class="white">
</tr>
<tr class="white">
<td style="background-color: lightblue;">Assignment#4</td>
<td style="border: 1px solid black;">
Mansfield University</td>
<td colspan="2"><center>
<img src="http://mansfield.edu/files/images/Facebook.gif"> </center></td>
</tr>
</table>
</body>
</html>
I think that's what you're looking for.
Hope this answer helped you.
Regards,
LGhost

Related

using v-for in vue js component

I need to dynamically add rows to my table, when I add some data in vue component. I am using v-for it must automatically add rows after adding data, but it doesn't show me anything, just a table header.
<table style="width: 95%;" cellspacing="0" id="main2">
<tbody>
<tr>
<th style="width: 55%; background-color: #343434; color: #FFFFFF; text-align: left; font-weight: normal; "><span class="target-field" data-path="name_word_output">Назва</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="quantity_word_output">Кількість</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="rate_word_output">Вартість</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="amount_word_output">Разом</span></th>
</tr>
<tr v-for="item in rowData">
<td style="border: 1px solid #ddd;"><span class="target-field" data-path="issue.name">{{item.tovarname}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="issue.quantity"></span> <span class="target-field" data-path="issue.unit">{{item.fakturahowmany}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.price_per_one">{{item.fakturaprice}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.amount">{{item.fakturahowmany*item.fakturaprice}}</span></td>
</tr>
</tbody>
</table>
and another part
methods: {
addItem(){
this.$root.totalprice+=this.$root.fakturahowmany*this.$root.fakturaprice;
var my_object = {
tovarname:this.$root.tovarname,
fakturahowmany:this.$root.fakturahowmany,
fakturaprice:this.$root.fakturaprice,
};
this.$root.rowData.push(my_object)
//
this.$root.tovarname = 1;
this.$root.fakturahowmany = 1;
this.$root.fakturaprice = 1;
}
}
}
How can I fix it? Thanks!

You have to start a unique key for the items through v-bind: key = "item.id" in your v-for
<tr v-for="item in rowData" v-bind:key="item.id" >
link: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State

Email HTML not centering in email. It's sitting on the right side

I am not able to get this HTML email to align center or at least Left in Outlook window. I need help figuring out what is set up incorrectly here. Thank you for all your help. I have tried different ways to update and try to center it. It shows like it's center on the minimized view, but when expanded in outlook window, it is all they way to the right.
Your help will be much appreciated to fix this.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning Assignment Changes Notification</title>
<style>
/**This is to overwrite Outlook.com’s Embedded CSS************/
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560">
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#ccffff;">
<tr>
<td><img src="addlogo" /></td>
<td align="right">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText1" />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Added</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD">
<CPNT_ID_ADDED/>
</td>
<td class="myTD">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText2" />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Revision Date</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText3" />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Deleted</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD">
<CPNT_ID_DELETED/>
</td>
<td class="myTD">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF;">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;background-color:#ebebeb;">
<tr>
<td valign="top">
<table align="left" class="column" style="width:300px">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong>Internal Users</strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
</table>
</body>
</html>

I wrapped an additional table around your 3 column layout, then wrapped that with a center tag, and set all of the surrounding tables and tds to 100% width and align center. See this on JSFiddle.
<html>
<head>
<title>Learning Assignment Changes Notification</title>
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body width="100%">
<center style="width: 100%;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" width="100%">
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">
<!-- begin 3 column layout -->
<tr>
<td colspan="3" width="align=" center " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 "> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px; " width="560 ">
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:20px;margin:0px;width:100%;background-color:#ccffff; ">
<tr>
<td><img src="addlogo " /></td>
<td align="right ">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0 " cellspacing="0 " border="0 " width="100% ">
<tr>
<td style="height: 40px "> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText1 " />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Date Added</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD ">
<CPNT_ID_ADDED/>
</td>
<td class="myTD ">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD ">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText2 " />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Revision Date</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD ">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD ">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD ">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText3 " />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Date Deleted</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD ">
<CPNT_ID_DELETED/>
</td>
<td class="myTD ">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD ">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px "> </td>
</tr>
<tr>
<td>
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF; ">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:0px;margin:0px;width:100%;background-color:#ebebeb; ">
<tr>
<td valign="top ">
<table align="left " class="column " style="width:300px ">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong>Internal Users</strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px; "> </td>
</tr>
<tr>
<td colspan="3 " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 "> </td>
</tr>
</table>
</td></tr>
</center>
</body>
</html>
<!-- end snippet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning Assignment Changes Notification</title>
<style>
html, body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body width="100%">
<center style="width: 100%;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" width="100%">
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">
<!-- begin 3 column layout -->
<tr>
<td colspan="3" width="align="center" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px;" width="560">
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#ccffff;">
<tr>
<td><img src="addlogo" /></td>
<td align="right">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText1" />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Added</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD">
<CPNT_ID_ADDED/>
</td>
<td class="myTD">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText2" />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Revision Date</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText3" />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Deleted</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD">
<CPNT_ID_DELETED/>
</td>
<td class="myTD">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF;">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;background-color:#ebebeb;">
<tr>
<td valign="top">
<table align="left" class="column" style="width:300px">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong>Internal Users</strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px; height:20px;" height="20"> </td>
</tr>
</table>
</td></tr>
</center>
</body>
</html>

You can include the below CSS for body so it will align content to left
body{
float:left;
}
You can see the sample outpul here
Example And Implementation

How can I display image in velocity template

How can I display this image in velocity template?
Is there any configuration required to display image?
I have java configuration for velocity.
Please help me.
Thanks in advance.

Thank you very much for your kind reply glw, issue already fixed. I forgot that email template takes only live images path which are deployed, not local project paths like src="${pageContext.request.contextPath}/resources/images/.jpg" Issue is fixed by src="www..com/images/.jpg".

I'm using base 64 image to populate data, the code for template is
<!DOCTYPE html>
<html>
<body style="margin:0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="max-width: 640px; border: 1px solid #dfdfdf; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0.5px; color: #404040;">
<tr>
<td valign="top" style="padding: 30px 20px 20px;">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#fff" style="border-collapse:collapse;border:1px solid #808080;">
<tr>
<td align="left" valign="top" style="padding: 10px; border: 1px solid #808080; color: #808080;">Address</td>
<td align="right" valign="top" style="padding: 10px; border: 1px solid #808080; color: #404040; font-weight: bold;">${address}</td>
</tr>
<tr>
<td align="left" valign="top" style="padding: 10px; border: 1px solid #808080; color: #404040; font-weight: bold;">Aadharphoto</td>
<td align="right" valign="top" style="padding: 10px; border: 1px solid #808080; color: #404040; font-weight: bold;">
<img src = 'data:image/png;base64,${photo}' alt="Aadharphoto" style="width:300px"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
code to populate template
Map<String, String> templatedata = eData(response);
/*Map<String, String> templatedata = new HashMap<>();
templatedata.put("address", response.getAddress());
templatedata.put("photo", response.getBase64Photo()); //iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==
[![enter image description here][1]][1]*/
public String createContent(EmailTemplate template, Map<String, String> data) {
return VelocityEngineUtils.mergeTemplateIntoString(velocityEngine, template.getFileName(), objectMap);
}
output image : https://i.stack.imgur.com/wvloX.png

XSLT V1 - looping to create a table from XML

I have a requirement to create a report which shows occupancy of beds on a ward, for a date range specified by the user. The end result should look something like this:
.ritz .waffle a { color: inherit; }.ritz .waffle .s1{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:center;color:#000000;background-color:#d8d8d8;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s2{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:right;color:#000000;background-color:#d8d8d8;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s4{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:left;color:#000000;background-color:#d8d8d8;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s3{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:left;color:#000000;background-color:#ffffff;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s0{border-right:1px SOLID #000000;text-align:left;color:#000000;background-color:#ffffff;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s5{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:center;color:#006100;background-color:#c6efce;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}.ritz .waffle .s6{border-bottom:1px SOLID #000000;border-right:1px SOLID #000000;text-align:center;color:#9c6500;background-color:#ffeb9c;font-family:'Calibri',Arial;font-size:11pt;vertical-align:bottom;white-space:nowrap;direction:ltr;padding:0px 3px 0px 3px;}
<div class="ritz grid-container" dir="ltr"><table class="waffle no-grid" cellspacing="0" cellpadding="0"><thead><tr><th class="row-header freezebar-origin-ltr"></th><th id="850396799C0" style="width:60px" class="column-headers-background">A</th><th id="850396799C1" style="width:60px" class="column-headers-background">B</th><th id="850396799C2" style="width:60px" class="column-headers-background">C</th><th id="850396799C3" style="width:60px" class="column-headers-background">D</th><th id="850396799C4" style="width:60px" class="column-headers-background">E</th><th id="850396799C5" style="width:60px" class="column-headers-background">F</th><th id="850396799C6" style="width:60px" class="column-headers-background">G</th><th id="850396799C7" style="width:60px" class="column-headers-background">H</th><th id="850396799C8" style="width:60px" class="column-headers-background">I</th><th id="850396799C9" style="width:60px" class="column-headers-background">J</th><th id="850396799C10" style="width:60px" class="column-headers-background">K</th><th id="850396799C11" style="width:60px" class="column-headers-background">L</th><th id="850396799C12" style="width:60px" class="column-headers-background">M</th></tr></thead><tbody><tr style='height:19px;'><th id="850396799R0" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">1</div></th><td class="s0"></td><td class="s1" colspan="8">June</td><td class="s1" colspan="4">July</td></tr><tr style='height:19px;'><th id="850396799R1" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">2</div></th><td class="s0"></td><td class="s2">23</td><td class="s2">24</td><td class="s2">25</td><td class="s2">26</td><td class="s2">27</td><td class="s2">28</td><td class="s2">29</td><td class="s2">30</td><td class="s2">1</td><td class="s2">2</td><td class="s2">3</td><td class="s2">4</td></tr><tr style='height:19px;'><th id="850396799R2" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">3</div></th><td class="s3"></td><td class="s4">Mo</td><td class="s4">Tu</td><td class="s4">We</td><td class="s4">Th</td><td class="s4">Fr</td><td class="s4">Sa</td><td class="s4">SU</td><td class="s4">Mo</td><td class="s4">Tu</td><td class="s4">We</td><td class="s4">Th</td><td class="s4">Fr</td></tr><tr style='height:19px;'><th id="850396799R3" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">4</div></th><td class="s4">Bed 1</td><td class="s5" colspan="9">Sam Smith</td><td class="s3"></td><td class="s3"></td><td class="s3"></td></tr><tr style='height:19px;'><th id="850396799R4" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">5</div></th><td class="s4">Bed 2</td><td class="s6" colspan="11">Doris Grey (Planned</td><td class="s3"></td></tr><tr style='height:19px;'><th id="850396799R5" style="height: 19px;" class="row-headers-background"><div class="row-header-wrapper" style="line-height: 19px;">6</div></th><td class="s4">Bed 3</td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s3"></td><td class="s5" colspan="6">Suri Patel</td></tr></tbody></table></div>
The constraint is that I have to build the result page using a single XML document which is dynamically created from a single SQL query.
ritz .waffle a {
color: inherit;
}
.ritz .waffle .s0 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
text-align: center;
color: #000000;
background-color: #d8d8d8;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s2 {
border-left: none;
text-align: center;
color: #000000;
background-color: #d8d8d8;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s6 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
}
.ritz .waffle .s7 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
text-align: left;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s4 {
border-right: none;
text-align: center;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s5 {
border-left: none;
text-align: center;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s1 {
border-right: none;
text-align: center;
color: #000000;
background-color: #d8d8d8;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
.ritz .waffle .s3 {
border-bottom: 1px SOLID #000000;
border-right: 1px SOLID #000000;
text-align: center;
color: #000000;
background-color: #ffffff;
font-family: 'Calibri', Arial;
font-size: 11pt;
vertical-align: bottom;
white-space: nowrap;
direction: ltr;
padding: 0px 3px 0px 3px;
}
<div class="ritz grid-container" dir="ltr">
<table class="waffle" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="row-header freezebar-origin-ltr"></th>
<th id="2029419615C0" style="width:60px" class="column-headers-background">A</th>
<th id="2029419615C1" style="width:60px" class="column-headers-background">B</th>
<th id="2029419615C2" style="width:75px" class="column-headers-background">C</th>
<th id="2029419615C3" style="width:60px" class="column-headers-background">D</th>
<th id="2029419615C4" style="width:60px" class="column-headers-background">E</th>
<th id="2029419615C5" style="width:60px" class="column-headers-background">F</th>
<th id="2029419615C6" style="width:60px" class="column-headers-background">G</th>
<th id="2029419615C7" style="width:185px" class="column-headers-background">H</th>
<th id="2029419615C8" style="width:196px" class="column-headers-background">I</th>
<th id="2029419615C9" style="width:60px" class="column-headers-background">J</th>
<th id="2029419615C10" style="width:74px" class="column-headers-background">K</th>
<th id="2029419615C11" style="width:60px" class="column-headers-background">L</th>
</tr>
</thead>
<tbody>
<tr style='height:19px;'>
<th id="2029419615R0" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">1</div>
</th>
<td class="s0">drank</td>
<td class="s0">wdate</td>
<td class="s0">mdate</td>
<td class="s0">ddate</td>
<td class="s0">mspan</td>
<td class="s1">dcol</td>
<td class="s2 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">patientid</div>
</td>
<td class="s0">patientname</td>
<td class="s1">bedname</td>
<td class="s2 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">bedstate</div>
</td>
<td class="s0">beddate</td>
<td class="s0">bedid</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R1" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">2</div>
</th>
<td class="s3">0</td>
<td class="s3">Mo</td>
<td class="s3">June</td>
<td class="s3">23</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/23/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R2" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">3</div>
</th>
<td class="s3">0</td>
<td class="s3">Mo</td>
<td class="s3">June</td>
<td class="s3">23</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s3">Bed 2</td>
<td class="s3">Planned</td>
<td class="s3">6/23/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R3" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">4</div>
</th>
<td class="s3">0</td>
<td class="s3">Mo</td>
<td class="s3">June</td>
<td class="s3">23</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s6"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/23/2016</td>
<td class="s3">86</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R4" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">5</div>
</th>
<td class="s3">1</td>
<td class="s3">Tu</td>
<td class="s3">June</td>
<td class="s3">24</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/24/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R5" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">6</div>
</th>
<td class="s3">1</td>
<td class="s3">Tu</td>
<td class="s3">June</td>
<td class="s3">24</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s4">Bed 2</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/24/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R6" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">7</div>
</th>
<td class="s3">1</td>
<td class="s3">Tu</td>
<td class="s3">June</td>
<td class="s3">24</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s6"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/24/2016</td>
<td class="s3">86</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R7" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">8</div>
</th>
<td class="s3">2</td>
<td class="s3">We</td>
<td class="s3">June</td>
<td class="s3">25</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/25/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R8" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">9</div>
</th>
<td class="s3">2</td>
<td class="s3">We</td>
<td class="s3">June</td>
<td class="s3">25</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s4">Bed 2</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/25/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R9" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">10</div>
</th>
<td class="s3">2</td>
<td class="s3">We</td>
<td class="s3">June</td>
<td class="s3">25</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s6"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/25/2016</td>
<td class="s3">86</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R10" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">11</div>
</th>
<td class="s3">3</td>
<td class="s3">Th</td>
<td class="s3">June</td>
<td class="s3">26</td>
<td class="s3">30</td>
<td class="s3">1</td>
<td class="s3">623681</td>
<td class="s3">Sam Smith</td>
<td class="s4">Bed 1</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/26/2016</td>
<td class="s3">84</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R11" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">12</div>
</th>
<td class="s3">3</td>
<td class="s3">Th</td>
<td class="s3">June</td>
<td class="s3">26</td>
<td class="s3">30</td>
<td class="s3">2</td>
<td class="s3">570853</td>
<td class="s3">Doris Grey</td>
<td class="s4">Bed 2</td>
<td class="s5 softmerge">
<div class="softmerge-inner" style="width: 59px; left: -3px;">Occupied</div>
</td>
<td class="s3">6/26/2016</td>
<td class="s3">85</td>
</tr>
<tr style='height:19px;'>
<th id="2029419615R12" style="height: 19px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 19px;">13</div>
</th>
<td class="s3">3</td>
<td class="s3">Th</td>
<td class="s3">June</td>
<td class="s3">26</td>
<td class="s3">30</td>
<td class="s3">0</td>
<td class="s7"></td>
<td class="s3"></td>
<td class="s3">Bed 3</td>
<td class="s3">NULL</td>
<td class="s3">6/26/2016</td>
<td class="s3">86</td>
</tr>
</tbody>
</table>
</div>
The XML is then in the style
QueryResults ReportName="BedStateGraphical" ReportID="160">
<FieldNames>
<Field name="drank"/>
<Field name="wdate"/>
<Field name="mdate"/>
<Field name="ddate"/>
<Field name="mspan"/>
<Field name="dcol"/>
<Field name="PatientID"/>
<Field name="patientname"/>
<Field name="bedname"/>
<Field name="bedstate"/>
<Field name="beddate"/>
<Field name="bedid"/>
</FieldNames>
<Data RecordCount="112">
<DataRow index="1">
<drank>0</drank>
<wdate>Mo</wdate>
<mdate>June</mdate>
<ddate>23</ddate>
<mspan>9</mspan>
<dcol>1</dcol>
<PatientID>623681</PatientID>
<patientname>Sam Smith</patientname>
<bedname>Bed 1</bedname>
<bedstate>Occupied</bedstate>
<beddate>23/07/2016 00:00:00</beddate>
<bedid>84</bedid>
</DataRow>
<DataRow index="2">
<drank>0</drank>
<wdate>Mo</wdate>
<mdate>June</mdate>
<ddate>23</ddate>
<mspan>11</mspan>
<dcol>1</dcol>
<PatientID>570853</PatientID>
<patientname>Doris Grey</patientname>
<bedname>Bed 2</bedname>
<bedstate>Planned</bedstate>
<beddate>23/07/2016 00:00:00</beddate>
<bedid>85</bedid>
</DataRow>
drank was intended as a ranking column to give me each column, mspan as a calculation of a colspan for that patient. I have full control over the query and can redesign this as needed. Essentially for each client I get a start date and an end date, bed id, and a status.
I started with a fairly simple piece of XSLT:
<xsl:key name="drank" match="//DataRow/drank/text()" use="." />
<xsl:template match="QueryResults">
<div style="margin: 2px; ">
<div style="width: 900px; background-color: #29A2CE; color: #FFFFFF; padding: 5px; font-size: large; font-weight: bold">
Carenotes Bed State Report </div>
<table style="width: 900px;padding-left:20px;">
<tr>
<xsl:for-each select="//DataRow/drank/text()[generate-id() = generate-id(key('drank',.)[1])]">
<td>
<xsl:value-of select="//DataRow/ddate" />
</td>
</xsl:for-each>
</tr>
</table>
This gives me the right number of columns, but the ddate selected is always the same day of the week.
XSL isn't my strong point, and I am limited by the application to V1 standards.
Can anyone give me some help / pointers / advice / solution?
UPDATE:
Thanks to Martin, I have now been able to create the framework for the table. The next challenge is to populate the cells with the patient data. Currently I am trying this:
<table style="width: 900px;padding-left:20px;">
<tr>
<td>
</td>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('mdate',mdate)[1])]">
<td>
<xsl:attribute name="colspan">
<xsl:value-of select="mspan" />
</xsl:attribute>
<xsl:value-of select="mdate" />
</td>
</xsl:for-each>
</tr>
<tr>
<td>
</td>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('drank',drank)[1])]">
<td>
<xsl:value-of select="ddate" />
</td>
</xsl:for-each>
</tr>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('bedid',bedid)[1])]">
<tr>
<td>
<xsl:value-of select="bedname" />
</td>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('drank',drank)[1])]">
<td>
<xsl:value-of select="dcol" />
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
This is based on 3 keys:
<xsl:key name="drank" match="DataRow" use="drank" />
<xsl:key name="mdate" match="DataRow" use="mdate" />
<xsl:key name="bedid" match="DataRow" use="bedid" />
However the loop that gets the value of dcol is only returning zeros, rather than a mix of 1s and zeros to represent which days are booked. Of course, what I really want to do, is to colspan across the dates of a booking so that I can put in the patient name and other data, as well as hyperlinking to the booking document.
My brain is running out of ideas for this part however!

Use a relative path, so replace <xsl:value-of select="//DataRow/ddate" /> with <xsl:value-of select="../../ddate"/>.
I would probably restructure the key to <xsl:key name="drank" match="DataRow" use="drank" /> and then the grouping to
<xsl:template match="QueryResults">
<div style="margin: 2px; ">
<div style="width: 900px; background-color: #29A2CE; color: #FFFFFF; padding: 5px; font-size: large; font-weight: bold">
Carenotes Bed State Report </div>
<table style="width: 900px;padding-left:20px;">
<tr>
<xsl:for-each select="//DataRow[generate-id() = generate-id(key('drank',drank)[1])]">
<td>
<xsl:value-of select="ddate" />
</td>
</xsl:for-each>
</tr>
</table>

Need to check the specific cell value from a table in selenium

Need to check the specific cell value from a table in selenium.
As per the GUI view it is the 5th column of 1st Row and I need to keep reading the value of this cell until it changes to some other state from in progress state.Following is the XML:
<html>
<head><style>
BODY
{
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
scrollbar-face-color: #666699;
scrollbar-3dlight-color: #c2c8e2;
scrollbar-shadow-color: #c2c8e2;
scrollbar-highlight-color: #666699;
scrollbar-darkshadow-color: #666699;
scrollbar-arrow-color: #e6eef7;
scrollbar-track-color: #e6eef7;
background-color: rgb(255, 255, 255);
}
TD
{
color: #000000;
font-size: 8pt;
}
</style></head>
<body topMargin="0" leftMargin="0" onload="javascript:OnLoad();" onunload="javascript:closeWin();"><div id="divMainTbl" style="width: 1358px; height: 182px; overflow: auto; position: relative;" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0"><form name="frmDSV" id="frmDSV" style="margin-top: 0px; margin-bottom: 0px;" action="/epace/epace-cgi/pacecgi.exe?sessionid=" method="post" target="ifChildEvents"><table width="100%" id="tblQ" border="0" cellSpacing="0" cellPadding="0" nowrap="" xmlns:user="" xmlns:msxsl=""><tbody><tr style="background-color: rgb(241, 241, 241);">
<td noWrap="">
In Progress
</td>
</tr></tbody></table></form></div></body></html>
<DIV id="divMainTbl" style='position:
<TABLE id="tblQ" WIDTH="100&#37" BOR>
<TR>
-- Column <tds
</TR>
<tr style="background-color:#F1F1F1;">
<td class="HU2"> 1 </td>
<td nowrap width="2&#37" height="15" </td>
<td nowrap> Positions </td>
<td nowrap> Data Upload </td>
<td nowrap> Completed </td>

Looks like that's the only td you have. If so it's fairly easy.
//div[#id='divMainTbl']//td
Since the div has an id it easier to start from there and find the ONLY td accordingly.