The Return of Table-Based Layout (Well, Sort Of)

This is a guest article written by Bogdan Pop, a young Romanian entrepreneur who runs WebRaptor. He loves web programming and design and has a passion for standards and SEO. He relaxes by taking photos every once in a while and by mixing french electronic music.

Please note that this article is targeted at those of us who are more code-centric and well versed in xHTML/CSS.

How to build “table based” layouts with CSS Level 2

No quirks or tricks and it’s all standard compliant. Developers need free time, and now they can have it.

How many of you have lost countless hours while developing the perfect layout for your websites? How many have lost in fact money because of the extra time needed to complete a job! How many of you “have gone crazy” because of Internet Explorer and it’s incompatibility with standards based markup. Well, all of you need to have a quick break and celebrate. All those days will soon be over.

Developers, meet tables. Now please don’t get mad on me, because you’re not being taken back to table based layouts that standards advocates have told you not to use for your layout. I am not talking about HTML tables that are a semantic structure, I am here about pure css tables. Yes, you heard me well. If years ago you used <table> , <tr>,  <td> and similar tags to structure your sites, you will now continue to use divs. But instead of using the faux columns technique or the one described in the holy grail, you will be using something that is much more simple and that thanks to IE 8 now works exactly the same on all modern browsers.

The power of CSS Level 2

You will be using the CSS Level 2 display property. Instead of <table> tag, you will be using “display: table; ” in your css file. The attributes you will be using with display are:

  • table makes the element behave like a table element
  • table-row makes the element behave like a table row (tr) element
  • table-cell makes the element behave like a table cell (td) element
  • table-row-group makes the element behave like a table body row group (tbody) element
  • table-header-group makes the element behave like a table header row group (thead) element
  • table-footer-group makes the element behave like a table footer row group (tfoot) element
  • table-caption makes the element behave like a table caption element
  • table-column makes the element behave like a table column (col) element
  • table-column-group makes the element behave like a table column group (colgroup) element

So, lets get down to coding. First, XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>CSS Level 2 with table based settings</title>
	<link href="tables.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
	<div id="header">
		Header information
	</div> 

	<div id="main">
		<div id="nav">
			Navigation list here
		</div>

		<div id="columns">
			<div id="sidebar">
				Nifty sidebar
			</div>

			<div id="content">
				What would your site be without content
			</div>
		</div>

	</div>
</div>

</body>
</html>

If you look into the above source code, there’s nothing unusual, as most of you would have something similar in your own masterpieces. Lets add some styling.

body
	{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	}

#header
	{
	display:block;
	margin:0px auto;
	width:870px;
	padding:15px;
	background-color:#666;
	color:#FFF;
	}
/* nothing unusual so far */

#main
	{
	display: table;
	margin:0px auto;
	width:900px;
	}
/* display: table to make the main div be treated by browsers as a table */

#nav
	{
	display: table-row;
	width: 900px;
	height:50px;
	line-height:50px;
	text-indent:15px;
	background-color:#D6D6D6;
	color:#333;
	} 

/* is treated as a table row */

#sidebar
	{
	display: table-cell;
	width: 185px;
        height: 500px
	padding-left:15px;
	background-color:#FF6633;
	color:#333;
	} 

#content
	{
	display: table-cell;
	width: 685px;
	padding-left:15px;
	background-color:#77BBDD;
	color:#333;
	}

/* are placed inside the same father element: columns (check out the XHTML), and are treated as table cells */

Now, just in case you weren’t paying attention to all the code in there, I entered 500px height for the sidebar div. However, content div lacks such information, but it automatically spans just like the sidebar, same height! Check out the picture to see how things look right now.

Table based CSS layout

Table based CSS layout

Lets update sidebar’s style and remove the height.

#sidebar
	{
	display: table-cell;
	width: 185px;
	padding-left:15px;
	background-color:#FF6633;
	color:#333;
	}

Then we add some content to the site. Here’s how the site looks like naturally, with just a few lines of CSS.

Table based CSS layout, final

Table based CSS layout, final

All you have to do now is start using the technique and let others know it. In case you desperately need 3 extra minutes, you can download the above table based CSS layout source code. Cheers!

If you liked this post, please feel free to subscribe to our RSS feed and enjoy more great content daily.

Comments

