Non-table CSS Layout for Bridge Deals

This is an example of a bridge diagram laid out via CSS rather than HTML tables. In browsers where you can change the style, switch to the "default style" to see what this page would look like without styling.

If you have JavaScript enabled, you can use the "Views" menu on the right to switch stylesheets. Without JavaScript, you have to switch styles via your normal browsers mechanism (which in Internet Explorer doesn't exist.) This shows that the presentation is independent of the base HTML.

If Internet Explorer implemented the CSS 2.0 ":before" pseudo-selector, we could simplify the HTML even more, as in this example, which sadly only works in Mozilla-based browsers and Opera.

I.E. botches the tabular view, due to its lack of support for CSS display: table directive.

In this view, we see the diagram as proper tabular data. Many people think that only tabular data should be displayed with HTML tables. While this shows that a bridge diagram can be seen as tabular data, that doesn't mean that other formats of this data should use tables for layout. This is all complicated by the fact that in bridge, the word "table" has another meaning entirely.

This is a briefer view, but a bit unreadable. It would be better if we could remove the spaces from the holdings.

This is a compromise between the standard view and the line view.

This view is a standard layout for a bridge diagram.

This is, in many ways, an ideological issue. Many people feel that HTML tables should only be used for tabular data. Using tables for "layout" is considered inelegant and confusing to software meant for the visually impaired.

A single bridge hand is naturally a table, with each row having a "key" - the suit, and a value, the holding in the suit. A full deal can be seen as a table, too, as in the "Tabular" view above, but when the layout compels the hands to be drawn in compass locations, the "table" used to format the deal is different from the "table" of the data. A subtle distinction, but an important one.

All that said, this does not work on old browsers or browsers which do not implement CSS very well.

I've verified that this page renders properly in Internet Explorer 6.0, Mozilla 1.2 and later, and Opera 7.

Other Readings

A List Apart

An excellent source of HTML, XHTML, Javascript, and CSS tips, including Paul Snowden's Style Switcher, which is the source of the style-switching Javascript code used on this page.

Netscape's Devedge

An excellent resource for CSS and other web standards information. Read Case Study in a Successful Standards-Based Migration and An Interview With Mike Davidson of ESPN, Part 1 and Part 2.