To main page

Sorting tables in HTML files

Step 1

Convert your HTML page into XHTML (if not already done).
XHTML is basically a more strict form of HTML, but is is also an XML application.
XML is short for "Extensible Markup Language".

The file extension should still be .htm or .html.

In the document header of the new XHTML file, you should have:

<!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">

To see the requirements for XHTML, look at http://www.w3.org/TR/xhtml1/.
You can validate that a document is XHTML from http://validator.w3.org/.
For learning more about XSL transformations, see for example https://www.w3schools.com/xml/xsl_intro.asp and http://wiht.link/XSLT-intro.

However, the most simple way to validate is to open the document in a web browser and see if you get any error messages!

There are a few rather simple rules to follow (such as "each start tag must have a matching end tag").
You can look at the source code of (for example) main_mixed.html to see how it can be done.

Step 2

When you have a valid XHTML document, copy it to another document
and give the new document the extension .xml (for example, main_mixed.xml).
Make the following substition in the new file:

<!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">

is replaced with

<?xml version="1.0" encoding="ISO-8859-1"?>
<html>

Step 3

To apply sorting on the tables, you need an XSL file ("eXtensible Stylesheet Language").
For an example, look at arr-melody-xsl.xsl to see what is required
to sort the melodies in main.xml according to the melody writer's last name, and to transform
the table according to that. The result is shown in arr-melody.html.
If you only want this to work in Internet Explorer, you can directly put
the following type of code in (for example) your index.html file:


<html>
<head></head>
...
<xml id="xmlfile" src="main.xml"></xml>
<xml id="xslfile" src="arr-melody-xsl.xsl"></xml>
<script for="window" event="onLoad">
showtable.innerHTML=xmlfile.transformNode(xslfile.XMLDocument);
</script>
<body>
<div id="showtable"></div>
...
</body>
</html>


Step 4

If you want it to work in other browsers than IE, you need to
create persistent HTML files that you can refer to. For this, there are different
types of scripts (search for "xml2html", for example).
As output, you should get a file like arr-melody.html.


That's it!