How do I write an XSLT script to import data from a spreadsheet into an HTML file? - xslt

I need to create an XSLT script to import content from a spreadsheet into an HTML file.
My spreadsheet has 3 columns I need to import.
I'll have the spreadsheet data exported to HTML in this format:
<table class="tableizer-table">
<thead>
<tr class="tableizer-firstrow">
<th>CARD ID</th>
<th>PROMPT</th>
<th>RESPONSE</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>Acquisition</td>
<td>In classical conditioning, the process of taking advantage of reflexive
responses to turn a neutral stimulus into a conditioned stimulus.</td>
</tr>
</tbody>
</table>
That data needs to be added to this HTML page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" designation="" enumeration="" data-uuid="61dac34c7de54289a58698d5bfc8e776">
<head>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" title="default" href="../../assets/css/main.css"/>
<title>usurpmcatfc0001</title>
</head>
<body>
<section property="ktp:document" typeof="ktp:Document" class="ktp-document">
<section class="ktp-document-meta">
<section property="ktp:metadata" class="ktp-meta"><span property="atom:content-item-name" class="ktp-meta" data-value="usurpmcatfc0001"></span></section>
<section property="ktp:tags" class="ktp-meta"><span property="ktp:topic" class="ktp-meta">MCAT</span><span property="ktp:topic" class="ktp-meta">Behavioral Sciences</span><span property="ktp:subsubtopic" class="ktp-meta">Sensation and Perception</span></section>
</section>
<section property="ktp:document-section" typeof="ktp:flashcards" class="ktp-document-section" data-title="Absolute Threshold">
<p>The minimum of stimulus energy needed to activate a sensory system.</p>
</section>
</section>
</body>
</html>
The data from column 1 needs to feed into the data-value of this section:
<section property="ktp:metadata" class="ktp-meta"><span property="atom:content-item-name" class="ktp-meta" data-value="[COLUMN 1 DATA]"></span></section>
The data from column 2 needs to feed into the data-title and the data from column 3 needs to feed in between the <p></p> tags of this section:
<section property="ktp:document-section" typeof="ktp:flashcards" class="ktp-document-section" data-title="Absolute Threshold">
<p>The minimum of stimulus energy needed to activate a sensory system.</p>
</section>
Any help generating this script would be most appreciated.
Thanks!


If the exported HTML is parseable as XML you can read it simply with the doc function e.g. <xsl:variable name="excel-table" select="doc('exported-table.xml')//table[#class = 'tableizer-table']"/> and of course reading in a column is as easy as e.g. $excel-table/tbody/tr/td[1].
So set up templates for the nodes you want to manipulate e.g.
<xsl:template match="section[#property = 'ktp:metadata']/span/data-value">
<xsl:attribute name="{name()}" select="$excel-table/tbody/tr/td[1]"/>
</xsl:template>
Of course the base processing will be done by the identity transformation e.g. <xsl:mode on-no-match="shallow-copy"/> in XSLT 3.
The only complication seems to be that the main document is XHTML in the namespace xmlns="http://www.w3.org/1999/xhtml" so you need to set up xpath-default-namespace="http://www.w3.org/1999/xhtml" but if the table export is in no namespace the variable needs to use <xsl:variable name="excel-table" xpath-default-namespace="" select="doc('exported-table.xml')//table[#class = 'tableizer-table']"/> and any selection inside the document needs to do the same e.g. the <xsl:attribute name="{name()}" xpath-default-namespace="" select="$excel-table/tbody/tr/td[1]"/>.

Related

How do I get the html that I should send in emails?

