After struggling with tableless 3column layouts I figured it's much easier and browser-compatible to just use 1 table with 3 "td"s with a header above and a footer below, and I'm currently using that layout with success on all my websites Has any of you ever used such a hybrid? (I mean, just ONE table for the 3 columns and full CSS with the rest) Also, has anyone ever tried using the table-row, table-column etc display properties? I see so many tutorials with floats etc but nobody is mentioning them
I use a table / div combination on several sites. Using the tables to make a basic 2 or 3 column layout and Div's for the rest often produces a better product than full css. IMO tables have much less problems especially in the area of browser compatibility, so combining the 2 styles can be a great benefit. It also makes coding the site easier, and can cut down on the css file size.
Using a single table with no nesting and using no rowspans can be an acceptable compromise. In fact, Apple.com describes it as a best practice. I wouldn't go that far, as table layouts, even that simple, have too many drawbacks to suit me. The primary problem is that presentation is mixed in with structure. A simple example of why that's a Bad Thing®: Try switching the left and right columns' positions. Or, the right and the middle columns. On every page on the site. As a means of testing the water, ok. But move away from any presentation in the structure (html) layer. Structure belongs in html, presentation in css and behavior in javascript. This is the best means of achieving truly UA agnostic documents. Don't worry too much about cross browser support for css. IE is the only problem. It is an obsolete, non-standards-compliant, bug-ridden PoS, but its issues are generally well known, as are the patches, work-arounds and hacks. You'll pick them up easily enough. Just make it a habit to mark up for, and test in Firefox first. Then patch for IE. cheers, gary
actually it's pretty easy changing the columns since inside the "td"s I use a <div id="lftcol"> for example so I just change the div I've tested many designs but generally found out that even knowing hacks, it's still a lot faster to just use 1 table you instantly solve any layout problem, it's xhtml compliant and the code may actually be lighter since you don't declare all the hacks and positioning in the css file I just notice that sometimes purists plain hate tables because you read they're bad everywhere, btw I find it common sense to use them when they're obviously better than css We have to face the reality: at the moment css support is not consistent across browsers, while tables are :/
Um, explain to me how copying and pasting the content on every page in the site is simpler than modifying one file, the stylesheet. Further, css2 support is very widespread among graphic browsers. There is only one browser that gives any major problems, and those problems and their fixes are well known. The experienced web coder works around, patches, or applies hacks for IE almost automagically, without extra effort or time. That a hybrid solution is a reasonable compromise does not negate the fact that it is a compromise suitable only as a bridge for the beginner while learning to fully separate structure, presentation and behavior. cheers, gary
You can use tables just like divisions and use global styling to format the tables just like divisions. You can use php or any other program to make global headers and footers with tables just like divisions. I'm not sure where copying and pasting would ever come to mind. <table class="" <table id="" Who is to say that divisional based styling is better than table based styling anyway. If someone turns external css off on their browser, table styling still preserves the format of the site. Table's and css can still be fully validated. It is a different way of getting the same and often better results.
Maybe I'm a slowit. So show me how you'd move the menu over to the right side of every page in a small, say 50 page, site, using this very simple page layout: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>simple table layout</title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } table { border-collapse: collapse; } td { vertical-align: top; border: 1px solid black; } /*]]>*/ </style> </head> <body> <table summary=""> <tr> <td colspan="2"> <h1>Top banner</h1> </td> </tr> <tr> <td width="20%"> <div id="nav"> <h2>nav menu</h2> <ul> <li>link</li> <li>link</li> <li>link</li> </ul> </div> </td> <td> <div id="main"> <h2>main content</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean metus ligula, placerat quis, eleifend at, vulputate et, nulla. Donec volutpat.</p> </div> </td> </tr> </table> </body> </html> Code (markup): cheers, gary
Exactly! If someone turns off styling it's because they don't want to preserve the format. Those of us that have learned to use it well have said this. The benefits of semantic markup and CSS are fairly objective and even measurable. Instead of trying to attack the people making the claim, you should try to attack the claim. You can try to show how a table-layout can be better than a semantic+CSS layout, and others can try to show the opposite.
Sorry I made a mistake in the previous post I didn't mean to do this "<td><div id="lftcol">" but I meant this "<td id="lftcol">" Seeing how you can change easily the style of that td (exactly the same way you'd change a div), and how I generally use a <?php include ?> inside the td itself, switching columns is a matter of switching the 2 php files and 1 css file Sure, you may say it's even easier to just change the css file, but you really spend 5 seconds switching the php files...and those 5 seconds are easily better than the, at least, 5 minutes you'd need to debug and hack the whole layout for IE, firefox, opera etc As for proving that 1 table+css is better than full css, I'd just like to say that I was a purist too, so there were reasons why I decided to use this technique AFTER using pure CSS The reason being that I was spending too much time on silly hacks that would be useless upon the next IE release, or that would break whenever I used a long phrase etc I was spending 2 hours to do what could be done in 5 minutes with 1 table + CSS The hacks would ultimately bloat the CSS file, making tables faster and easier on bandwidth Let's face it, CSS is not consistent across browsers, the idea behind it is great, but the time is not ripe yet to switch to FULL css.. I would really like it to work, but we can't just follow the hype and behave like we're blinded, IE and Firefox interpret CSS completely differently (see the box model for instance), sometimes the behavior makes no sense (and makes for some headaches too ) In months I couldn't find a decent, versatile 3 column layout that I could use on professional websites (i.e. fluid+centered, compatible with all browsers, non-breakable, and yes, i think i've seen them all, 3-col holy grail etc) That said, I'll probably change idea next year when all the browsers will (hopefully) behave consistently..
BTW, reading some of the replies, I'd like to remember that I'm not talking about a full-table layout, but actually about a full-css layout with 1 single table for the 3 content columns For 2-col layouts, full css with no tables is often enough Just trying to point out that, in my opinion, it's a mistake to use tables for everything or css for everything, as each of them has strengths and weaknesses As for separating layout from content etc, I agree, in theory that's how it should work, but seeing that the tools we've been given do not work as supposed (especially because 90% of users browse with IE, which sucks at css) we have to make up for it somehow, and the "compromise" in this case ends up being more effective than the original
I do not disagree that a simple flat table is a reasonable compromise while learning css. I do reiterate that it should be abandoned as soon as one's skill level rises sufficiently. Are you ignoring that each and every page will require changed include statements? As long as presentation is intermixed with content, a change in presentation will require that every affected page be changed. Cross browser compatibility is a minor issue. IE's short comings, bugs, and failures to comply are generally well known, as are the fixes. With experience, the work-arounds, patches and hacks for IE are dealt with automagically and without particular effort. Please don't confuse your not having got over the learning curve with the general state of the art. cheers, gary
If trying for easy and good design that surfers will like, yeah, use tables and css. If you are trying to please Gary, then use only CSS. He will otherwise be very disappointed at your amateurism.
LOL Gary, really..I just asked you a question that apparently you don't want to answer (I don't really count "You're an amateur" as an answer) My question is: what are the advantages of full css against css+one table ? The possible answer could be: 1-lighter code, 2-browser compatibility, 3-faster development time, 4- W3C validation, 5- Speed of Changes And I find css+1 table to be a winner or draw in every situation 1- Lighter code: 1 table eliminates all the hacks, making for a lighter code 2- Compatibility: Full CSS layout is not consistent among browsers, 1-table layout is 3- Development Speed: Using 1 table is faster, you could know all the hacks by heart and be a CSS genius like you claim to be, without needing any testing or debugging at all (highly unlikely), but you will still have to type the hacks, while I only type one table and I'm set 4- Validation: tables are as valid as css positioning 5- Changes: while you always say that copy and paste is required for a table layout, this is nonsense, since you can equally style a <p>, a <div> or a <td>, and even if you couldn't, php includes would make up for it What you're basically saying is that since people don't want to use hacks they are amateurs. I'm an acrobat and I can walk on my hands, but this doesn't give me the right to call anyone who walks on his feet an "amateur", nor do I advocate that everybody should walk on their hands. Walking on their feet is obviously more comfortable
I looked back at my posts here, and failed to find that comment. I did rep++ browntwn for the laugh, if nothing else. Let's see. The vast majority of IE screw-ups have no bearing on the simple task of setting columns with style rules. For that statement to be true, full table layouts would be required. I stand by my comment vis a vis IE's bahavior and its fixes. Cross-browser testing is needed with tables just as much as with any method you choose. Full support for tables is spotty too. In fact, IE is again among the effed up. See this simple scrolling table. The standards say exactly how that should be done. IE doesn't. Further, when hacks are needed (not really all that often), it goes into the stylesheet once. Thae table markup has to go into each and every page. Of course. Your point is? I refer you to my post above. Show me how you would reverse the right and left columns on 50 pages. What I would say is that a professional keeps up with advancements in his craft. If you infer that those who don't are amateurs, I wouldn't disagree. A soi-disant professional acrobat who couldn't skillfully perform basic acrobatic movements would give cause to question his professionalism. D'oh. In my case, I'm not passing myself off as a professional acrobat without having requisite proficiency. Stop arguing your shortcomings and work on your skills. gary
<td id="rightcol"><?php include rightcol.php ?></td> <td id="leftcol"><?php include leftcol.php ?></td> Open rightcol.php Select all -> cut Open leftcol.php -> Paste That didn't take hours, did it? lol ok since this discussion is obviously leading to the same answer every time (= I'm an amateur and need to work on my skills) I guess I have better things to do than stay here and give you a chance to show your enlightenment with the nirvana of coding
Actually, you left out a few steps. Using BASH syntax, it would be more like; mv leftcol.php temp mv rightcol.php leftcol.php mv temp rightcol.php for every page. Unless you have each page in its own directory, and all files carry the same names, each page will have differently named included files, right? If you do it that way, you could have a little script to crawl the directory structure and apply the changes. So far, you've only demonstrated on a single page, and with a fatal error[1] at that. Now before you go into a passive-aggressive snit, let's look at the OP: I stated that was a reasonable compromise until one learned css-p better; much like training wheels on your kid's bike. Where this degenerated was due to your not getting a rousing approval for your less than sterling idea. You need not have gone off on trying to argue that a lack of proficiency in one's field was OK. To throw in an answer to each of the ignored in the scuffle questions: Yes, I've used the table-* display methods. The problem there is that a certain obsolete browser with an undeserved market share is holding back the whole industry with its poor support. You can see an example of their usage in my three column layout for modern browsers demo. Further, you can see it in use in my vertical and horizontal centering with css demo. A centering version without hacks for IE is my 404 error page. Simply make up a file name in my domain to see it. The reason for all the float tutorials is because it's a very powerful property. It is quite commonly used to create columnar layouts, or simply side by side elements. Now get to work, and get to the point of taking off the training wheels. Hey, if it were easy, they wouldn't pay you the big bucks. gary [1] Having appended the right column content to left column's, or pasted over the left column's content—depending on whether you were in insert or overwrite mode.
Merci for pointing out the obvious copy and paste[1] process. Now I finally understood how it works and I will stop appending files sine die and leaving other included php files[2] completely empty. Now please could you you enlighten me as to how to turn on my pc? [1]The original author actually made an unforgivable mistake, since we're talking about cut and paste, and not copy and paste. [2]Again, the author's amateurism is clear. He assumes that the included files have a php extension, while they could theoretically have any extension, or no extension at all. (this is getting really silly so I won't post any more here, even though I'm really having fun at this )
haven't used tables and css as far as layouts concerned. been sticking to divs and css placement mainly because it goes in hand with my comfort level in coding. i like having the core design elements in one sheet that i can refer to instead of tweaking individual pages. granted its probably about the same amount of work either way because its not much effort to make changes in either situation, i just like having it all in one place. same reason i use a template with all my php functions in one place. so when im coding a new page or rearranging its a simple matter of <div id="nav"> <?php getnav(); ?> </div> which produces the whole navigation bar and its included contents on a page. not that this is any faster or more efficient because you still have to create the php functions for a new page and its calls which probably takes the same amount of time as hardcoding a page, its just how i feel comfortable working. also its handy to have the functions in the template file so if i want to interlink or display some information on another page by means of a "recently updated" list ors oemthing like that, i have at least the php/mysql query already set up, and its nothing to create a small function to turn titles into links in a small div. i can see and agree with the argument for css+1, to each his own though i guess.