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
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
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.
David Cooke
October 23rd, 2008 at 1:58 pm
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?
Alison
October 23rd, 2008 at 2:44 pm
Will pure CSS tables work in ie 6 and 7? If not, is there a work-around?
endorphine
October 23rd, 2008 at 3:37 pm
No way!
daniele
October 23rd, 2008 at 4:20 pm
Doesn’t work on IE6
Ray
October 23rd, 2008 at 4:26 pm
So this only works in IE8, but not IE6 or IE7. Is that correct? What about other browsers? Where does it break?
Bogdan
October 23rd, 2008 at 5:30 pm
@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.
m
October 23rd, 2008 at 8:39 pm
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
Internet Brain » The Return of Table-Based Layout (Well, Sort Of)
October 23rd, 2008 at 8:47 pm
[...] 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. [...]
The Return of Table-Based Layout (Well, Sort Of)
October 23rd, 2008 at 10:29 pm
[...] Visit Source. [...]
matthi
October 24th, 2008 at 12:35 am
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 ?!?
ingenium
October 24th, 2008 at 12:38 am
I like the idea… useful for future development… thanks
nortypig » Blog Archive » Using CSS table: display
October 24th, 2008 at 12:50 am
[...] 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 [...]
Jermayn
October 24th, 2008 at 2:34 am
Never used this technique before but will now
Thanks.
henrique zap.br pimentel
October 24th, 2008 at 3:45 am
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.
Tom
October 24th, 2008 at 9:20 am
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.
Bogdan
October 24th, 2008 at 10:18 am
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.
MattZ
October 24th, 2008 at 1:34 pm
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.
Useful Links (24/10/2008) | Apramana
October 24th, 2008 at 2:08 pm
[...] The Return of Table-Based Layout (Well, Sort Of) [...]
Bogdan
October 24th, 2008 at 4:25 pm
“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.
endorphine
October 24th, 2008 at 7:09 pm
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
Furniture » Blog Archive » Table Search Engine Results
October 25th, 2008 at 1:35 am
[...] The Return of Table-Based Layout (Well, Sort Of) [...]
Simon Davy
October 25th, 2008 at 5:40 pm
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.
Design Feeds - The Return of Table-Based Layout (Well, Sort Of)
October 26th, 2008 at 6:49 pm
[...] Visit Source. [...]
2008 October 24 - Links for today « My (almost) Daily Links
October 27th, 2008 at 7:08 am
[...] Bogdan Pop on The return of the table based layout [...]
Maquetando sin tablas, pero como con tablas
October 27th, 2008 at 7:38 pm
[...] 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”, [...]
Links of Interest - CSS-Tricks
October 28th, 2008 at 12:46 pm
[...] 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 [...]
Brad Smith
October 28th, 2008 at 1:28 pm
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!
David Sparks
October 28th, 2008 at 2:34 pm
the #sidebar is missing a ” ; “
David Sparks
October 28th, 2008 at 2:50 pm
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.
LPent
October 28th, 2008 at 5:10 pm
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.
alex
October 29th, 2008 at 1:10 am
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.
alex
October 29th, 2008 at 1:11 am
come to think of it, does any of Google’s software ever come out of beta?
Matthew James Taylor
October 29th, 2008 at 7:20 am
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.
The Return of Table-Based Layout (Well, Sort Of) | CrazyLeaf Design Blog
October 30th, 2008 at 8:35 am
[...] 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 [...]
Bob
October 30th, 2008 at 2:19 pm
“/* 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.
Bogdan
October 30th, 2008 at 10:49 pm
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.
A Ghoulish Collection of Links | This Month In SEO - 9/08 | TheVanBlog | Van SEO Design
November 1st, 2008 at 1:00 am
[...] The Return of Table-Based Layout (Well, Sort Of) [...]
Felipe Giotto
November 3rd, 2008 at 8:57 pm
Hi!
You talked about all my problems, but did not bring a solution!
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!
Felipe Giotto.
Slightly Nervous » Blog Archive » Links of Interest
November 7th, 2008 at 2:40 am
[...] 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 [...]
Manuel Minino
November 17th, 2008 at 3:09 pm
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…