Hello there :)

Angela I'm Angela. I've been blogging on and off, but I've always been around. I like rambling about anything that strikes my fancy, be it personal endeavors, geeky pursuits, books I'm reading, writing attempts, occasional travel, and the games I play.

 

Definition of a table-less layout

What does “table-less layout” mean to you?

Recently I’ve come across a number of discussions about what constitutes a table-less layout, and most developers’ definitions can be pooled into two differing definitions of this term:

  1. A table-less layout used on a website means that no tables are used on the website, none at all, none whatsoever. For all content, use paragraphs, divs, ordered/unordered lists, spans, and the like. Tables are for newbiez.
  2. A table-less layout used on a website means that tables are not used to lay out graphical elements and content on the webpage, i.e., the header, footer, content, sidebar, etc., but uses tables for tabular data when it’s appropriate.

Personally, I believe in the second definition of a table-less layout, and I was actually amazed to learn how many people actually believe in the first definition. At the risk of a semantics war, I feel like I have to post about this. It’s probably due to all the HTML/CSS/JS/etc talk I’m exposed to for most of the day while at work; I’m exposed to debates about semantics, accessibility, etc. with some regularity.

HTML is a markup language: Hypertext Markup Language. Any markup language (HTML, XHTML, XML, YAML, etc) is only as good as the structures and tags one uses to markup their data. Using appropriate markup in order to provide inherent meaning to data is important. See for example:

<h1>This is a page heading</h1>
<p>This is some paragraph text. If I am a computer, I wouldn't understand the meaning of these words, but the P tag I, as the developer, used to encapsulate this text tells the computer that this is a paragraph. Now I want to quote someone.</p>
<blockquote><p>Now I am quoting someone, and the computer knows it's a quote because this is inside appropriate tags. This is me trying to emphasize something.. And now my quote is done so I need to cite my source.</p><cite>This is the author of my quote</cite></blockquote>
<p>This is another paragraph, and this time I need to outline a step-by-step process, like so:</p>
<ol>
<li> Step one: do this. </li>
<li> Step two: do that. </li>
<li> Step three: do more things. <?li>
</ol>
<h2>This is another heading, but of lesser importance than h1</h2>
<p>And more paragraphs, but for now this is a strongly-emphasized chunk of text.</p>

Using appropriate, semantic markup is important for us as developers, because we are the ones who develop the web. We are the ones who program the content that is the meat of the web. If we use meaningful markup, it will be easier and easier for computers to index and determine our content, and to provide it to others who need that content.

That said, semantics is hazy, and data can be different in meaning for each developer, for each programmer. Sometimes it does make sense to use lists over tables, when it’s more appropriate. But when you’re talking about correlated data, data you see on charts, feature and price matrices, and the like, it’s usually more appropriate to use a table, because by definition, it is tabular data we are representing.

For example, a price list. It’s a list, right? So here we’re using a list:

<h1>Price list</h1>
<ul>
   <li>
      <ul class="header">
         <li> Product name </li>
         <li> Colors available </li>
         <li> Stock availability </li>
         <li> Price </li>
      </ul>
   </li>
   <li>
      <ul>
         <li class="header"> Product one </li>
         <li> Blue and green </li>
         <li> In stock </li>
         <li> $10.00 </li>
      </ul>
   </li>
   <li>
      <ul>
         <li class="header"> Product two </li>
         <li> Blue and green </li>
         <li> In stock </li>
         <li> $15.00 </li>
      </ul>
   </li>
   <li>
      <ul>
         <li class="header"> Product three </li>
         <li> Blue and green </li>
         <li> Out of stock </li>
         <li> $20.00 </li>
      </ul>
   </li>
</ul>

And here is the same data marked up in a table:

<h1>Price list</h1>
<table>
   <tr>
      <th> Product name </th>
      <th> Colors available </th>
      <th> Stock availability </th>
      <th> Price </th>
   </tr>
   <tr>
      <th> Product one </th>
      <td> Blue and green </td>
      <td> In stock </td>
      <td> $10 </td>
   </tr>
   <tr>
      <th> Product two </th>
      <td> Blue and green </td>
      <td> In stock </td>
      <td> $15 </td>
   </tr>
   <tr>
      <th> Product three </th>
      <td> Blue and green </td>
      <td> In stock </td>
      <td> $20 </td>
   </tr>
</table>

Example #2 has lesser code (better in terms of page size and load time), needs lesser CSS since you don’t have to muck with floats (better, again, in terms of css stylesheet size and load time), and makes sense because we are looking at tabular data: we have specific information connected to a certain product (as defined by the headings).

(Also, shameless pimping: YUI can parse tables and show dynamically-generated charts (from your table’s data) using DataTable–currently in beta.)

If makes more meaningful sense (in terms of markup) to use a list over tables, sure, I’d use lists, and would promote the use of lists as well. But what I’m against is the use of lists for tabular data “just because”just because I want to make a “table-less” website, just because it’s kewl to sweat it out using lists in lieu of tables and I wanna show I’ve got the HTML/CSS chops to do so, just because I feel that I have to prove myself to others.

I feel a lot of newer web developers end up doing this because of those reasons; I’m a victim of this myself. I was this way when I started not using tables in layouts way back in 2000, I was this way when I started using XHTML to markup my pages a few years back (three or so?). I jumped in on the bandwagon because it was the cool thing to do, because I can say, hey, I can do this. Now I have a lot of websites I need to update because my understanding of the semantic web has changed.

That said–I know there are other ways to mark up that chunk of dummy data I put up. Are there other ways of doing it that is meaningful to you as a developer? What criteria do you use when creating table-less layouts?

  • Ace: Court was obviously being tongue-in-cheek, no need to raise your eyebrows there :)

    Thanks for the feedback.

  • Ace John said:

    @court : seriously, is it really five “billion” website?

    Anyway, use divs for layout. use tables for
    tabular data. use for list and so on…
    meaning, use the appropriate html tags
    for its intended purposes. dont cheat.

    and also, firefox change the background color of name and mail fields to yellow. so i cant see my name/mail (cause the text is color gray).

  • I agree with #2.

    It would be very silly to have data that is clearly supposed to be in a table (like members in Enthusiast) in divs/paragraphs/lists. You just can’t replace tables in some areas of design.

  • Hi Courtney! You’re right, the need to use standardized markup becomes more apparent when you’re working with a lot of websites that need to be as maintainable as possible. For one, they’re faster to code and style, and you don’t need to do anything MORE to have them behave the way you need them to, by virtue of the fact that they already behave that way by default.

    It’s also “self-documenting”; you’d know just by looking at (uncommented) markup what is is, as opposed to using other elements which might not be as obvious.

    I love your point about if someone turns off stylesheets! That’s ABSOLUTELY SPOT ON, I can’t believe I didn’t think of that, for all that I’m drowning in graceful degradation at Y!, lol!

  • Working at a company where I have to keep five billion websites up to date, I personally find it so much easier to use tables for data that requires it, instead of using a bunch of lists and making it look like tabular data. Again, like you stated, it IS more semantically correct to put it into a table. Especially if someone turns off style sheets, then it’s still going to display properly, which is definitely what you want to aim for in semantically correct markup.

    Plus, I find because I’m not the only person to keep websites up to date at times, but as I AM the only wedesigner, it makes it easier for these other people to update this table data on the websites without “breaking the layout” of the whole site.