1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Is tableless layout any good?

Discussion in 'HTML & Website Design' started by shadow12345, Nov 28, 2008.

  1. Jake-Johnson

    Jake-Johnson Peon

    Messages:
    839
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #21
    Tableless is the best.

    For example:
    
    <table width="100" height="100" bgcolor="red" border="1" bordercolor="green">
    <tr>
    <td>
    Hello, this is a table!
    </td>
    </tr>
    </table>
    
    PHP:
    Now for the div:
    
    Css:
    #boxClass { width: 100px; height: 100px; background-color: red; border: 1px solid green; }
    
    Html:
    <div id="boxClass">
    Hello again, this is a div!
    </div>
    
    PHP:

     
    Jake-Johnson, Nov 29, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #22
    Bullcookies. Let's see you put two columns side by side, have both columns dynamically CENTER their content top to bottom, have both columns adjust their height to match each-other. DIV's can't do it. Dynamic content relationally centered to dynamic content == CSS/DIV /FAIL/ hard.

    Let's see you do this without a table:
    <!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"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=iso-8859-1"
    />
    
    <title>
    	Table Test
    </title>
    
    <style type="text/css">
    body {
    	padding:8px;
    	margin:0;
    	background:#BBB;
    }
    
    .postList {
    	width:100%;
    	border-spacing:0;
    }
    
    .postList th,
    .postList td {
    	padding:0.5em;
    	text-align:center;
    	vertical-align:middle;
    	background:#DDD;
    	border:2px solid;
    	border-color:#FFF #888 #888 #FFF;
    }
    
    .postList th {
    	background:#DEF;
    }
    
    .postList .even td {
    	background:#EEE;
    }
    
    .postList .subject {
    	text-align:left;
    }
    
    .postList .lastPost {
    	width:1%;
    	white-space:nowrap;
    }
    </style>
    
    </head><body>
    
    <table class="postList">
    	<tr>
    		<th class="subject">
    			Subject
    		</th>
    		<th class="lastPost">
    			Last Post
    		</th>
    	<tr>
    		<td class="subject">
    			Just some quick<br />
    			Test text on multiple<br />
    			Lines
    		</td>
    		<td class="lastPost">
    			Was Yesterday
    		</td>
    	</tr>
    	<tr class="even">
    		<td class="subject">
    			One line subject
    		</td>
    		<td class="lastPost">
    			Was Yesterday<br />
    			and today<br />
    			and tommorow<br />
    		</td>
    	</tr>
    	<tr>
    		<td class="subject">
    			It really shouldn't matter how long one section of text is.
    			each 'column' should adjust to the same height as it's sibling in 
    			the row. DIV/CSS cannot do this - PERIOD because there is no way
    			to make a group of tags end up the same height as whichever sibling
    			element is tallest.
    		</td>
    		<td class="lastPost">
    			So there!
    		</td>
    	</tr>
    </table>
    
    </body></html>
    Code (markup):
    There are a great number of things tables do really well, especially on adjusting dynamic height AND width elements which means BETTER small screen fitting, not worse.

    Generally true if you want to re-order the columns, but if you aren't changing the order there is little difference between using CSS for the table and using CSS for DIV's.

    or more limiting the moment you start working with vertical positioning.

    Oh, and DIV's which handle multiple dynamic widths like sweetly retarded crack addicts do? Generally tables are BETTER at small screen support because they are easier to have adjust than the fixed width crap most of your DIV based designers turn out, or the 'stupid margin tricks' needed for source order dynamic center width (which usually involves fixing the width of the side columns) - and really on a small screen there are few if any differences in actual behavior between a table and a div. See the above example, it degrades to small screens BETTER than using CSS/DIV could ever do, making that particular arguement pretty much rubbish.

    True, but you CAN use CSS on tables - and should. The problem is NOT the table, the problem is the use of presentational tags and worse, presentational attributes.

    Table - an orderly division of data into rows and/or columns. Hmm....

    the problem is NOT the table, it's people not knowing how to use them properly.

    As I said in my 'good code, bad code' post, MOST of the arguements about tables are pure manure.

    To that I'd add border-spacing which replaces cellspacing to an extent, though if you are going to use negative margin tricks inside your TD to create complex border effects (like erasing a section of border) IE screws up the sort ordering when border-spacing is set, reversing it and removing any chance of controling it, so you still have to use cellspacing in those cases.
     
    deathshadow, Nov 29, 2008 IP
  3. sclek

    sclek Banned

    Messages:
    28
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #23
    CSS is way better than Tables. For one this it lets the site load faster and is "web 2.0". Tables are no longer being used and all professional designers are changing to CSS/XHTML.
     
    sclek, Nov 29, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #24
    Myth. As I just said speed is related to filesize. You mean to say renders faster, and... well, read my good code, bad code post for the rest.

    Ok, so /FAIL/ at web development for even mentioning the meaningless buzzword that is nothing more than marketspeak nonsense. (sorry, pet peeve)

    Go to eBay, Amazon and Google - view source.
     
    deathshadow, Nov 29, 2008 IP
  5. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #25
    **sigh**

    Despite your post, deathshadow, you try and point out what tables can do over css (actually just easier) but don't show the disadvantages of tables. Even the guy who first created the thought of using tables for layouts laments ever doing so in "The Web Is Ruined and I Ruined It".

    This very thread is a relic of a question asked in days gone by that no one should be asking anymore. Using tables for layout is stupid and no one should consider doing so anymore than they would consider not using a doctype on a web page.
     
    drhowarddrfine, Nov 29, 2008 IP
  6. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #26
    My pet peeve, too. Web 2.0 is used as a meaningless buzzword but has a well explained definition by its author that anyone can understand.
    Go to MSN.com
     
    drhowarddrfine, Nov 29, 2008 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #27
    Oh, and just to give an example of the 'loads slower' rubbish being exactly that, let's use that valign example markupdude linked to in the second reply, and write that as a CSS controlled table.

    The markup as a table would be:
    <table class="vadjust">
    	<tr>
    		<td>
    		...content...
    		</td>
    	</tr>
    </table>
    Code (markup):
    That's 82 bytes and needs the following CSS:
    .vadjust {
    	border-collaspse:collapse;
    	table-layout:fixed;
    	width:100%;
    	height:100px;
    	color:#FFF;
    	background:#000;
    	margin-bottom:2.4em;
    }
    
    .vadjust td {
    	vertical-align:middle;
    }
    Code (markup):
    197 more bytes, Which brings out total to 281 bytes.

    The original used this markup:
    <div class="border v-outer">
    <div class="v-middle">
    <div class="v-inner">
    ...content...
    </div>
    </div>
    </div>
    Code (markup):
    Which is 114 bytes, and uses this css:

    .v-outer {
    	display: table;
    	#position: relative;
    	overflow: hidden;
    	height: 100px;
    	background: black;
    	color: white;
    	width: 100%;
    }
    
    .v-middle {
    	display: table-cell;
    	#position: absolute;
    	#top: 50%;
    	vertical-align: middle;
    }
    
    .v-inner {
    	#position: relative;
    	#top: -50%;
    }
    Code (markup):
    coming in at 300 bytes for a whopping 414 bytes just to 'not use a table'.

    Now last time I checked, 281 bytes is going to load faster than 414 bytes - anyone who tells you otherwise is trying to pump you full of shit, and likely also has land in florida for sale and can get you a great deal on a bridge in brooklyn.

    The ONLY speed arguement for tables that holds any weight is in terms of rendering time - which is true, a table will suspend rendering until all the content is available UNLESS you state table-layout:fixed; - simply adding that one line tells the table to start rendering content as soon as it gets it and force the content to fit the table instead of making the table fit the content... making it just as fast as a pureDIV layout.

    Which is why most of the anti-table rheotoric is little more than FUD spewed forth by people who never bothered to learn to use tables PROPERLY in the first damned place. The ONLY arguement that holds weight is the notion of changing your column orders without changing the source order, a good arguement and why for MOST of my layouts I do in fact use DIV/CSS instead of tables - but to dismiss the table outright is shortsighted, and generally shows a lack of understanding of all the things a table can do which DIV/CSS can not - ESPECIALLY once you start using CSS to control your tables.

    (oh, and most of the classes in my example would be unneccessary if Mozilla would hurry the **** up and fix the DECADE OLD bugzilla #915)
     
    deathshadow, Nov 29, 2008 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #28
    If you mean Tim o'reilly his first four paragraphs aren't bad and fairly accurate, but trying to turn it into anything more than that is just bull. Pretty much from 'the web as a platform' on it illustrates everything WRONG with the current mode of thought in web development.

    You mean the site that does not degrade gracefully to smaller displays worth a damn, makes no use of dynamic fonts making it a complete accessability /FAIL/ for large font/120 dpi users, uses anything BUT semantic markup and blows 350k total document on 5k of content? Great example there... I particularly enjoy how they white-space strip it when I could probably code the same thing in a fifth the markup with white-space AND comments. That they take their valid doctype and screw it with their generated content is fun stuff too - nothing like taking yourself out of quirks mode just to have the javascript put you back into it.

    ... and I could easily counter with the new live hotmail - if it too wasn't a steaming pile of crap the people behind which should be FIRED over.
     
    deathshadow, Nov 29, 2008 IP
  9. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #29
    Yes, I meant O'Reilly but since he coined the term and defined it he can't be anything less than 100% accurate whether anyone cares for it or not.
    Doesn't matter. My example is one of a large, valid table-less site and nothing else.
     
    drhowarddrfine, Nov 29, 2008 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #30
    That becomes invalid the moment their javascripts run ;) - seriously, get a load of the div inserted before the doctype. (use the firefox web developer toolbar to view generated source instead of a normal view source)
     
    deathshadow, Nov 29, 2008 IP
  11. LaWoure

    LaWoure Guest

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #31
    You have to design table by each one, but in css you just add div tag and its done
     
    LaWoure, Nov 30, 2008 IP
  12. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #32
    I use divs where possible (infact I have inherited a site I'm slowly but surely stripping the tables from) but if I have to start hacking the css to make it show right in all browsers I'm outta there. The whole hack thing is a joke. There is no way you can code in a time efficient manner if you have to test on windows and mac and a raft of different browsers every time you change the css.
     
    sarahk, Dec 4, 2008 IP
  13. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #33
    I don't see that at all in 'view source' or Firebug.
     
    drhowarddrfine, Dec 4, 2008 IP
  14. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #34
    Learn...how...to...write...proper...markup. Don't tell me you use IE as your test bed. If you write proper markup and use a modern browser (not IE) to test in, chances are you markup will work everywhere and the only browser you need to hack will be IE.
     
    drhowarddrfine, Dec 4, 2008 IP
  15. Ueland

    Ueland Peon

    Messages:
    66
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #35
    It is not a trend, it is how it is supposed to be done! :)

    Table = Tabular data. A website is not tabular data, for example sports results on the other hand.

    Quick summary in a blog post
     
    Ueland, Dec 4, 2008 IP
  16. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #36
    Why hack anything... it's a joke

    And I do know how to write proper markup and I do use FF. I've had Mac users send me some funky screenshots so it's not just IE that screws up.

    I just think it's pretty lame to come down hard on the folks who don't have the time or inclination to stuff around getting IE to behave. I know my clients just want a site that works and they want it yesterday.
     
    sarahk, Dec 4, 2008 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #37
    View GENERATED source - you need the web developer toolbar for that (which has all sorts of other fun menu items - I find it more useful than firebug) - firebug usually doesn't deal with DHTML very well, and likewise a normal view source doesn't show scripted content either.
     
    deathshadow, Dec 4, 2008 IP
  18. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #38
    Firebug does pretty good with js but I still don't see anything in generated source. The webdev toolbar also says it's not in quirks mode, which it would be if there was anything before the doctype. Besides, that would mean there would be a script before the doctype and that doesn't show either.

    I find it totally bizarre that the people who make the worst web browser on the planet also make a 100% standards compliant front page.
     
    drhowarddrfine, Dec 4, 2008 IP
  19. Ozz

    Ozz Peon

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #39
    CSS is a must, I agree but if you want to display tabular data tables are still needed. Only in that case... the rest is pure CSS.
     
    Ozz, Dec 4, 2008 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #40
    Well you have to remember, as hard as we rag on IE - both IE 5.5 and IE6 were in fact the most standards compliant browsers when they were released... since when 5.5 hit gecko was damned near stillborn, opera hadn't even started implementing CSS2 and khtml (later to become webkit) was just a twinkle in a FLOSS fanboy's eye. Even by the time of IE6's release gecko was still having growing pains, only a handful of 'fringe whackos' used Konqueror and Opera 7 was just showing promise, but still had a long ways to go.

    Today it's easy to look down on IE6, but there was more than one reason that developers started coding to IE6 and **** the rest. Let's be honest, prior to about five years ago nobody actually developing live sites gave a rat's backside about the W3C, assuming they had even heard of it! We're STILL fighting an uphill battle to get mainstream developers to even TRY validating their code, or at least understand why what they are doing doesn't validate or doesn't work cross browser.

    See the lazy ass ****s over at GMail.
     
    deathshadow, Dec 5, 2008 IP