I have just started using Zurb Foundation (SASS) to create responsive emails. I followed this tutorial to create a test email. As seen in the tutorial, when viewing the test email in the browser it is responsive and looks beautiful.
The standard boiler plate I use for the test email:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>{{subject}}</title>
<!-- <style> -->
</head>
<body>
<span class="preheader">{{description}}</span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{{> body}}
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
The body of the test email:
---
layout: index-layout
subject: My Email Templates
---
<container>
<row class="gray collapse">
<columns>
<center><img src="http://unsplash.it/800/200"></center>
</columns>
</row>
<row class="gray">
<columns>
<h2 class="text-center">Responsive columns below</h2>
</columns>
</row>
<row class="gray">
<columns small="12" large="4">
<p>Column 1</p>
</columns small="12" large="4">
<columns>
<p>Column 2</p>
</columns small="12" large="4">
<columns>
<p>Column 3</p>
</columns>
</row>
</container>
This is what the resulting source looks like taken from "view source" in Chrome:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>My Email Templates</title>
<!-- <style> -->
</head>
<body><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.23.6'><\/script>".replace("HOST", location.hostname));
//]]></script>
<span class="preheader"></span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center data-parsed="">
<table align="center" class="container float-center"><tbody><tr><td>
<table class="row gray collapse"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<center data-parsed=""><img src="http://unsplash.it/800/200" align="center" class="float-center"></center>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>
<table class="row gray"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<h2 class="text-center">Responsive columns below</h2>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>
<table class="row gray"><tbody><tr>
<th class="small-12 large-4 columns first"><table><tr><th>
<p>Column 1</p>
</th></tr></table></th>
<th class="small-12 large-4 columns"><table><tr><th>
<p>Column 2</p>
</th></tr></table></th>
<th class="small-12 large-4 columns last"><table><tr><th>
<p>Column 3</p>
</th></tr></table></th>
</tr></tbody></table>
</td></tr></tbody></table>
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
I sent the test email to myself using gmail to check it. This was done by copying the source shown above and pasting it using "Insert HTML" through the html extension for gmail in chrome. The result was horrible - no responsiveness and it looked ugly.
How am I supposed to make use of the test email that I have created? Is it even the source from "view source" in Chrome that I should send in an email? Is it even possible to send the test email over gmail, or do I have to use e.g., mailchimp or sendgrid?

Putsmail will be your best bet for quickly testing a single template like this. You can just paste your complied HTML in and add your gmail address (or any others)

The SASS version of Zurb Foundation for Email 2.0 is controlled using terminal emulator. I am assuming you have already installed Zurb using one. The thing you are missing is a few commands.
To start, you use the terminal to navigate to the directory where you installed Zurb. The command is npm start or foundation watch. This will start Zurb running in a mode where you can see your edits before it runs a command to inline the code.
To inline the code, type foundation build or npm run build. This will give you an email which has the necessary css code inline where needed to produce the final email.
Zurb Commands
A few other Zurb commands you might find useful are:
npm install --global foundation-cli - (Install npm)
foundation new --framework emails - (a new installation of zurb)
npm start - (start the application)
foundation watch - (start the application)
foundation build - (run an inliner for the appropriate css)
npm run build - (run an inliner for the appropriate css)
npm cache clean - (clear the cache)
npm update - (install latest updates)
If none of this makes sense, please visit one of the following for better tutorials to hopefully get you up to speed on how Zurb works. It's complicated, but it makes great emails.
More Information
https://foundation.zurb.com/emails/docs/sass-guide.html
https://foundation.zurb.com/emails/docs/css-guide.html
Good luck.

XSLT: How to place multiple level nodes in <ol> in place of xls:number format

