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.

Table or Divs or both ?

Discussion in 'HTML & Website Design' started by sogastic, Jul 7, 2007.

  1. #1
    Hi.

    I would like to know that does tables affect SEO ? Im going to build up my new website what will be pretty huge. Have lot of products and articles.
    I would like to build it up using both divs and tables because it's much comfortable for me but if tables affect SEO I will try only Divs.

    So what you say ?
     
    sogastic, Jul 7, 2007 IP
  2. Bagi Zoltán

    Bagi Zoltán Well-Known Member

    Messages:
    364
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    110
    #2
    In my opinion divs are much better since that requires less code. They shorten the loading time of your website and improve the visible text/code ratio. Of course there are many cases when using tables is reasonable and inevitable.
     
    Bagi Zoltán, Jul 7, 2007 IP
  3. yugolancer

    yugolancer Well-Known Member

    Messages:
    320
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    #3
    div elements of course ... means .CSS and tableless content is far more preferable than using the tables and overdated stuff. Just be aware that in order to achieve the same that you were addicted to do with the tables asks for a lot experience and testing. Plus it's harder to make it cross-browser content with only CSS and DIV tags. IE is more forgiving so you can possibly think that you have done something but, ones you open it with Mozilla you will ve disapointed. My advice, work for Mozilla (Firefox) because if it looks fine in mozilla will look good in IE too. Ones you get comfordable with CSS and div tags you will start enjoying all the beauties of the Style and you will wonder why you have used the tables all this time.

    Regards :)
     
    yugolancer, Jul 7, 2007 IP
  4. jawanda

    jawanda Peon

    Messages:
    151
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    To answer your actual question rather than just giving my opinion on tables vs divs: There is absolutely ZERO difference from an SEO point of view. Tables do not adversely effect SEO in any way, the content is still 100% visible to the se's, as it is with Div's as well.

    Cheers,

    -Phil
     
    jawanda, Jul 7, 2007 IP
  5. yugolancer

    yugolancer Well-Known Member

    Messages:
    320
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    #5
    Well that was not my opinion only. It is actually W3C recommendation.
    W3C currently recommends using DIVS instead of TABLES for layout purposes. This means a web designer that is used to using tables for e.g. splitting the web sites layout into a 3 column design can now use DIVS to position and implement that layout.

    Tableless Web design is the art of building web sites without resorting to the use of tables merely for presentational purposes. Instead of tables CSS (Cascading Style Sheets) positioning is used to arrange elements and text on a web page. CSS was introduced by the World Wide Web Consortium (W3C) to improve web accessibility and to make HTML code semantic rather than presentational.

    Regards :)
     
    yugolancer, Jul 7, 2007 IP
  6. sogastic

    sogastic Peon

    Messages:
    202
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thank you for the answers.

    This forum is so great. So much information and so fast replies.

    Thanks ! :)

    Janar
     
    sogastic, Jul 7, 2007 IP
  7. sadhivm

    sadhivm Guest

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    The thing you have to ask is IS IT REALLY less code. A lot of your more 'over the top' DIV layouts have shortcomings on styling or other issues that even things like faux columns cannot overcome in the desired manner without being WAY more code than a table - in general if you know what you are doing you can CSS style a table to be as little code as most of your better DIV based layouts, and you CAN make them for the most part SEO.

    http://battletech.hopto.org/for_others/3coltable_SEO/template.html

    for example. Put a empty TD, make your latter two columns rowspan="2", and then add the first column... and that's in a 100% height model that works flawlessly cross browser, even in IE 5.x without even needing a CSS hack to get IE recognizing min-height. (height on a table is ALWAYS min-height in all browsers!)

    Most of the 'complaints' about tables like rendering time can be reduced with the proper css (table-layout:fixed, border-collapse:collapse), are utter bullshit (less compatable?), etc, etc.

    BOTH techniques have their place - I get REALLY tired of the 'Table for layout is a hack' fanboyish BULLSHIT because the purpose of a table is to divide information into rows and columns.... If you have columns, that sounds like table data to me. You have to question the 'hack' part when you are relying on the tables default behavior to make your columns, vs. diving deep into wierd quirks of floats and margins to even make SEO columns in the first place - oh, but the table is the hack - RIGHT.

    There ARE advantages to DIV's over tables - ability to re-order your columns without modifying the HTML being chief among them... Basically I always make my determination as to which method I will use on the following:

    Will I need to clear floats inside my columns? This can break float columns like crazy if care is not taken... I usually will use a table instead of DIV's if writing a CMS for example - because you never know what the user is going to type in for code - Tables are 'safer' as containers go since sight little of what you put inside them can break their layout. Under a CMS you have the advantage that changing source order on all your pages means changing the CMS once making the 'you can't reorder them' arguement against tables pretty much moot.

    Will I need to use a visual effect on the columns that faux-columns is too unwieldly or too much code to achieve? You CANNOT actually stretch all columns in a float layout to the same height, though you can visually fake the effect in many circumstances by playing with backgrounds - BUT, it still often ends up WAY more code and less versatile than a table is in the same instance. That said if you are working on a 'crappy little stripe' fixed-width layout, you can do faux-columns with ease - too bad I consider fixed width layouts a blight upon the internet.

    Will I need to use vertical positioning other than 'top' of dynamic height elements - Let's face it, middle alignment top to bottom or bottom alignment on the whole is a total /FAIL/ in CSS - you can try to fake bottom using absolute positioning, but removing from flow is usually NOT a bright idea of your total height is dynamic (quite frankly fixed height is the stupidest thing you can do in web design anyhow)

    Those are the THREE circumstances in which using a table is the valid choice. Using a table for layout OTHER than those three circumstances is a bad choice... If the answer to the above three questions is NO, use DIV!

    The PROBLEM is the overuse of BOTH approaches. Your table layout people will go nuts putting EVERYTHING in a table - even single elements. To these people, if there's only going to be one TD, and you aren't using vertical alignment middle or bottom, you just failed. Hell, if you have only one TD in each of your TR's - aka single column? You just failed.

    These are the people who when they do hop on the anti-table mafia bandwagon go nuts putting EVERY tag in a DIV... If you put a H2 inside a DIV JUST all by it's lonesome to assign a class with no extra styling that couldn't be done directly to the H2 - /FAIL/. Just as hard a /FAIL/ as putting <CENTER> around a classed DIV

    Because at the end of the day it doesn't matter whether you are using TABLE or DIV - bad code is bad code! ... and there's plenty of bad coding on both sides of this particular fence. TABLE and DIV are just TOOLS - don't throw a tool out of your toolbox just because you don't understand how to use one or the other completely, or becuase someone is running around making wild unfounded claims of calling a technique that has been the cornerstone of website development for over a decade a "hack". Use the tool you are most comfortable with, works best cross-browser in the least amount of code for what you are trying to achieve... ANYONE tells you otherwise, flip them off.

    If nothing else, both sides of this one need to stop trying to fit their square peg into the round hole.
     
    deathshadow, Jul 7, 2007 IP
  9. redofthelost

    redofthelost Guest

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Tables is quite old fashioned and takes a lot more code. I would use divs, I don't really know anyone that uses tables anymore. But if you have date in a table format you might want to use table. You could also get an application that changes all your tables into divs (like dreamweaver).
     
    redofthelost, Jul 7, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    To be honest, from a search engine's perspective, jawanda is right. A search engine will gobble up the text just as happily in a table layout as it will in a semantic markup layout. The only difference is that the table layout will take longer for the spider to go through than the semantic markup layout - IF the semantic layout uses the bare minimum of HTML code and doesn't nest DIV after DIV after DIV the way people used to with table layouts.

    Now, before any of you cry foul and start questioning my qualifications, please bear in mind (and deathshadow can confirm this) that I'm actually MAKING a full text search engine Web site, so yes, I do have some first-hand experience in this subject.

    If you're going to use semantic markup, do so for the benefit of the PEOPLE visiting and using your Web site. NOT the search engines. Afterall, at the of the day, a search engine spider is just a blind, dumb text-reading program. And the faster it can get to the text that it wants to read (and index), the less data that's transferred from the server to the user (or in the SE's case, spider - which will also save you even more bandwidth when the search engine spiders come knocking).

    Oh, and one more thing. DON'T use DIVs instead of tables. HTML elements have a purpose. Use them for that purpose. There's no need to wrap a DIV container around an unordered list if the only thing that DIV is containing is the list. Lists are block-level elements (as are DIVs), and should be marked up as such. You can also style them directly with CSS rather than relying on the DIV as a parent container. Is that a paragraph? Why yes, George I think it is. Then mark it up as one. Is a form a data table? Nope. Then what's it doing inside one? (The same thing can be said about forms inside lists - same situation, they don't belong there.) Is that menu of yours a list of links? Then stop using DIVs or A tags with | between them. Use an unordered list and give that UL tag an ID of "menu" (instead of crappy cutesy names like "nav" - what the hell is NAV anyway? everyone knows what a MENU is afterall).

    And so on.
     
    Dan Schulz, Jul 7, 2007 IP
  11. sogastic

    sogastic Peon

    Messages:
    202
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Really well explained. I got so much useful information from your posts.

    "
    These are the people who when they do hop on the anti-table mafia bandwagon go nuts putting EVERY tag in a DIV... If you put a H2 inside a DIV JUST all by it's lonesome to assign a class with no extra styling that couldn't be done directly to the H2 - /FAIL/. Just as hard a /FAIL/ as putting <CENTER> around a classed DIV

    "
    Does it change the importance of H tags if I change their size ?

    Thanks !

    Janar
     
    sogastic, Jul 8, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Heading tags help define the structure of the Web page by grouping various topics together - the heading tags are like titles for them. As for changing their size, don't do it in the HTML (especially by re-ordering the heading tags). If you need to change their visual sizes, do so by adjusting their font sizes via your site's external style sheet instead.

    Think of it this way. H1 is the page title. In your page you have two main sections - each main section would get a H2 tag. One of those main sections of your page content has two sub sections - they'd get H3s.

    Here's how it would look (just an example, and I'm only using what's directly between the <body> and </body> tags here):
    
    <div id="header">
        <img src="/images/logo.jpg" width="250" height="100" alt="Web Site Logo">
    </div>
    <ul id="menu">
        <li><a href="#">Menu Link</a></li>
        <li><a href="#">Menu Link</a></li>
        <li><a href="#">Menu Link</a></li>
        <li><a href="#">Menu Link</a></li>
        <li><a href="#">Menu Link</a></li>
        <li><a href="#">Menu Link</a></li>
    </ul>
    <div id="content">
        <h1>Page Title</h1>
        <div class="section">
            <h2>Section Title</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus.
            </p>
        </div>
        <div class="section">
            <h2>Section Title</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus.
            </p>
            <h3>Sub-Section Title</h3>
            <p>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus.
            </p>
            <h3>Sub-Section Title</h3>
            <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus.
            </p>
        </div>
    </div>
    <div id="sidebar">
        <h2>Sidebar Title</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus.
        </p>
    </div>
    <div id="footer">
        <ul>
            <li><a href="#">Footer Link</a></li>
            <li><a href="#">Footer Link</a></li>
            <li><a href="#">Footer Link</a></li>
            <li><a href="#">Footer Link</a></li>
            <li><a href="#">Footer Link</a></li>
        </ul>
        <p>
            Copyright &copy; 2007 The Monster Under The Bed.  All Rights to Scare Unsuspecting Children Reserved.
        </p>
    </div>
    
    Code (markup):
     
    Dan Schulz, Jul 8, 2007 IP
  13. alofun

    alofun Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    ought to take both
     
    alofun, Jul 8, 2007 IP
  14. Aaron111

    Aaron111 Well-Known Member

    Messages:
    4,301
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    185
    #14
    I doubt it table can be a pain stay away from them they suck:rolleyes:
     
    Aaron111, Jul 8, 2007 IP
  15. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Layout tables can. But don't forget that tables DO have thier uses. And search engines WILL spider them regardless (mine's going through over 12,000 pages right now via its semi-weekly spidering).
     
    Dan Schulz, Jul 8, 2007 IP
  16. Dondon2d

    Dondon2d Peon

    Messages:
    3,193
    Likes Received:
    146
    Best Answers:
    0
    Trophy Points:
    0
    #16
    DIVs for me, as much as possible I should get rid of tables, lol. And no, it doesn't affect SEO at all. Tableless FTW!
     
    Dondon2d, Jul 8, 2007 IP
  17. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Just don't get rid of tables to the extent that you're using DIVs and CSS to recreate tabular data - afterall, that's what tables are for (tabular data).
     
    Dan Schulz, Jul 8, 2007 IP
  18. yugolancer

    yugolancer Well-Known Member

    Messages:
    320
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    #18
    deathshadow,
    I know about million people like you. Very arogant and with sucha language full with things like bulls*** and who are trying to make search engine. The point; Only because you cannot make your "Search engine" able for spidering and crawling the web sites's content no matter the tags you cannot scream and get annoying here wihout to say anything useful.

    Regards :)
     
    yugolancer, Jul 8, 2007 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    You do realize that what you just said about my post has NOTHING to do with what was said in my post? In fact I was arguing that search engines CAN in fact read past whatever tag is used TABLE or DIV? You might want to try READING what was said instead of knee-jerking because of the language used. I also think you have Dan and I confused with each-other, he's the one deploying a search engine, not me - I'm just familiar with my own results and rankings, and am willing to apply a little COMMON SENSE to what's involved instead of following the crowd like just another sheep.

    Though thank you for providing a wonderful example of the behavior I've grown increasingly sick of among the anti-table folks... I'm daring to disagree so ignore what's actually being said and just start posting gibberish and accusations.

    CLASS.
     
    deathshadow, Jul 8, 2007 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #20
    See, people say that, and it's utter nonsense in a LOT of cases. I really wonder where that myth came into being - I think it's because people have inline styled tables so much with all that 'cellspacing=0 cellpadding=0 border=0' nonsense they've never thought to actually TRY using CSS to do it.

    Seriously, are you telling me you can do a 100% height, 100% width, SEO, full styled columns on both sides center dynamic width for less HTML than:

    
    <h1>Header</h1>
    
    <table id="columns">
    	<tr>
    		<td class="nocontent"></td>
    
    		<td class="content" rowspan="2">
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    		</td>
    		
    		<td class="sidebar" rowspan="2">
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    		</td>
    
    	</tr><tr>
    
    		<td class="navigation">
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    			<p>Some Test Content</p>
    		</td>
    		
    	</tr>
    </table>
    
    <div id="footer">Footer</div>
    
    Code (markup):
    Because frankly, you cannot even ACCOMPLISH that with DIV's without diving for an absurd number of browser specific hacks - sure you can make a page that looks like that would render using faux-columns - of course if you switch to complex image backgrounds that ends up two or three extra container DIV's assuming you can get a 100% height model working in the first place with ANY of the SEO methods. That whole it needs to float or overflow to contain it's content - but float or overflow override any height declarations 'problem'.

    ... and I guarantee you it's gonna take a LOT more CSS to accomplish that with DIV's than:

    * {
    	margin:0;
    	padding:0;
    }
    
    html,body {
    	height:100%;
    }
    
    table {
    	border-collapse:collapse;
    	table-layout:fixed;
    }
    
    h1 {
    	height:100px;
    	text-align:center;
    	font:bold 24px/100px arial,helvetica,sans-serif;
    	position:relative;
    	margin-bottom:-100px;
    	z-index:400;
    	background:#FDF;
    }
    
    #columns {
    	width:100%;
    	height:100%;
    	font:bold 80%/120% arial,helvetica,sans-serif;
    }
    
    #columns td {
    	padding:108px 8px 48px;
    	vertical-align:top;
    }
    
    #columns .nocontent {
    	width:160px;
    	height:100px;
    	padding:0;
    }
    
    #columns .navigation {
    	width:160px;
    	background:#FFD;
    	padding:8px 8px 48px;
    }
    
    #columns .sidebar {
    	width:160px;
    	background:#DFF;
    }
    
    #columns .content {
    	background:#EFE;
    }
    
    #footer {
    	height:40px;
    	position:relative;
    	margin-top:-40px;
    	background:#EEE;
    	text-align:center;
    	font:normal 16px/40px arial,helvetica,sans-serif;
    }
    
    Code (markup):
    Now mind you, if you were just doing simple columns not caring about background stretch, working inside a crappy little fixed-width stripe, clearing the footer without 100% height model - then yes, a DIV is less code and cleaner. But you mix all those extra's into the equation and the table wins hands down.

    Again I'm not saying don't use DIV, just don't use it for layouts that it makes MORE code for and makes you dive for the REAL CSS hacks unneccessarily.
     
    deathshadow, Jul 8, 2007 IP