40 Responses to “The Return of Table-Based Layout (Well, Sort Of)”
  1. David Cooke says:

    Nice article.
    I have used this technique a couple of times to display data in table form.
    However one question i have, is there a colspan/rowspan for this technique that was so usefull in the days of old table layouts?

  2. Alison says:

    Will pure CSS tables work in ie 6 and 7? If not, is there a work-around?

  3. endorphine says:

    No way!

  4. daniele says:

    Doesn’t work on IE6 :-(

  5. Ray says:

    So this only works in IE8, but not IE6 or IE7. Is that correct? What about other browsers? Where does it break?

  6. Bogdan says:

    @David: I think that margins applied to your inner elements inside the “table” should do the trick. Padding will not work on all elements. Anyways, padding will expand backgrounds too.

    @Alison: It doesn’t work on IE 6/IE 7. It works on browsers that fully endorse CSS Level 2. You should think exactly the opposite way. Starting years ago to present day you have used tricks to make IE comply with your designs. Now you can develop websites that will work perfectly everywhere in the near future.

    But keep in mind that you should not think backwards! You should develop for the future, not the past.

    @endorphine, is that a compliment, or …
    and finally, Ray. I have tested this on several browsers. I am now waiting for a test on around 78 browsers, on different OSes. Once I have the results I will post a full compatibility list.

    Finally, for all of you who think this may not work properly everywhere. It may not work now, but the questions is WHEN will it work, NOT IF.

  7. m says:

    How Does This Work?
    The display property allows you to specify a range of table-related values in order to make elements display as though they were table elements. The available display values are:

    table makes the element behave like a table element
    table-row makes the element behave like a table row (tr) element
    table-cell makes the element behave like a table cell (td) element
    table-row-group makes the element behave like a table body row group (tbody) element
    table-header-group makes the element behave like a table header row group (thead) element
    table-footer-group makes the element behave like a table footer row group (tfoot) element
    table-caption makes the element behave like a table caption element
    table-column makes the element behave like a table column (col) element
    table-column-group makes the element behave like a table column group (colgroup) element

  8. matthi says:

    Well I think this is all quite useless…

    I mean, your main argument goes about IE6 and 7 and the hours we spent to treat them as they lack standards etc

    But hell, you talk about the future, about IE8 ++ etc..so if we take only these “modern” browsers in count we can also stay with pure divs, no need to even fake tables, in my mind even more horrible…now we dont use tables as we dont have to but so we make them virtually…

    Well, anyway, enough said: today totally useless as you would kick in the ass all the IE6 and IE7 etc users and in the future they wont be a problem any more

    ANd if you want to kick them ass right now, just continue your daily work, again no need for tables….NOT for the layout..thats what we are talking about, huh ?!?

  9. ingenium says:

    I like the idea… useful for future development… thanks

  10. Jermayn says:

    Never used this technique before but will now :D

    Thanks.

  11. Great feature.
    But the bigger problem is – IE6.
    Damm, WHEN we can free of this sh***.
    Firefox had a lot of great fetures, Opera too and IE7 and 8 too.
    But, years before the spreadin of IE7 a lot of people (60% or more here in Brazil) uses IE6.
    No one cares about it.
    If the huge portals and websites just FORBIDEN the access for IE6 users all mass will update.
    Just close YouTube for IE6, and redirect to a download page of modern browsers … in few hours every one upgrade to IE7 or other nice browser.

  12. Tom says:

    This is definitely a jump to the past.

    When IE6 & 7 will disappear, there will be CSS3 and full column support: this technique is valid if you don’t care about Microsoft browsers.

  13. Bogdan says:

    The only browser that support, partly CSS3, is latest Safari if I am not mistaken. I think Opera too, but I am not sure. When do you think IE will support CSS Level 3? They barely started supporting level 2.

  14. MattZ says:

    Tables are for tabular data. :)

    But hey, at least IE6 and IE7 can display tables anyways. Unlike this technique, which is fairly useless.

    Andy why would we want to create tables virtually? In this example, you’re still using tables for layout, which is not how they are meant to be used.

    @ Bogdan.
    IE will support CSS3 5 years after the W3C finally finishes it. So expect IE to support it in 2035. But the support will be broken anyways and we will be trying to code for HTML 5 capable browsers, as well as all modern browsers and IE6 at the same time. :)

  15. Bogdan says:

    “you’re still using tables for layout, which is not how they are meant to be used. ”
    I did emphasize that they are not semantic structures, didn’t I?

    Such a technique could become useful in the near future because we wouldn’t have to use clearance divs, floating elements and other alike all over the place.

  16. endorphine says:

    That wasn’t a compliment.

    Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

    http://www.w3.org/TR/html401/struct/tables.html

  17. Simon Davy says:

    People seem to be missing the point – tags are for semantic tabular data, whilst table-display in CSS is for presentation. You can display it how you want (that’s the point – separating /semantics/ from /presentation/).

    Using table layout *in your CSS*, on properly semantic tags in the HTML is perfectly fine, and makes as much sense and absolute positioning, negative margins and other “tricks” you perform with CSS.

  18. Brad Smith says:

    If this will really be compatible across all browsers….this just made my year! Any idea how well mobile devices will handle this? Probably too new I suspect. Oh well. REJOICE!

  19. David Sparks says:

    the #sidebar is missing a ” ; “

  20. David Sparks says:

    after playing with it for a few minutes I’ve come to the conclusion that while this is a pretty cool technique i didnt know about, its borderline useless in anything outside of playing for the sake of playing. as im becoming more and more ok with not offering ie6 support, not offering it for 7 is out of the question.

    ie7 hasnt even knocked 6 off the chart yet and i dont even want to think about how long 8 will take to knock them both off considering i dont even have 8 right now.

    furthermore.. this is not semantic. the whole point in proper css and getting away from table based layouts is to be semantic so the browsers will handle things properly.
    1. the browsers dont handle this right yet and
    2. this is not semantic. css has its semantics as well. just bc its not in the mark up doesnt mean you can just go willy nilly.

    the new css will have better layout options regardless and this should not be one of them. this should indeed be used for tabular data and things like a contact list or small things of that nature. not full blown layout.

  21. LPent says:

    According to several browser statistic sites, IE still accounts for an average of 25% of the internet users. And there is no indication that this will change soon. Then we still have to deal with IE7 as well. The point is that non-technical users usually don’t update unless it is an automatic feature (which it isn’t in IE).
    Face it, by the time we can safely use all CSS features, CSS is old news.

  22. alex says:

    This will be useful when IE 8′s share exceeds 7 and 6. I can’t wait for the day!

    Youtube should put a modal window on their page for IE versions ‘Please upgrade your browser for the most optimal viewing experience.’ And if they want they can plug Chrome, once it’s out of beta.

  23. alex says:

    come to think of it, does any of Google’s software ever come out of beta? :P

  24. The problem with laying out websites with tables is you have very little control over the source ordering. In the example given above the sidebar comes before the main content in the HTML source – this is not very good for SEO.

    This is where divs are far superior – you can move them anywhere and get the source ordering exactly how you need it. See my example of a 3 column liquid layout with equal height columns and 2-1-3 source ordering to see how it’s done with pure CSS and no tables.

    So I think it is safe to say that tables for layout just aren’t good enough for today’s standards.

  25. Bob says:

    “/* display: table to make the main div be treated by browsers as a table */”

    If ths main div will be “treated by browsers as a table”, then wouldn’t that be the same as just using tables? I really don’t see the difference.

  26. Bogdan says:

    Hey Bob,

    No, they wouldn’t be the same thing. You should search for XHTML vs HTML Table based layout to see the differences. They range from the size in kb of each page, to structure or search engine optimization. And the list does not stop here.

    You cannot achieve something like CSS Zen Garden with tables and TRs and TDs. The trick in this technique should help in the future some developers that want to achieve the holy grail through CSS.

  27. Hi!

    You talked about all my problems, but did not bring a solution! :D

    CSS Tables are great! Unfortunately, I spend most of my time making things right with Internet Explorer 6! IE7 (kind of), FF3, Safari, Opera, all these browsers (almost) never gave me headaches! If IE6 could understand display: table-cell, the world would be so easier! :D

    Felipe Giotto.

  28. ok.. so…. as i see in the comments this is yet ANOTHER CSS “standard” utopia?? What the hell happens with all you webdesigners???? the people that have the MONEY… the CLIENTS, most of them have IE and a lot have IE6, so… if you’re a kid, playing with “COOL” stuff to see in FF or Safari, ok… spend your time doing css level wathever blah blah… but if you WORK in the real world and want MONEY in your pocket, just work like if everybody have IE6. End of problems. No headaches. No hours and money lost. and yes… sometimes… if needed.. USE TABLES… DUUUH…