I'm new to xsl and messing about with a sample template to try and figure things out.
I managed to get this far as per below snippets. Not sure if the way I'm applying the template for the different System.AreaPath is correct, but seems to work?
The one thing I'm struggling with right now is to use ol (or ol for Epic, ul for all siblings) and css, instead of the template sample putting every in a div and h{$level}.
I'm hoping this will also resolve the current issue of the number format - apply-template does not reset the count when applied twice as I have done here.
Any suggestions or samples will be appreciated as I'm not finding - or rather understanding correctly how to implement - the various search results and samples I have found. (for-each and when came up frequently)
I hope the above makes sense and that the code pasted is sufficient?
Thanks in advance!
- Jacques
xml: (edit: xml, not xlm)
<result executedDate="8/8/2017" executedBy="abc" email="abc#email.com">
<columns>
<System.Id name="ID" width="75" type="Integer"/>
<System.WorkItemType name="Work Item Type" width="75" type="String"/>
<System.Title name="Title" width="150" type="String"/>
<System.AreaPath name="Area Path" width="75" type="TreePath"/>
</columns>
<options>
...
</options>
<workitem id="1051" type="Epic" state="In Progress">
<System.Id>1051</System.Id>
<System.WorkItemType>Epic</System.WorkItemType>
<System.Title>Epic1</System.Title>
<System.AreaPath>Path1</System.AreaPath>
<workitem id="5411" type="Feature" state="Done">
<System.Id>5411</System.Id>
<System.WorkItemType>Feature</System.WorkItemType>
<System.Title>Feature1</System.Title>
<System.AreaPath>Path1</System.AreaPath>
<workitem id="5414" type="Product Backlog Item" state="Done">
<System.Id>5414</System.Id>
<System.WorkItemType>Product Backlog Item</System.WorkItemType>
<System.Title>Backlog Item 1</System.Title>
<System.AreaPath>Path1</System.AreaPath>
</workitem>
<workitem id="5418" type="Product Backlog Item" state="Done">
<System.Id>5418</System.Id>
<System.WorkItemType>Product Backlog Item</System.WorkItemType>
<System.Title>Backlog Item 2</System.Title>
<System.AreaPath>Path1</System.AreaPath>
</workitem>
</workitem>
</workitem>
<workitem id="1529" type="Epic" state="In Progress">
<System.Id>1529</System.Id>
<System.WorkItemType>Epic</System.WorkItemType>
<System.Title>Epic 2</System.Title>
<System.AreaPath>Path2</System.AreaPath>
<workitem id="3956" type="Feature" state="Done">
<System.Id>3956</System.Id>
<System.WorkItemType>Feature</System.WorkItemType>
<System.Title>Feature 2</System.Title>
<System.AreaPath>Path 2</System.AreaPath>
<workitem id="5955" type="Product Backlog Item" state="Done">
<System.Id>5955</System.Id>
<System.WorkItemType>Product Backlog Item</System.WorkItemType>
<System.Title>Backlog item 3</System.Title>
<System.AreaPath>Path2</System.AreaPath>
</workitem>
<workitem id="6667" type="Product Backlog Item" state="Done">
<System.Id>6667</System.Id>
<System.WorkItemType>Product Backlog Item</System.WorkItemType>
<System.Title>Backlog item 4</System.Title>
<System.AreaPath>Path2</System.AreaPath>
</workitem>
</workitem>
xsl:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<h2>Section 1</h2>
<xsl:apply-templates select="/result /workitem[#type != 'Bug' and System.AreaPath='Path2']"/>
<p/>
<h2>Section 2</h2>
<xsl:apply-templates select="/result /workitem[#type != 'Bug' and System.AreaPath='Path1']"/>
</body>
</html>
</xsl:template>
<xsl:template match="//workitem">
<xsl:variable name="level" select="count(ancestor-or-self::*) "/>
<xsl:element name="h{$level}">
<xsl:number level="multiple" format="1. "/>
<xsl:value-of select="System.Title"/>
</xsl:element>
<div style="margin-left:15px;">
<xsl:apply-templates select="workitem"/>
</div>
</xsl:template>
html ouput:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta charset="UTF-8">
</head>
<body>
<h2>Section 1</h2>
<h2>2. Epic 2</h2>
<div style="margin-left:15px;">
<h3>2.1. Feature 2</h3>
<div style="margin-left:15px;">
<h4>2.1.1. Backlog item 3</h4>
<div style="margin-left:15px;"></div>
<h4>2.1.2. Backlog item 4</h4>
<div style="margin-left:15px;"></div>
</div>
</div>
<p></p>
<h2>Section 2</h2>
<h2>1. Epic1</h2>
<div style="margin-left:15px;">
<h3>1.1. Feature1</h3>
<div style="margin-left:15px;">
<h4>1.1.1. Backlog item 1</h4>
<div style="margin-left:15px;"></div>
<h4>1.1.2. Backlog item 2</h4>
<div style="margin-left:15px;"></div>
</div>
</div>
Desired html output:
This is basesd on a current view in use that I'm trying to replicate. Might opt to not use the table later on, but the <ul> layout is what I'm after.
Also, the 'epic' node will likely not be used and can be excluded in the query generating the xml
<table>
<tr>
<td class=class1>Section 1</td> <!-- list all features from Path2 -->
</tr>
<tr>
<td>
<ul class=class2>
<li>Feature 3
<ul>
<li>Backlog item 5</li>
<li>Backlog item 6</li>
</ul>
</li>
<li>Feature 4
<ul>
<li>Backlog item 7</li>
<li>Backlog item 8</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<td class=class1>Section 2</td> <!-- list all features from Path1 -->
</tr>
<tr>
<td>
<ul class=class2>
<li>Feature1
<ul>
<li>Backlog item 1</li>
<li>Backlog item 2</li>
</ul>
</li>
<li>Feature 2
<ul>
<li>Backlog item 3</li>
<li>Backlog item 4</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>

