Colorimetry < Skins > DropDown (talk? | users | test page | RWD? | set as default | unset | validate: HTML, CSS)
The default PmWiki skin minus the HTML table, which is replaced with divs styled using the CSS table model of CSS >= 2.1.
Yes.
The identical visual appearance can be achieved in virtually all browsers (notably except IE7 and below) by replacing the HTML table with a CSS Table.
A Version with conditional comments for old-IE compatibility:
The use of HTML tables for page-layout purposes has been discouraged for a long time, since before the last major revision of the default skin happened in 2006. The main reason a table was used as part of the layout, despite unpopularity of table-based layout at the time, is because it provided maximum cross-browser compatibility with browsers that existed at the time.
A wiki's layout template has special demands imposed upon it because collaborative, author-contributed content can vary so widely. The table helps favor writers over readers because it reduces the chances an author will unintentionally break the layout by editing a page.
Subsequently CSS 2.1 has come about. In a nutshell, now we can move some control of presentation into the CSS stylesheet. For many of you that's all you need to know. Using tables for layout is unpopular more now than ever. Here's a brief explanation of why:
Moving control of presentation into the CSS stylesheet allows wikiauthors' contributed structure and content to be more accurately represented. HTML Tables can be used exclusively for tabular data.
For example, this makes it easier for automated parsing of a site by machines, including
This skin uses the CSS Table Model from CSS 2.1 to replace the HTML Table elements with appropriately-styled divs.
This skin has just a few differences from the default skin.
README.txt file.
The result is a skin that maintains -- arguably enhances -- the simplicity and ease-of-modification of the original skin. One reason is because renaming the skins's directory doesn't require renaming skin.tmpl and skin.css.
The divs nest more cleanly than the table elements did, and as a result the template should be easier to understand by looking at it.
Unpack the skin to pub/skins/ inside your pmwiki folder and add the following to your local configuration file:
$Skin = 'pmwiki-csst';
When I originally worked on the PmWiki skin the most common complaint was that it includes a table. Unfortunately the table was necessary at the time in order to maintain cross-browser compatibility. This is much less true today.
Browsers from 2006 may not work with this skin, however I think most modern browsers will render pages exactly matching the appearance of the version with the table.
It works using IE8; IE7 and earlier don't support the CSS Table model. HTML5Shiv could possibly be used to improve compatibility further.
Changing to this skin will reduce cross-browser compatibility by some small amount. The question is: which is greater, the benefit of a table-less design or the benefit of compatibility with a very small percentage of visitors who will have rendering issues? In my mind the former wins; any browser that will not render the table-less pages is not workable on a lot of web pages today and this will be even more true the future.
Some minor changes could make the default skin easier and mor predictable to modify (following PmWiki Philosophy #5).
Explicitly set { font-weight:normal } on black-styled sidebar and wiki-action links (#wikileft and #wikicmds). These are the two navigation areas affected by (:noleft:) and (:noaction:) respectively.
The reason: if a novice administrator adds something like
a { font-weight:bold; text-decoration:none; }
navigation links will remain normal-weight rather than becoming bold. I think that's closer to what would be desired and expected.
This change is only noticeable if the CSS is modified.
When someone adds
%sidehead%Heading Foo
the heading is displayed inline, which doesn't match the lists on the sidebar. Simply changing the .sidehead sidebar-heading and (and .sidehead a) to { display:block } makes it easier and more predictable to customize sidebar headings with CSS styling.
The effect of this change is only noticeable if the CSS styling is modified.
Refinement
.sidehead a) to { display:block } also.
Modification-friendly enhancements for easier / more predictable customization:
{ font-weight:normal } on black-styled sidebar and wiki-action links.
.sidehead sidebar-heading to { display:block }.
Removed some cruft:
border='0 attribute from the wikilogo <img> tag int the template.
This one-off release is practically untested. It uses Conditional Comments to restore the HTML Table elements only for old versions of Microsoft Internet Explorer. The conditional comments detract from the simple and easy-to-follow appearance of the template.
See discussion at DefaultSkinWithoutTable-Talk?
User notes +1: If you use, used or reviewed "Default Skin Without Table", you can add your name. These statistics appear in the Skins listings and will help newcomers browsing through the wiki.