Table Layouts still win over CSS layouts in 2012
The longer I am blogging and the more often I mess with my html layout (which is done in CSS) the more I come to realize that while CSS is a solution for HTML layouts but it is not a good solution and it has in my opinion completely failed to address the layout problem.
Look at any development language, GTK, QT, wxWidgets, Windows Forms, Windows Presentation Foundation, and a dozen others and they all have simple and easy to use layout systems. It is common to have Grid layouts, wrapping layouts, and more.
What does CSS2 and HTML4 have specifically for layout?
Nothing specific to layout. A div is not specific to layout. I was using what the author called Holy Grail 3 column liquid-layout. However, after two days, I still can’t change the width of my right side bar without breaking the layout in some way, which is mostly because the layers and layers of div elements is a mess in this layout.
What does CSS3 and HTML5 have specifically for layout?
They have new elements: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr
However, while you can use HTML5 and CSS3, just be aware your website will only look good in newer browser. Please don’t try to view your site on Windows XP with IE7 or IE8.
I want the developers of Firefox, Opera, Internet Explorer, Safari, Chrome, HTML5 and CSS3 to know that when it comes to layout, YOU HAVE FAILED!!!!
If there is one reason that I wish Silverlight could become the de facto internet standard is for the simple reason that the layout features in XAML are so far superior than those of even the new HTML5 and CSS3 that there isn’t even a comparison.
So what is the solution to an easy HTML layout?
It just doesn’t get easier than the good old table layout, but you can at least style your layout with CSS. CSS is good at styling even if it fails at layouts.
Look how easy it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 Column Table Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
height: 100%;
}
body {
margin:0
}
table.layout {
height:100%;
width: 100%;
border-collapse:collapse;
}
tr.header {
height:150px;
background:black
}
tr.menu {
height:50px;
background:DarkGrey;
}
tr.body {
height:100%;
}
tr.footer {
height:150px;
background:DarkGrey;
height:150px;
}
td.leftcol {
padding: 15px;
width: 170px;
min-width: 170px;
background-color:Navy;
}
td.midcol {
background-color:Grey;
min-width: 625px; /* Make 425px for min res of 800x600 */
}
td.rightcol {
padding: 15px;
width: 205px;
min-width: 205px;
background-color:Navy;
}
</style>
</head>
<body>
<table class="layout">
<tr class="header">
<td colspan="3"></td>
</tr>
<tr class="menu">
<td colspan="3"></td>
</tr>
<tr class="body">
<td class="leftcol"></td>
<td class="midcol"></td>
<td class="rightcol"></td>
</tr>
<tr class="footer">
<td colspan="3">
<p style="text-align: center;">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</p>
</td>
</tr>
</table>
</body>
</html>
- t took less than 30 minutes to make this layout.
- It still uses CSS to style the layout.
- Changes are easy (any column can be re-sized in seconds).
- Left and right columns are always the same height.
- The background colors always extend vertically as far as needed.
- It is of course, W3C compliant.
Sorry CSS, until you have a real layout solution I think you lose to a good old-fashioned table.
But what about dynamically changing the layout?
Well, lets face, it. Dynamic changes are done in code anyway, and any good developer can code up that solution. Besides, most web sites are using some sort of Content Management System, like WordPress, Drupal, SilverStripe, or others. Each of these allow for Themes or Styles and so you can easily code up a way to switch styles with code such as php, asp.net, ruby, or any programming language.
I have to agree with you. The only reason I feel I can't backup my position is that I'm more of a graphic designer than a true programmer, although I have done a lot of websites for a lot of clients. CSS for layout is an abomination. Only an engineer could have come up with the positions that are generally worthless. Absolute doesnt move - its basically worthless unless you want something stuck to an edge. It does nothing for centering. All it does is run into other items that are moving. Relative I don't know what it does. Sometimes it's relative to the previous div (unbelieveably unspecific and a hassle to go look at another item to position the first) Problem is, is that it really doesn't do anything expected, particularly in MOBILE!!!! Fixed - what is this, another absolute with some more flexibility.
Now CSS has brought back tables?
I'm constantly trying to find ways to do the simplest stuff, like just float one big image and a separate caption in a block in the center, and yet this is nearly impossible, or there is no standard way to center things. I've done it multiple ways. I just another way that is the smallest kuldge I've seen, yet still ridiculous compared to the also beautiful and deprecated CENTER tag. I'm glad these devs managed to protect their positions of pay, because they made the internet impossible.
Other more challenging ideas like a 6 x 5 group of images, 30 in all, each one linking to its own page. In tables, its a piece of cake. In CSS, I don't know that its even possible.
Another one I regular find being impossible is the old four items down, and then 3 across in the final small fifth cell at the bottom. Good Luck getting that to work in CSS.
I can put 4-5 image links horizontally together. Divs work credibly horizontally, but I need to make a fricking list to drop multiple items vertically in a cell.
I know people are getting this stuff done, and I'm glad making good careers doing so, but tables were so much easier for layout, and this after years and years of trying.
This post rocks!