Your expected output is not clear. If you want a nested list, you could do simply:
XSLT 1.0
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/result">
<html>
<body>
<ul>
<xsl:apply-templates select="workitem[#type != 'Bug' and starts-with(System.AreaPath, 'Path')]"/>
</ul>
</body>
</html>
</xsl:template>
<xsl:template match="workitem">
<li>
<xsl:number level="multiple" format="1. "/>
<xsl:value-of select="System.Title"/>
</li>
<xsl:if test="workitem">
<ul>
<xsl:apply-templates select="workitem"/>
</ul>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
and get:
Result
<html>
<body>
<ul>
<li>1. Epic1</li>
<ul>
<li>1.1. Feature1</li>
<ul>
<li>1.1.1. Backlog Item 1</li>
<li>1.1.2. Backlog Item 2</li>
</ul>
</ul>
<li>2. Epic 2</li>
<ul>
<li>2.1. Feature 2</li>
<ul>
<li>2.1.1. Backlog item 3</li>
<li>2.1.2. Backlog item 4</li>
</ul>
</ul>
</ul>
</body>
</html>

html open xslt and pass variable

Am looking for some assistance, I've been searching the web for over a week now trying to expand my limited knowledge of searching an xml file to find a specific entry based on a users input from an html form.
I have tried xpath but my javascripting knowledge is limited and i couldn't get this to work.
I have resorted to xsl to style my xml, it works really nicely when i hardcode what i'm looking for, i'd very much like to make this dynamic based on my html from input, however i'm really struggling with the code to get this working, there are also few examples of how to setup the html side of things that i've found.
XSL
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:param name="skuid" />
<xsl:template match="/">
<xsl:apply-templates select="//sku[#id=$skuid]" />
</xsl:template>
<xsl:template match="sku">
<html>
<body>
<h2>Availability:</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Sku Code</th>
<th>Description</th>
<th>Due Date</th>
<th>Due Qty</th>
</tr>
<tr>
<td align="center"><xsl:value-of select="skucode"/></td>
<td align="center"><xsl:value-of select="description"/></td>
<td align="center"><xsl:value-of select="duedate"/></td>
<td align="center"><xsl:value-of select="dueqty"/></td>
</tr>
<tr bgcolor="#9acd32">
<th colspan="2" align="center">Ranged Currrent Cat</th>
<th colspan="2" align="center">Ranged Next Cat</th>
</tr>
<tr>
<td colspan="2" align="center"><xsl:value-of select="currcat"/></td>
<td colspan="2" align="center"><xsl:value-of select="nextcat"/></td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
XML
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="employees2.xsl"?>
<availability>
<sku id="10011">
<skucode>10011</skucode>
<description>4 Gallon Loft Tank Kit</description>
<duedate>07/09/2016</duedate>
<dueqty>10.00</dueqty>
<currcat>Main Cat In Store</currcat>
<nextcat>Main Cat In Store</nextcat>
</sku>
<sku id="10018">
<skucode>10018</skucode>
<description>MATT EMULSION PINK 2/5L</description>
<duedate>09/09/2016</duedate>
<dueqty>100</dueqty>
<currcat>Not Ranged</currcat>
<nextcat>Not Ranged</nextcat>
</sku>
<sku id="12345">
<skucode>12345</skucode>
<description>DeWalt Drill</description>
<duedate>10/09/2016</duedate>
<dueqty>1000</dueqty>
<currcat>Main Cat In Store</currcat>
<nextcat>Main Cat In Store</nextcat>
</sku>
<sku id="98765">
<skucode>98765</skucode>
<description>Wheel Barrow</description>
<duedate>31/09/2016</duedate>
<dueqty>1</dueqty>
<currcat>Not Ranged</currcat>
<nextcat>Not Ranged</nextcat>
</sku>
</availability>
<!DOCTYPE html>
<html>
<body>
SKU: <input type="text" name="SKU" id="input" maxlength="5">
<br />
<input type="submit" value="Submit" onClick="loadXMLDoc()">
<br />
<br />
<div id="results"></div>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
try {xhttp.responseType="msxml-document"} catch(err) {} // Helping IE
xhttp.send("");
return xhttp;
}
var y = document.getElementById("input").value;
var x=loadXMLDoc("employees.xml");
var xml=x.responseXML;
path="/Availability/sku[#id=y]";
// code for IE
if (window.ActiveXObject || xhttp.responseType=="msxml-document")
{
xml.setProperty("SelectionLanguage","XPath");
nodes=xml.selectNodes(path);
for (i=0;i<nodes.length;i++)
{
document.write(nodes[i].childNodes[0].nodeValue);
document.write("<br>");
}
}
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result=nodes.iterateNext();
while (result)
{
document.write(result.childNodes[0].nodeValue);
document.write("<br>");
result=nodes.iterateNext();
}
}
</script>
</body>
</html>
kind regards
Paul