Trackbacks

Check out what others are saying about this post...
  1. [...] The Return of Table-Based Layout (Well, Sort Of) How to build “table based” layouts with CSS Level 2No quirks or tricks and it’s all standard compliant. Developers need free time, and now they can have it. [...]

  2. [...] Magazine followed up a few days later with a similar take on using the display: table property in The Return of Table-Based Layouts (Well, Sort Of). An interesting technique for creating layouts that works in better browsers (not Internet Explorer [...]

  3. [...] The Return of Table-Based Layout (Well, Sort Of) [...]

  4. [...] The Return of Table-Based Layout (Well, Sort Of) [...]

  5. [...] Bogdan Pop on The return of the table based layout [...]

  6. [...] semana he leído dos artículos (artículo 1, artículo 2) donde unidos a la palabra maquetación se usan términos como “Table”, [...]

  7. [...] table; (and its subsidiaries) can actually be extremely useful in modern web layout. Here is one of them at Freelancer Magazine. Essentially you can code using nice semantic divs and accomplish stuff like [...]

  8. [...] How many of you have lost countless hours while developing the perfect layout for your websites? How many have lost in fact money because of the extra time needed to complete a job? Not anymore. View source [...]

  9. [...] table; (and its subsidiaries) can actually be extremely useful in modern web layout. Here is one of them at Freelancer Magazine. Essentially you can code using nice semantic divs and accomplish stuff like [...]



Speak Your Mind