Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

The Mother of all Table Talks

I have to admit, I was caught a bit off-guard by the theological debate raging under my post A Call to Bug Me … Apparently, the mere mention of “tableless design” has divided the house faster asserting that the King James is not the version canonized sometime around the year 375 A.D. Okay, I exaggerate, but it is interesting to see how much passion this issue inspired. So in my best effort to throw a bit of gasoline on the fire, here are a list of blogs, articles, and discussion groups on the topic, in a pseudo order of importance:

  • Table Layouts, Revisited – Why avoiding tables (for layout) is important
    On Scripting News on February 13, 2002, Dave Winer asks why avoiding tables is so important in web-design and points here …
    I want to make clear that I’m not saying you should never use tables. Tables are in HTML, and when you want to display tabular data, you should use them. But for layout, there are other options.
  • Macromedia – DevNet : Tableless layout with Dreamweaver
    A few years back, I stopped for the night at a farmhouse in Wales. It was a traditional farmhouse with slanted walls, a thatched roof, and narrow, winding staircases. In the kitchen, the Aga was well stocked and cats slept on almost every horizontal surface. Right in the middle of the kitchen was a large oak table.
  • Jeffrey Zeldman – Table Layouts, Revisited
    The framers of CSS reckoned its advantages were so obvious that all browser makers would rush to support it, and table layouts would soon go the way of the leisure suit.
  • Evolt.orgRevisiting Table Layouts, Revisited
    More important than the raw numbers is knowing about your site’s (or your client’s site’s) audience. You should know before writing one line of code if you need to give version 4 browsers good layout support.
  • [Craig] Saila.comTables or CSS?
    Advocates of tableless design have their own pet reasons as to why style sheets are better (“it’s faster”, “there’s better design control”, “it’s the right thing to do”), but three common reasons are presented again and again: …
  • fMonk.comTableless Design (a rant)
    Tableless Design is a wonderful method, but some designers have taken it too far. Look at the term Tableless Design what’s the key word there? Design. For years designers have been laying out websites using tables which are only meant to display data, which they do amazing well. CSS was developed to remove layout from content, as a result tables reclaimed their rightful place- holding bloody data.
  • Climb the StarsRipping out tables
    This page was not really written as a tutorial. It is an account of what I went through when I turned my site table-less. I’m aware that many people visiting this page would like to learn how to turn their site table-less. Though reading my account will definitely help, here are my suggestions for how to get going:
  • Paul O’Brien3 Column Layout in CSS
    With the advent of CSS (Cascading Style Sheets) pressure has been brought on designers (via the W3C) to veer away from the table design of old and move forward into tableless design. The three column layout has always been a favourite of web designers for a long time and with that in mind I have created this version as a basic example of a 3 column layout in CSS.
  • WebMaster WorldCSS
    I´m just trying to switch my design from old fashionend table based layout to complete CSS layout. But – it really makes me mad. I don´t get it.
  • Meyrl.netCSS Tableless Web Sites
    This was put up from the Web Nouveau’s cache, so it’s not perfect. I finally talked to Donimo and he approved of the list being revived. I will post a note from him at a later date. In the meantime, here’s the list of sites using CSS without tables except in the case of data tabulation, which is the purpose of tables.

As for me? My thought that though the separation of formatting and content is not in the Constitution, it should be. That is, whenever possible, I try to avoid tables – though I do use them when enumerating column and row like data.

