Loading ...
Table based or table-less designing?
in HTML / CSS by Code It Red on June 30th, 2008
As time goes on and technology advances, so does many coding styles. Before CSS was a major hit, web pages were purely designed using tables for alignment. However, through the use of CSS and its properties (float, text-align etc.) we are able to attain the same results of using tables in terms of layout and still keep our coding nice and clean. Whilst using table based designs is still around and not completely abolished, it is a primary choice that nearly all of today’s web sites rely on CSS instead of tables.
Table based or table-less?
Of course there is a choice and no right way to go about designing a web page. Whether you plan to code a site using tables or without using them, both ways will still have their own bonuses.
Advantages of using table based designs:
- Easy and straight forward coding
- Quick to master and whip up
- May sometimes lead to desired effects
Advantages of table-less designs:
- A lot easier to maintain
- A wider range of effects
- Improve your Search Engine Optimization (Search Engines love neatly arranged code)
I only went over 3 main points for each style but these should only serve as a guide line and each web page is unique in terms of what is required and you should look further into the site’s structure before making a decision.
Table Based Designs – A recap
For those of you who are reading this and are not quite sure what I am referring to throughout this post, a table based design is a development, typically a web development, that utilizes the <table><tr><td> tags as the basis of a layout.
For example, here is a layout that would render a paragraph floating to the left and one to the right.
<table border="0"> <tbody> <tr> <td align="“left"">Paragraph 1</td> <td align="“right"">Paragraph 2</td> </tr> </tbody></table>
The above code would render something that resembles to paragraphs aligned horizontally but one sitting on the right and one on the left.
As you may have noticed, the code, whilst still effective, is quite messy. Once you start to have multiple tables contained inside each other and then headings over here and then another table cell over there everything can get quite confusing and in general not so easy to maintain.
Introducing: Table-less designs
This is where the fun really starts. One thing that I should mention with this style of coding is that you should first master CSS. Without fully comprehending CSS and its functions, coding using floating and text-align attributes can easily turn into a nightmare and you could quite easily spend hours of trying to get something aligned properly in CSS which could have taken less than 1 minute if you actually understood what was going on.
As you saw above in the table based design, the numerous table tags. In a table-less design, you basically don’t use any of those tags at all. None. Zero.
The long term effect of mastering table-less designs is that you can produce clean and efficient HTML pages that can easily run with little work needed to maintain or change the pages.
Using CSS to align our elements can in fact be done in a few ways. The typical, and usually easier, way to do this is to use the float attribute. When coding without table tags, we usually use
tags in order to render an element that we can then add our own styles to. One excellent attribute of the div tag is that it is displayed inline. This means that instead of starting on a new line, like a paragraph tag would, it is displayed on the same line if needed. This is perfect for all us CSS fans who love not having to redefine our elements to be displayed inline.
Back on topic, one way in which we could use CSS to display the above is rather simple.
.left {float: left;}
.right {float: right;}
<div class="left">Paragraph 1</div>
<div class="“right"">Paragraph 2</div>
Using the above styling and the arrangement of div’s we are able to achieve the same results as if we had used all those table tags. It may not look like much but once you move the CSS coding to an external file we can make our whole HTML page look a lot neater and cleaner.
The actual CSS that we used was very basic and minimal; however getting the right results inside your pages by aligning with CSS can sometimes be a long battle. Especially when it comes to cross browser compatibility and different screen sizes.
Decision making time
Now that you know a little more about the topic you should really choose one way of coding. I cannot stress the fact enough that there is no right or wrong way. If you find one way a lot easier to code or you like the other because it produces cleaner code then choose that way and stick to it. My personal preference is the table-less designing method and the utilization of CSS, namely because it is more advanced and more new age. I do know quite a fair bit about the rendering of CSS and I know in most cases how I can produce something I need, but if you are just a beginner then table based designing is definitely the way to go.
Have any good points to add? Let’s hear them in the comments!
Related Content:
July 1st, 2008
Well you asked for a comment:
My preference is still to use tables with CSS styling, because moving from one troubled system (tables) to another (Divs) is completely useless. Tables are well known, and well supported. Their short commings are almost completely void with CSS1. Truth be told, I can write the exact same site in both, and the table site will take me half the time to write and debug. Most of the time, the table site’s code will also be fewer lines. Your example above proves it.
Lets say I wanted to put those two cells in the center of the screen, and make their entire width 800 pixels. All you would have to do with the table is set align to “center” and width to “800px”, and the cells will divide evenly. You could even set the cell padding without having to change the parameters of the other cells. If you where to do the same with the divisions you would have to make a wrapper division, set it’s width, set it’s left and right margins, set it’s padding (for cross browser), set its scope, set the child divisions scope, set the divisions widths, etc etc etc …
New web developers push CSS, because that’s what their taught in school. Other then a few very specific things; like absolute transparent floating divisions for example, tables can be implimented with less code, and with better and consistant content behavior. There are a lot of “ifs” and “buts” with CSS that my send you for loops when designing complex cross browser layouts. Not to mention that I really hate the way they were implimented. For Example. Would it have killed someone to give us an center alignment implimentation instead of auto, why is padding implimented externally, and clear ( nuff said )? Come on. Divs could have been really great, if a three year old had not implimented them. In the end I use CSS Divisions only because people who don’t understand tables, and push buzzwords, force me to write it.
More power to you if you love Divs, but if I have the choice, tables will be my preference until something better comes along in the end.
July 1st, 2008
Thanks bryan for your comment. In the end, as you said, it does come down to personal choice and what you have been using. I also see no reason to change ways if you are happy with your current system. You have brought up some unique and interesting points and I am definitely glad that you shared them.
July 4th, 2008
I agree with Bryan. A lot of people who push CSS seem to have too much time on their hands. In my experience, it is far easier and in many cases, far less verbose to design websites using tables than using DIVs. It would have been great if DIVs were implemented properly, but there are so many special cases that it just isn’t worthwhile to use just DIVs.
July 4th, 2008
I have to disagree with you Bryan and Philip.
I don’t know how complicated websites you’re building, but I must say it’s way quicker to build dynamic pages wich have many modules using the “DIV+CSS” design. The code is also way better to understand which helps you with finding errors. After some time I found myself to almost not do any hacking on my websites.
I can understand it may be hard to do it with some WYSIWYG tool, but I don’t know as I never used it.
Enough to say - I was writing websites (commercialy) since ‘98 in 2003 a friend of mine introduced me to the CSS and few months after I was rewriting some of the pages to that technology.
Maybe it’s personal preference …
Piotrs last blog post..Tosia - 7:05am
July 4th, 2008
I’m fed up with aholes who come online to teach us veterans what they think is cool. This CSS crap is a bunch of bull. Tables rule.
July 4th, 2008
You’ve all brought up some interesting points in your comments and I am glad you shared them.
@jacko:
This post is all about the sharing of opinion and is in no way teaching you anything, instead an explanation of the views of other people. As you can see by the comments, some people enjoy tables whilst others prefer CSS. If you have any further matters to discuss please drop by and send me a message via the contact form.
July 5th, 2008
Tables for layout is a hack.
Using float on divs for layout is a hack.
It will cease to be a hack when browsers support inline div layout and/or CSS3.
There is no proper way right now, so use what you want
July 5th, 2008
As a designer who is more experienced and more comfortable working with tables, but is really starting to learn CSS more and more everyday, I’m starting to lean towards CSS table-less design. I think the opening comment made in the article under Table-Less Design is the most important part before being able to decide for yourself what is better: “One thing that I should mention with this style of coding is that you should first master CSS.”
Personally, I’m finding CSS overall easy to understand, it’s the hacks and cross-browser fixes that are the complicated thing. I find cross-browser compliance much easier to control using tables, which is really the only reason I still use tables. Like others have said, it comes down to personal preference, but either way, in today’s business, you really need to have a good understanding of both anyway. Those of us who don’t work for ourselves aren’t always the ones left to decide which one we can use on a project.
July 5th, 2008
Of course it is a primary goal to master both methods and as Mike stated, often my clients state which method I prefer. One definite downside to CSS is the lack of cross browser compliance, but once mastered, you will easily be able to apply your CSS so a range of browsers and OS’s.
July 5th, 2008
well, I completely dis-agree that using tables, code can be optimized. Rather I believe in this fact that tables can only be used where Tabular presentation or tabular data is there. I think Bryan, you may not have not experienced what css layout can do for you & how advanced it is. “New web developers push CSS, because that’s what their taught in school…” this statement is not at all the fact. The fact is CSS controls are amazing & you can do miracles with it. If a HTML file with CSS layout is 15kbs, same with tables will go almost triple the size of it..as like Piotr said we dont know how complex sites, but still if its complex, you should always use Divs rather than tables, or UL, LI elements..ummmm….they are awsomes..i love to create menus with them…I think you need to explore it more…Sorry if i was to harsh in my words…but there is no way a comparison between a css based website & table based…My preference goes to CSS layouts no matter how hard the application is..
July 5th, 2008
oh…i forgot about Image Sprites…like wise there are many others…which render in a webpage like zooooop……….which requires no table tags…
July 5th, 2008
I am in the CSS crowd, but I think that abolishing tables is suicide. In the real world, there are certain situations where using tables is clearly the easier, cleaner and better situation, still.
I design all new sites using as much CSS as I can. Let me give you one seemingly simple task that cannot be easily accomplished with CSS, though: a three-column layout where the left and right columns are the same height, but have different length content. Here’s the HTML for that using tables:
Column 1Column 2
I challenge someone here to come up with a CSS equivalent. In this simple example, it’ll be easy, but if you add backgrounds to each column and a few more paragraphs to each, you’ll find it exceedingly difficult. I should mention that using fixed heights is cheating–it is essential to this design that it accommodate content of any height in either column.
Again, please understand I’m not insulting CSS here–I use it every day at work. I’m insulting the idea that you must pick one and stick to it. I think you must pick the right tool for the job, and that is all. Try to be consistent, but since browsers aren’t anyway, don’t try TOO hard.
July 5th, 2008
OK, HTML was eaten. I’ll do it again, but of course pretend the square brackets are angle brackets:
[table][tr][td bgcolor="#ffffaa" width="20%"]Column 1…[/td][td bgcolor="#eeeeee" width="75%"]Column 2…[/td][/tr][/table]
July 5th, 2008
I know it’s not best solution and it’s rather a hack, and I think it works with firefox only, but well … other (proper) solution is here: http://www.alistapart.com/articles/multicolumnlayouts
[div style='display: table-cell; background: #ffa; width: 20%']Div 1…[br/]Sec. row[/div]
[div class='equal-height' style='display: table-cell; background: #eee; width: 75%']Div 2…[/div]
now… is there anyone who’d do (using tables) a footer which is always at the end of the page? I mean always - when the content is short it will be on the end of the viewport, if the content is long it will be on the end of the content? like on http://organicsearchservice.co.uk ?
I mean there are always pros and cons, tables are mature, but they’re boring to write, code is horrible to read - no meaning at all. I do have to know this technique as I still have to use it to design emails, but believe me every time I’m finishing an email I’m happy to put my hands on the keyboard to write some CSS.
Piotrs last blog post..Tosia - 7:05am
July 5th, 2008
Sorry - the link to this footer stuff should be http://www.organicseoservice.co.uk
July 5th, 2008
Some nice comments … Although I would like to bring up a couple points. Note, Once again this is longer then I expected.
First, I have been building personal and business websites since 1995, when I was working for a small computer business. I have written a great number of sites using both tables and Divs as layouts in a production environment.
Second, although you can make a lean CSS site. I have never been able to make a Div site leaner then a Table based one. That’s a simple fact. I’ve tried many times on both simple and complex designs. Once you include the CSS file size, there are just too many parameters required to position Divs. Even if you statically position them. BTW, you can statically position tables too.
Third. There are some things that Divs can do that just can’t be done with tables. I understand this well, and even if I’m doing a table layout I will use the best tool for the job when required.
Fourth. As a programmer (C++, Perl, PHP, Python), I think that most people that say tables are hard to read are either using WYSIWYG editors, or are not correctly indenting and adding the correct notation to their code. Tables are much easier to read in my opinion then Div designs, because the code for different elements sometimes comes from completely different locations. Higher tier code inflicts damage to lower blocks, which require counter code to fix display issues. Even then creating a new class and applying it to an existing name space will not always fix an issue in all browsers. CSS can really become a mess when you want to make a simple change in a higher part of the hierarchy.
Finally, I can write a cross platform (Opera, FF, IE, Safari, CE, WME, Konqueror, Links, lynx, Arachne) website with tables far quicker then I can with Divs. The platform is mature, the code is smaller, and the support is wide spread. This also saves development time and money. Money both I and my client can pocket, when they decide they want to make a major change half way through a major development project.
July 5th, 2008
as per my opinion i can make site run on all the browsers & operating system, using CSS layouts I mean with less number of table tags…i am in favor div because you replace three tags of table, tr, td & there attributes with single tag. So in longer run the file sizes are lower & the loading time is faster…also if you categories your css like i did which you can see follows, the css maintenance is also an easy task
/* search for anything
global declarations = GENERIC,
H1 TO H6 styling = HEAD,
changeable content = CONTENT,
navs / listings = NAVS,
mdoules = ARTICLE,
plain bg colors = BGS,
gradients = GRADS,
borders = BORDERS
visual containers = ROUNDS,
text, fonts, = TEXTALL,
form, input = INPUT,
footer = FOOTER,
Miscellaneous = MISC,
/*
& so on…
this kinda categorization of the css is enough to accumulate any kind of css code..
& searching for css becomes easy
/* BODY, FONT AND COLOR, GLOBAL (id=GENERIC)
**********************************************************/
body {font:normal 11px Arial !important; color:#9b9b9b; text-align:left; background:url(../images/bigger-project-holder.jpg) top no-repeat center;}
body,form,h1,h2,h3,h4,h5,h6,p {padding:0; margin:0;}
see in above example, i have mentioned the id=”id Name”, this comment will be at the top of the css file, & the search will take me to exact location.
so inclusion of all the HTML tags, like blockquote & table tags used for tabular presentation will always a good idea to work with…
July 5th, 2008
For most sites I have designed, I have used both tables as well as divs and in all cases, I have also used CSS. Saying that one must only use divs because of some strange understanding of what a “semantic” web means, is pretty silly.
Robin illustrates a problem with using DIVs exclusively. If you have multiple columns and if you cannot specify a fixed height for those columns, it is difficult using just DIVs to fix content of varying lengths into those columns and have them display properly. However, if tables were used, it would have been very simple.
Also, many of the CSS attributes which apply to DIVs apply equally well to tables as well. So what is the big deal?
July 5th, 2008
The other thing which really irritates me about CSS proponents is that they imply that a person uses tables because they are stupid.. and they are very cool and hip because they use only DIVs.. It is akin to a mechanic acting cool because he only uses a scewdriver.. even for changing oil.
July 7th, 2008
I think the article and most of the tables supporters are missing a key point. Putting aside the selection of benefits for each side which could easily be expanded/debated I will stick to those 6:
Advantages of using table based designs:
Easy and straight forward coding - benefit to designer
Quick to master and whip up - benefit to designer
May sometimes lead to desired effects - bit random
Advantages of table-less designs:
A lot easier to maintain - benefit to client
A wider range of effects - moot
Improve your Search Engine Optimization (Search Engines love neatly arranged code) - benefit to client
So when talking about “right way” to do things (which is always dangerous, but again I am working with the premise given) you have to ask right way for whom? For professional web developers the priority is to give the best solution for the client, and even by the limited list of pros and cons given that quite often means valid semantic html and css.
That doesn’t mean even than that there is not a place for a company going table-based if that is where they have the skills and trying to change would mean charging more, which would then lose them business. That is a business decision and one every business has a right to make. Where that becomes dubious is if the company tries to portray this as a favourable choice to the client or fails to point out the limitations to the client.
If the client chooses to go with a cheaper option when fully aware of it’s limitations and either deciding those limitations are not relevant to them or are an acceptable loss for the gain in cost then I am happy with that. If the client buys a tables solution from one company for the same price as a well made semantic html and css solution from another company without knowing that this could hurt their business in various ways, well then they have been ripped off in my view.
Discussions like this which imply the choice is six of one and half dozen the other, when really it is balancing designer benefit with client benefit just add to the FUD.
I can’t speak for the other “cool and hip” people (I am actually neither, I am an old school programmer but with a business head), but that for me is why I keep banging the drum. I do not suggest that people who use tables are stupid, indeed many of my designer clients still use them. I think there are circumstances where they may be making the right choice.
On the other hand, people who keep blindly slating the “new” ideas and suggest that tables remain the best way to do everything I do find it hard to defend….at least if they are professionals and not just hobbyists in which case good luck to them
July 7th, 2008
Haven’t seen a website which I cant make without using tables (perhaps except when you try to vertically align a fixed width website in the middle of the screen, made it with simple CSS although it didnt work properly in Safari only). Tables are for tabular data, period. Once you’ve mastered real use for HTML tags such as div, ul, table etc, you will find it much easier than mess around with tables. Web would be a better place if people were not lazy and/or afraid of learning something new.
July 7th, 2008
going to chip in with something that no-ones mentioned yet but the whole point of CSS is to keep your content separate from your design.
as soon as you start using tables for layout (and i used to) you are mixing the two.
this is bad for a number of reason:
* it means there is rarely any structure to your document
* tables site are a bitch to maintain and any redesign must be wholesale - with css redesigns are much more scaleable
* sites designed using tables are virtually inaccessible to users with screen readers and other assistive devices (including search engine robots)
* have you ever tried to print out a page from a table-based website. did you have much success???
CSS is one of a number of features that make up web standards, the idea being that as a profession we adhere to standards of good practice using valid code in the way that it was meant to. without this common goal and approach we will continue to be undervalued (and underpaid) as a profession.
August 3rd, 2008
Thanks for the post