Div Or Table

Which One Is Best Table Or Div

[abhishekmishra]

Hi,
Which one is the best for SEARCH ENGINE prospective "Div Or Table"...?

[tangor]

SE's can read either just fine, but the better approach is how they work semantically... tables are for data, divs are for layout.

[webprutser]

Interesting question, abhishekmishra.
I am on the eve of maybe changing a website to tableless lay-out.
Maybe, because I still have some doubts about its advantages.
I don't give anything for the fact that tables were used to make tables and not for making lay-out. If it works, it works. There are plenty of things in life that are used for more purposes then what they were originally intended for.

What I'm looking for are additional arguments and reading a bit about tableless design told me that screenreaders, braille devices, mobiles, but also search engines have fewer problems with tableless design. If this is true, that could motivate me to make changes.
I'm hoping on some input on this question since I'm interested in opinions on this subject.

[abhishekmishra]

Thanks All :)

[lucy24]

Awright, where's that "rolling on the floor laughing hysterically" emoticon?

<center>
<table cellpadding="4" border="0" width="81%" height="99">
<tr>
<td bgcolor="#e8e8f4" height="100%">
<center>
<table cellspacing="1" cellpadding="0" border="0" width="100%" height="100%">
<tr>
<td bgcolor="#FFFFFF" valign="middle">
<center>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="middle">
<a name="home"></a>
<a href="/">
<img src="/gfx/logo.png" align="left" border="0" hspace="7" vspace="0" alt="homepage" title="homepage"></a>
<font size="1" face="arial" color="#000000"> Welcome <b>lucy24</b> [inbox] <br> <a href="/stickymailv5.cgi?action=controlpanel">

et cetera :)

Tables can definitely be overdone, but watch out for a tradeoff in the other direction. When you use <div>s for horizontal layout, sooner or later a forced pixel size will creep in-- either for text, overall layout or both. And there go your vision-impaired readers out the window.

If you can do it in five minutes with a table or spend all day tearing out your hair trying to make a fully interoperable div, heck, go with the table. Browsers can get snarky about floats and fancy business, but they'll always display tables. Even if the CSS gets lost.

[StoutFiles]

If you're starting from scratch, learn and use div's.

If you have a successful design already with tables, then keep them.

Div's are preferred but tables are fine; people who do web design for a living frown upon table design because it's old hat and div's have more potential. It's not worth dropping in search results because you did a full site-wide redesign that is only noticed by the people viewing your source code.

[webprutser]

And what if you want to change some things anyway and like to learn? :-)

I am somewhere in the middle. Have done a few things, with help from this forum, with div's as I was convinced at that moment that "tables were old-fashioned and should be replaced by div's because that's what you read in books and on the internet".
I started to use more div's and span's (within a table) to select elements for styling rules, the reason I hadn't switched fully to tablesless desgin was my problems with positioning elements.
So at a certain stage I intended to switch from tables to div's (the boxmodel or whatever it is called nowadays). Since I started to learn and experience more about div's, doubts entered my mind. What was so fabulous about these div's, what was wrong with tables? More reading resulted in more pro-div arguments (see my first post), but I heard other sounds as well, thus my interest in this subject.

If indeed tableless design results in a better website, making the definite change is no point, but is it, more specific why is it?
* According to tangor search engines have no problems with tables, I have read it did, so am confused at this point.

* Lucy24 noticed "When you use <div>s for horizontal layout, sooner or later a forced pixel size will creep in-- either for text, overall layout or both. And there go your vision-impaired readers out the window." I must admit I don't fully understand this, the forced pixel size ... Maybe, Lucy24, you could explain. Nevertheless, a disadvantage is mentioned.

* StoutFiles: "if you're starting from scratch, learn and use div's."
OK, but why should I do so in your opinion? Div's are preferred because ....

[StoutFiles]

* StoutFiles: "if you're starting from scratch, learn and use div's."
OK, but why should I do so in your opinion? Div's are preferred because ....

-Less code, less bandwidth. CSS page is cached and site runs faster with subsequent page impressions. This alone makes it worth it.

-Editing. Wading through a mess of td's and tr's when trying to make a layout change is a pain in the ass.

-SEO friendly. Yes, SE's can read either, but they supposedly prefer div's as it's easier to categorize content with tags. It's just that they prefer old sites that don't have huge layout chnages instantly, which is why I suggest leaving a table-designed site as it is if it ranks well in SE's.

-Mobile friendly. Smartphone users increase every day, much easier to develop for these screens with proper CSS.

[lucy24]

Is it more coherent if I say "forced size in pixels"? I've seen site after site whose CSS explicitly declares a font size for text areas: that is, not "small" or "80%" but "10". This may be the single worst thing you can do to vision-impaired readers-- or for that matter most people over a given age.

And once you know how much space in pixels your text takes up, it's just a short step to defining your div width in pixels, leading in turn to pages that mandate the whole window width.

Now go check your page in Lynx ;) I did, and discovered a link I'd forgotten to update. That explains why g### persists in trying to crawl a nonexistent page.

[webprutser]

Thanks for your explanation, StoutFiles. I don't want to give you a hard time, I really appreciate your input, but want to understand the pro's and contra's of tableless lay-out so I still have some questions.

I think, that splitting content and lay-out (by using a style sheet) has in itself nothing to do with the fact whether or not you have a tableless lay-out.
I do add width and height dimensions occasionally to a table or table-cell (which is not allowed if you want to have your site validated), but the rest of the lay-out is put in a CSS-file. Because of the problems I often run into with positioning elements, I still make use of tables.

SE's prefer div's, because it is easier to categorize content with tags .... but <table>, <tr> and <td> are tags, there can be a <p> inside of it or a <ul>, so what's the difference for the SE's?

I am happy to say I understand you remark about SE's preferring sites without huge layout changes. :-)

[webprutser]

@lucy24: I hate to say but .... again. I don't do it on purpose (the buts I mean), BUT I am one of those persons who uses a fixed size of pixels. Adjusting it to your preference is just a matter of using CTRL + or - to the best of my knowledge, or am I missing something?

btw: never heard of Lynx, so I read about it and downloaded it. Pretty confronting to see your website without lay-out. I am happy to say it was still as informative as it should be. I discovered some alt values at images, that I forgot to add.
The links I couldn't figure out. Some links were shown in read and they worked, others - in a different color - didn't work in Lynx, but work in Firefox/IE/Chrome.

[tangor]

When I migrated from table-driven layout to div-driven, the errors in coding layout dropped immensely. HOWEVER, I did not go back and change my existing evergreen sites from table to div, there are many legacy pages on the web, and SE's do index tables fine.

[engine]

Discussion over here [webmasterworld.com...]