{"id":190,"date":"2006-02-11T16:51:05","date_gmt":"2006-02-11T05:51:05","guid":{"rendered":"http:\/\/www.somethinkodd.com\/oddthinking\/2006\/02\/11\/css-versus-html-tables\/"},"modified":"2008-10-12T11:53:52","modified_gmt":"2008-10-12T01:53:52","slug":"css-versus-html-tables","status":"publish","type":"post","link":"https:\/\/www.somethinkodd.com\/oddthinking\/2006\/02\/11\/css-versus-html-tables\/","title":{"rendered":"CSS versus HTML Tables"},"content":{"rendered":"

CSS Principles<\/h3>\n

For the last twelve months, I have been trying to toe the party line when it comes to Cascading Style Sheets.<\/p>\n

    \n
  1. Tables are our enemies.<\/li>\n
  2. Div and span are allies and friends.<\/li>\n
  3. Content shall never be mixed with formatting.<\/li>\n
  4. Animals shall never sleep in beds.<\/li>\n<\/ol>\n

    Err.. sorry, got distracted. Where was I?<\/p>\n

    I understand the principles behind the stance that you should separate content from the style, but frankly, I am having a little bit of difficulty with the practice.<\/p>\n

    CSS Maturity<\/h3>\n

    I think the main problem is I adopted too early. CSS and the browsers need another year or two of maturity before CSS is ready for the real-world web-sites.<\/p>\n

    Before you try to contradict me with examples of CSS Zen Garden<\/a> and the like, let me deliver the ultimate counter-example: Google is table-based<\/a>.<\/div>\n

    CSS Maturity is not actually the topic I wanted to discuss today.<\/p>\n

    Instead, I am trying to work out what the party line is on the formatting of tabular data.<\/p>\n

    When to Use Tables<\/h3>\n

    I understand that it is actually correct to use the <table><\/code> tag to format tabular data as a table.<\/p>\n

    Roger Johansson explains this clearly in his tutorial on appropriate use of HTML tables<\/a>. This tutorial revealed to me that HTML tables actually have quite a lot happening behind the covers, including some tricky accessibility options.<\/p>\n

    How to Format Tables<\/h3>\n

    Where I get stuck is figuring out how to make my tables look good. <\/p>\n

    My first thought was that I would define a “house” style for tables in my style sheet. It would ensure that the borders were colour-coordinated with the rest of the site. It would ensure that the font choices matched the appropriate heading levels. All of the tables would have a common feel.<\/p>\n

    However, I got stuck at the first gate: text-align<\/code>. <\/p>\n

    Q: Should cells be Left-Justified, Right-Justfied, Full-Justified or Centered? <\/p>\n

    A: It depends: Large Integers look best right-aligned. Short strings look best centered. Longer (especially multi-line) strings look better left aligned. Full-justification is rarely called for in the small space available in a table.\n<\/p><\/div>\n

    So, I can’t make an overall style decision – it depends on the content type. It’s not just limited to alignment: borders, padding, caption position… the list goes on.<\/p>\n

    The answer would appear to be class<\/code> tags. <\/p>\n

    I could either constantly edit my stylesheet to handle every data type that I am ever use in my tables (e.g. class=\"Name\"<\/code>, class=\"Reservoir Volume (Megalitres)\"<\/code>) and add it to my stylesheet. Ugh! Editing your stylesheet shouldn’t be a day-to-day operation.<\/p>\n

    I could indicate in the class how I want to format it (e.g. class=\"Left-Justified\"<\/code>) but that is just back to the bad old days of including formatting information in with the content.<\/p>\n

    I could add an embedded (or additional) stylesheet for each new table. That has two problems: style-sheets being edited daily, and a need to add new tags in the <head><\/code> section of the HTML. Along with the general push to separate content from formatting, many architectures (including WordPress, FrontPage, etc.) are keeping the <head><\/code> out the way of the day-to-day content contributors.<\/p>\n

    Most recently, I resorted to an inline stylesheet. Every tag told the browser how to format it. It is a deprecated way of doing things, and rightly so, but I had a deadline, and I threw up my hands when I realised I had just wasted yet another 30 minutes on fighting with CSS.<\/p>\n

    I am open to suggestions here – especially those that actually deliver on the promise of allowing me to get the formatting right just once, and then focus on the content after that.<\/p>\n","protected":false},"excerpt":{"rendered":"

    CSS Principles For the last twelve months, I have been trying to toe the party line when it comes to Cascading Style Sheets. Tables are our enemies. Div and span are allies and friends. Content shall never be mixed with formatting. Animals shall never sleep in beds. Err.. sorry, got distracted. Where was I? I […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","footnotes":""},"categories":[25,34],"tags":[],"class_list":["post-190","post","type-post","status-publish","format-standard","hentry","category-insufficiently-advanced-technology","category-software-development"],"_links":{"self":[{"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/posts\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":1,"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":668,"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/posts\/190\/revisions\/668"}],"wp:attachment":[{"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.somethinkodd.com\/oddthinking\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}