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.
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.