Can you produce HTML from SQL? Yes, very easily. Would you ever want to? I certainly have had to. The principle is very simple. HTML is really just a slightly odd dialect of XML that imparts meaning to predefined tags. SQL Server has built-in ways of outputting a wide variety of XML. Although I’ve had in the past to output entire websites from SQL, the most natural thing is to produce HTML structures such as tables, lists and directories.

HTML5 can generally be worked on in SQL as if it were an XML fragment. XML, of course, has no predefined tags and is extensible, whereas HTML is designed to facilitate the rendering and display of data. By custom, it has become more forgiving than XML, but in general, HTML5 is based on XML.

Generating Tables from SQL expressions.

In HTML5, tables are best done simply, but using the child elements and structures so that the web designer has full control over the appearance of the table. CSS3 allows you to specify sets of cells within a list of child elements. Individual TD tags, for example, within a table row (TR) can delimit table cells that can have individual styling, but the rendering of the table structure is quite separate from the data itself.

The table starts with an optional caption element, followed by zero or more colgroup elements, followed optionally by a thead element. This header is then followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, but there can be only one tfoot element.

The HTML5 ‘template’ for tables

In SQL Server, one can create the XML for a table like this with this type of query which is in the form of a template with dummy data.

Which produces (after formatting it nicely) this

So, going to AdventureWorks, we can now produce a table that reports on the number of sales for each city, for the top thirty cities.

I’ve left out the tfoot row because I didn’t need that. Likewise colgroup. I use tfoots mostly for aggregate lines, but you are limited to one only at the end, so it is not ideal for anything other than a simple ‘bottom line’.

When this is placed within and html file, with suitable CSS, it can look something like this

This is fine for general purposes, but there often comes a time when you need to highlight particular cells, based on an attribute from the data or a value. We can add, for example, class attributes, or anything else you need but you sacrifice the simplicity of  FOR XML RAW. You will need to use FOR XML PATH, I reckon. This allows you to specify attributes (necessary for images and links) . However, because you are specifying the path in the AS clause, all your contiguous TD names will all get concatenated into one TD element unless you use a hack to indicate that they are separate.  This is easier demonstrated than explained. 

Yes, we have altered the previous SQL to create ‘class’ attributes that have allowed us to colour the rank order numbers we’ve just added so that the best performers are in red, the next best in mauve and the rest in dark blue; first column only. It will look something like this…

Obviously, you can use this for any HTML tag that requires attribute. An image IMG tag needs its ‘src‘, for example, and the anchor A tag needs its ‘href‘.  The only downside is that you lose the neatness of using RAW.  HTML mixes attributes and elements so I suspect that you will need to use the FOR XML PATH syntax for this sort of work.

Generating directory lists from SQL expressions.

The HTML is for rendering name-value groups such as dictionaries, indexes, definitions, questions and answers and lexicons. The name-value group consists of one or more names (dt elements) followed by one or more values (dd elements). Within a single dl element, there should not be more than one dt element for each name.

We’ll take as an example an excerpt from the excellent SQL Server glossary

This produces a directory list which can be rendered as you wish

Generating hierarchical lists from SQL expressions.

HTML Lists represent probably the most useful way of passing simple hierarchical data to an application. You can actually use directories (DLs) to do this for lists name-value pairs and even tables for more complex data. Here is a simple example of a hierarchical list, generated from AdventureWorks. You’d want to use a recursive  function for anything more complicated. I’ll show you this in a moment. Here is a simple version that just gives you one level

…giving…

There is a more complex hierarchy in AdventureWorks that we can use to show how a hierarchy with arbitrary depth  can be rendered as a list.  Here is how you could do it. Firstly the recursive function

Now we can simply demonstrate how to call it….

and this will give you the list  that then just needs the base <UL> node

Conclusions

There are quite a few structures now in HTML5. Even the body tag has subordinate header, nav, section, article, aside, footer, details and summary tags. If you read the W3C Recommendation it bristles with good suggestions for using markup to create structures. The pre tag can use child code, samp and kbd tags to create intelligent formatting. Data in SQL Server can easily generate this sort of structured HTML5 markup. This has obvious uses in indexes, chaptering, glossaries as well as the obvious generation of table-based reports. There is quite a lot of mileage in creating HTML from SQL Server queries