15 Comments

  1. Thanks MeanDean! As an IT worker who knows next to nothing about web design, I’m glad that you throw our two-cents worth in and aggragating content to help noobs know which tech to study and which to ignore. I’m studying PHP now and will follow that up w/a study of CSS.

  2. So what about this scenario: server-side code (asp, .net, perl, php) returns xml data, which is converted to XHTML by XSLT, which then uses CSS to format for presentation?

    I’m just trying to make sure I understand how all these technologies are supposed to interact. Do XML, XSL, and XHTML even play a role in rendering a regular page? Or would it just be s-s code -> HTML + CSS?

  3. Here’s hoping that the parts of the site that *most* visitors will notice get as much thought, scrutiny, debate, and passion as the hidden (to them) implementation!

    (In other words, I wish I had used the budget I spent on a .CSS layout to hire a writer instead…;)

  4. Tableless – amen and amen! I just went tableless with our church site. http://lakeshorebaptist.net/

  5. Hey Joey,

    Think of it this way. XML is really just another datasource, like other databases such as Access or MySQL. The difference is that XML is semantically richer, more flexible, and allows for the encoding of metadata. This allows XML to serve as a medium between business to business (B2B) system, as a datasource, and a wide variety of other applications.

    XSLT is in essence just another server-side scripting language powered by XML engines and written in XML.

    XHTML is only HTML revised to obey stricter rules concerning code. HTML allowed for a lot of lazy coding practices.

    If you think about them that way, your process has an extra step. If your data is stored in a DB already, then just go straight from the DB to the format you need via your scripting paradigm of choice. If the data is stored in an XML format, then use XSLT to serve it up.

  6. I’ve experimented with tableless design, but it gives me a headache. Too many browser idiosyncrasies. Plus Dreamweaver doesn’t render CSS properly, which means I have to abandon my favorite editing tool.

    I know it will happen, but I feel like I’m at least a year or so away from going tableless, at least easily.

  7. I ditto Boyink. Content comes first. Especially for churches, because they seem so lost as to what to say and do with their websites.

    And Darryl and others point to the problem of usability (for the editor/designer) going tableless.

  8. Jason, thanks for the explanation. Made a lot of sense. I often have trouble sorting out the alphabet soup of technologies these days; I haven’t heard things stated that plainly elsewhere!

    And guys, content is certainly king (in a metaphorical sense ;) , but that doesn’t mean design isn’t important, which is why we have Dean.

  9. Anything I can do to help, Joey.

  10. Certainly I didn’t mean to imply that design was unimportant. It just struck me, though, that you can find these table vs. tableless discussions in any number of places on the web, yet find me the place where a church’s site content and purpose is discussed with such detail and passion. *Thats* where I want to be right now. I’ve been blessed with a number of offers to help on my church site. But they’re all from technical folks. Again, nothing against them, and I appreciate the desire! But where are the people who ares offering to help *write*? Or help decide where the site fits into the church’s evangelistic efforts? Or the community building efforts? Send me that kind of help!

  11. I have to agree with Mr Boyink. You can have a nice looking site, but the content is what is most important.

    I believe that often we (I) make things much harder for ourselves than we need to. The bottom line is that tables work. And the probably always will. I don’t think (X)HTML will ever get rid of tables. They are still an important part of markup. So, if you want to use tables for layout, use them. I am personally against doing that, but I’ve given up looking at the source HTML for every site I visit. So, if you use them, I’ll never know (and neither will 99% of your visitors).

  12. I love CSS for elements like background, color, and fonts, but it gives me fits with positioning, which is supposed to be one of its main benefits. I’m currently in the process of redesigning my church’s Web site (http://www.libbc.com), which is currently boring, static, and CSS-based. Users of the current site who have small monitors have problems with elements spilling over into other elements’ space, especially on the home page. Sometimes that makes links unclickable. I haven’t yet figured out how to correct this with CSS.

    The redesign on my site is going to be a looooong process because, like a few others here, I want content (of which I presently have very little) to be king, and the design should be built around the content rather than the other way around.

  13. I have used both tables and CSS to create web pages. This allowed me to discover the advantage or disadvantage of each method. In my opinion, web pages created with tables are very messy to modify and update. The CSS method can be used to convey the “newspaper” concept while modifying a page. Think about the presentation of a newspaper: header or banner, columns of info, some type of navigation (table of contents). For me, the CSS method allows to me concentrate on content instead of worry if my tables are correctly nested.

    I started about 2 years ago learning CSS and I still consider myself a newbie. While trying to solve presentation issues using CSS, the “light bulb” came on. CSS seems to allow content to be king while allowing content presentation to be visually pleasing. In addition, the presentation can be changed without negatively impacting the content.

  14. My designs are going more tableless as time goes on. However, one flaw with DIVS and CSS is that pages don’t degrade so gracefully on a two column display (where left side is the table of contents links).

    Prime example: size HYCW homepage to about 1/2 of the screen when resolution is set to 800 by 640 and you will notice the right side navigation is placed instead at the complete bottom of the page.

    Dean, just so you know, I fixed a similar problem on my site by defining a set within for content and navigation so that no matter how much the page is resized none of the text moves. It sucks that you have to do absolute sizing with divs to more graceful. Tables are just easier cause you can define the width of 1 column and leave the other unset so that it takes whatever space is left over.

    I’d be interested to hear what other people have done to solve this sort of problem.