It is a common predicament: You have an HTML fragment with a table, list or dictionary  in it, generated from some data, and you have to render it in such a way that the data is easy to read, and the information presented in such a way as to prevent misunderstandings: However, you can’t alter the HTML source in order to add CSS classes to individual elements. We’ll take a couple of practical examples to show how you can solve this sort of problem.

The flurry of browser upgrades has had the result that a lot of useful CSS2 and CSS3 has been recently implemented. As well as helping the creation of the more esoteric mobile-applications and games, it is the extended ways of addressing individual DOM elements that is making the basic layout of text and tables a lot easier. This article aims to illustrate practical ways of doing this

With CSS3, you can more easily apply styles to elements of the DOM based on their location within the DOM. This solves many problems with the basic layout of text.  You may be faced with the requirement that the first paragraph in a DIV section may be formatted differently, you may want to tuck a bulleted list in under the paragraph that precedes it.  You may want code to have minimum paragraph spacing when it is preceded by another code paragraph. In the old days, you would need some work to do by hand in order to to tidy up text to make it conform to even the most rudimentary typesetting conventions.

CSS previously gave you some addressing methods that could be used. You could apply styles based on the ID of the DOM Element, or could apply it to all the children of a particular element, or element class, or to all the children of a particular TagType (e.g. A, DIV, P ). CSS2 and CSS3 give you a lot more besides. You can apply a style to the ‘N’th child, or to every other child, whether they be even or odd in the sequence. ( 2, 4, 6, 8, 10 or 1, 3, 5, 7, 9¦) This is just the start. You can match the first element and no others, or the first few. You can specify this in inverse order, from the last element. If you want to disregard the parentage of the elements that you wish to attach a style to, then you can do so, and just specify elements by their sequence irrespective of their place in the hierarchy. At last, all the current browsers support this. Even Internet Explorer 9 will do it! The full list of these CSS addressing methods is contained in Simple-Talk’s  XPath, CSS, DOM, Selenium. Rosetta Stone and Cookbook. wallchart here, together with the equivalent XPath and javascript  syntax.

To illustrate how this simplifies perfectly conventional formatting, we’ll take a very simple example. You have a list and you’d like to enhance it so the background colour on alternating rows is different.

What do you mean, they look the same? We’re talking about CSS3, so you will need an up to date version of any of the browsers. Even Internet Explorer should show the stripes in the right-hand list unless IE has gone quietly into ‘compatibility mode’. (look for the grey border around the browser window). See here for a fix. Hopefully, with an up-to-date browser, you’ll see how we’re using the CSS3 syntax for applying different styles to alternating elements

Both the CSS and the HTML are very simple.  The CSS has something that looks a lot like a CSS2 pseudo-class, and in fact extends the idea. It is called a structural pseudo-class.

And the HTML  has no formatting beyond a couple of DIVs to position the two lists side by side.

For a simple example like this, it is easier, and more backward-compatible, to simply assign a class to alternating elements to achieve the effect. However, you often can’t do this, and where you are receiving an XHTML fragment from a source that knows only about the data rather than your requirements to make it easy on the eye, then it obviates the task of altering XHTML, which can get messy.

When content is generated from a database, it is very quick to supply it to the application as an XHTML fragment, using the XML extensions to SQL syntax. The actual data structure you use depends on the structure of the data. Most commonly, it will be a table, but I’ve used lists, Dictionary lists, and nested DIVs as well as tables. Here is a quick example of a table generated from AdventureWorks.

Tables are much easier to read if one can apply subtle shades to the backgrounds or borders to delineate columns and rows. You can even do rather nice ‘warp and weft’ effects to make it easier for the eye to follow down a column or along a row. Additionally, any Excel user will know how important the column and row headers are to help people understand data in tables. If you generate an XHTML table from SQL Server, you don’t get an option to apply different classes to different columns or rows. Why should you need to do so, when the way that a table is displayed is none of the business of the database.

We can leave the HTML structure as it is without assigning any classes. We just create a style sheet. Here is an example. I’m using bitmaps instead of flat background colors just because I prefer the slightly livelier effect.

And the HTML source of the table (truncated) looks like this

..and it should look a bit fancier…

I’ve done all this with just the nth-child CSS Selector. However, there are others that can be used to select particular elements of ‘naked’ structures.  The Rosetta Stone and Cribsheet gives a much fuller list of selectors, pseudo-classes and pseudo-elements, particularly of attribute addressing (which doesn’t help us as our tables haven’t got attributes). Before you use them, check on the Quirks Mode site for compatibility with current browsers, and check on The W3.ORG site for the details, and plenty of examples of their use

Let’s take a different example. Here is a PowerShell script. It is getting information about the SQL Server-related services that are running on a list of servers that I’ve supplied just to check that they are running OK. Whatever. The point is that I’ve once more got stuck with a table result that looks pretty difficult to format nicely.

You’ll get an output somewhat like this (I’ve kept it short for demo purposes)

…but we can create something rather easier on the eye by defining some styles.

that will give this, once the style has been applied to the table

Putting it all together

Curiously, after years of happily using Internet Explorer as a simple way of displaying data as part of a scripting process, I initially  fell foul of using Internet Explorer 9 to display HTML5 and CSS 2/CSS3. Here is the script that I currently use to automatically display this, and any other grid of data in PowerShell. The principle is the same for every other scripting language.

If you can’t see CSS2-3/HTML5  views of a page.

If you can’t see all those CSS2-3/HTML5  effects in a page in IE8 or IE9, it probably means you’re in ‘compatibility mode’.  If your browser window has a thin gray border, shucks, you’re in Compatibility mode.

The developers of Internet Explorer were faced with a change of direction towards HTML/CSS standards-compliance after years of attempting an ultimately futile policy of creating their own de-facto browser standard. In order to create a browser that could still render websites that were written to the Internet Explorer standard,  with IE8 and IE9, they have had to introduce a notion of ‘compatibility mode’ which is extraordinarily elaborate and even involves the maintenance of a register of  the ‘compatibility’ of various websites. The intricacies of this mechanism would wear out the patience of even the keenest reader so I’ll say little more other than to say that one can force the browser to stop fleeing standards-mode like a frightened rabbit by …

• selecting, from the menu, TOOLS -> Compatibility View Settings, and unchecking ‘display intranet sites in compatibility view‘ (and, if necessary,  ‘display all websites in compatibility view’ ).
• From the menu, Tools -> Internet Options. Click on  the advanced tab, Look for the browsing section, and in there find ‘automatically recover from page layout errors with Compatibility view‘. Unclick it.
• If all else fails… Hit F12 in order to get into the ‘developer pane’. Here, you will see the last two menu item ‘Browser Mode and ‘Document Mode’. Make sure that these are set to IE9.

I know of no way in scripting to force IE9 to read a dynamic page in standards mode, other than by using the HTML5  doctype (<!DOCTYPE HTML>) in the page you write to the instance. In the script above, I’ve used guile rather than science.

Conclusions

The use of the CSS structural pseudo-class and pseudo-elements hold out the hope that we cen do what we want with the rendering of HTML structures without having to add a lot of classes to the elements, but instead just doing it by specifying their position in the DOM. I have to admit that I miss the suddenly-withdrawn :contains pseudo class which for the first time allows us to specify an element by its content. We hope that wider counsels prevail. For those of us who are having to render such XHTML fragments as tables and lists, generated from PowerShell and SQL, these extensions to CSS are a real boon.