In your path expression
path="/Availability/sku[#id=y]";
"y" means "the value of the element child of the sku element with name "y", it doesn't mean "the value of the Javascript variable named "y".
I forget whether the browser DOM XPath API has a mechanism for substituting parameter values; if not you can use string concatenation to create a path expression containing the value of y as a string literal. But beware injection attacks.

Extract Value from HTML

I had another question based on a different html format. Problem is that my smartmeter is extremely slow in loading these HTMLs (5secs per file). Now I found another way with different html file....which is very fast in loading...
Can you please give me a helping hand in how I could extract the two values for positive electric power Pplus and negative electric power Pminus...in this html file....
HTML is quite large but has this specific code arround the two values 21.0000 for Pplus and 5.0000 for Pminus.
...
...
</TD></TR></TABLE>
</DIV>
<!-- -->
<!-- ************************** -->
<!-- *** 2. row *************** -->
<!-- -->
<DIV ID="idButtonDiv" STYLE="top:143px; left:0px;" ALIGN="CENTER">
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0"><TR><TD ID="idButtonTd">
21.000
</TD></TR></TABLE>
</DIV>
<!-- -->
....
....
<!-- -->
<DIV ID="idButtonDiv" style="top:208px; left:732px;" ALIGN="CENTER" >
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0"><TR><TD ID="idButtonTd">
</TD></TR></TABLE>
</DIV>
<!-- -->
<!-- ************************** -->
<!-- *** 4. row *************** -->
<!-- -->
<DIV ID="idButtonDiv" STYLE="top:273px; left:0px;" ALIGN="CENTER">
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0"><TR><TD ID="idButtonTd">
5.00000
</TD></TR></TABLE>
</DIV>
<!-- -->
Thanks a lot.
Norbert

JSF template, include a piece of HTML in each page

I can't figure out how to include a piece of HTML (say a little table) in each of the pages of my web app.
Say this is the table I want to include, so I made a template:
<?xml version ... ?>
<!DOCTYPE ...">
<html xmlns="... all the required namespaces ...">
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
then I have the code that uses it:
<?xml version ...?>
<!DOCTYPE ...">
<html xmlns="... all required namespaces ...">
<body>
<h3>Will this be displayed?</h3>
<ui:composition template="tableTemplate.xhtml">
<h4>Will this?</h4>
</ui:composition>
</body>
</html>
the page that I get on the browser is:
<html xmlns ...>
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
so there is the table but all the rest is missing!

In the master template, you need to use <ui:insert> to declare the place where the template definitions will be inserted.
template.xhtml
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<ui:insert name="body">Default body</ui:insert>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</h:body>
</html>
In the template client, you need to use <ui:define> to define the template definitions which are to be inserted in the places declared in the template.
page.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define name="title">
Define your page title here
</ui:define>
<ui:define name="body">
<h3>Define your body content here</h3>
<p>Blah blah</p>
</ui:define>
</ui:composition>
No HTML around <ui:composition> is necessary. They will be ignored anyway. Just don't put any HTML there, that's only waste of space and confusing for yourself.
When you open page.xhtml in the browser, the following will end up in the rendered output:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Define your page title here</title>
</head>
<body>
<h3>Define your body content here</h3>
<p>Blah blah</p>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>

TRY
<ui:include src="tableTemplate.xhtml"/>
and in your tableTemplate.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
put your template here
</ui:composition>