Converting a Nested List to a Table

Trainers discussing Adobe and other software products

Skip navigation

Jul

Converting a Nested List to a Table

Written by Nat Dunn Posted in: Dreamweaver

Often list data could also be represented as a table. I am in the middle of writing our new Dreamweaver CS5.5 classes and thought it would be cool if Dreamweaver CS5.5 could do this conversion for you. I didn’t find any such feature, but it can be done pretty easily with XSLT.

Take for example the following list (data is made up):

Big Mac
- McDonald’s
- 540 calories
- $3.25
Whopper
- Burger King
- 770 calories
- $2.95
Wendy’s Single
- Wendy’s
- 360 calories
- $2.45

This could equally be represented as follows:

Burger	Restaurant	Calories	Price
Big Mac	McDonald’s	540	$3.25
Whopper	Burger King	770	$2,95
Wendy’s Single	Wendy’s	360	$2.45

The HTML representations are shown below:

List

<ol>
	<li>Big Mac
		<ul>
			<li>
				<a href="http://www.mcdonalds.com">McDonald's</a>
			</li>
			<li>540 calories</li>
			<li>$3.25</li>
		</ul>
	</li>
	<li>Whopper
		<ul>
			<li>
				<a href="http://www.burgerking.com">Burger King</a>
			</li>
			<li>770 calories</li>
			<li>$2.95</li>
		</ul>
	</li>
	<li>Wendy's Single
		<ul>
			<li>
				<a href="http://www.wendys.com">Wendy's</a>
			</li>
			<li>360 calories</li>
			<li>$2.45</li>
		</ul>
	</li>
</ol>

Table

<table>
	<thead>
		<tr>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Big Mac</td>
			<td>
				<a href="http://www.mcdonalds.com">McDonald's</a>
			</td>
			<td>540 calories</td>
			<td>$3.25</td>
		</tr>
		<tr>
			<td>Whopper</td>
			<td>
				<a href="http://www.burgerking.com">Burger King</a>
			</td>
			<td>770 calories</td>
			<td>$2.95</td>
		</tr>
		<tr>
			<td>Wendy's Single</td>
			<td>
				<a href="http://www.wendys.com">Wendy's</a>
			</td>
			<td>360 calories</td>
			<td>$2.45</td>
		</tr>
	</tbody>
</table>

And here’s a simple XSLT for converting the list to the table:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" encoding="utf-8" indent="yes"/>
<xsl:template match="node()[(name()='ol' or name()='ul') and descendant::node()[name()='ol' or name()='ul'] and not(ancestor::node()[name()='ol' or name()='ul'])]">
<table>
	<thead>
		<tr>
			<xsl:for-each select="./li">
				<th scope="col">Heading</th>
			</xsl:for-each>
		</tr>
	</thead>
	<tbody>
		<xsl:apply-templates/>
	</tbody>
</table>
</xsl:template>
<xsl:template match="/ol/li|/ul/li" priority="20">
	<tr>
		<td><xsl:apply-templates select="*[name() != 'ul' and name() != 'ol']|text()"/></td>
		<xsl:apply-templates select=".//li"/>
	</tr>
</xsl:template>
<xsl:template match="li" priority="10">
	<td>
		<xsl:apply-templates/>
	</td>
</xsl:template>
<xsl:template match="*[name() != 'ul' and name() != 'ol']" priority="1">
	<xsl:copy-of select="."/>
</xsl:template>
</xsl:stylesheet>