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