How to Convert DIV design to table design ?

convert div design to table design

[deenesh1]

Hello,

I want to convert my div designed website to normal table design. so please help me to how to convert div design website to simple table design format.

Is there any online editor who convert div design to table design ? or if i have to follow any coding steps then please let me know how to convert it.

Thank you in advance. I will really appreciate your reply to my post.

Regards
Deenesh

[ronin]

Welcome to WebmasterWorld, deenesh1!

I want to convert my div designed website to normal table design

Well... this is a can of worms.

There's no such thing as "table design". Using tables for layout was a widespread hack sixteen years ago because it was difficult to produce a 2-dimensional layout in the browser.

Please, please learn CSS2 and how CSS positioning works.

You can ask any number of questions in the HTML and CSS forums here and any number of people will be happy to help you.

But - trust me on this (I know it's not what you wanted to hear) - your time is far better invested in learning CSS positioning than it is, trying to refactor markup into some antiquated layout hack.

[Fotiman]

What you probably mean is that you want to use some sort of grid layout, and you think that this means using tables. But that's not the case. There are a few really good ways to create grid layouts using CSS. Here are a few:
[purecss.io...]
[960.gs...]
[getbootstrap.com...]

Or you could always roll your own. There's a good write up by CSS guru Chris Coyier:
[css-tricks.com...]

But using tables for layout is not semantic, generally uses more markup (meaning heavier page weight), and can get very difficult to maintain.

[deenesh1]

Thank you Friends, for your valuable reply.

[EastTexas]

CSS tables & IE Compatible Mode are not the best of friends...
[caniuse.com...]

[Fotiman]

EastTexas, according to that link, there's no issues with IE8+ and css table display. But note, we're not even talking about CSS table display. :)

[incrediBILL]

I want to convert my div designed website to normal table design. so please help me to how to convert div design website to simple table design format.

While you're at it, you might want to convert your gas powered vehicles to steam.

Seriously, table design is past tense, it's for displaying data, not formatting pages.

There are lots of good CSS tutorials online that will walk you through CSS, video and html tuts, I highly recommend taking the time and just watching them.

[lucy24]

normal table design

"Normal" is a statistical word. What exactly does it mean in this context?

That being said... You can do almost anything with a well-crafted regular expression. A couple years back, I converted a bunch of gallery pages from table format to nice responsive divs. (This is, ahem, the ordinary direction of change.) I've probably still got the regex sitting around somewhere.

[tangor]

While I am firmly on the css side of things these days, there's still nothing preventing table-based layouts OTHER THAN THE SEMANTICS.

I'm more curious as to why one would want to change a div based site to table layout. That might provide better responses.

[Kendo]

I'm more curious as to why one would want to change a div based site to table layout.

When one knows how to use tables, one will find that they have more control over the layout and appearance of the cells and modifications are much easier.

Even in Notepad table code is easier to use and I don't care what CSS pundits claim at all. In fact I doubt if they have more than limited exprience using CSS than what is already provided in their ready-made website via WordPress, etc.

For example, while using Notepad I can punch out the code for a complex page comprised of tables including a multitude of varied settings for spacing and style with irregular columns and nested tables and know exactly what it will look like before I ven preview the page. I challenge anyone to try doing that using DIV and CSS from Notepad.

TABLES are not dead and DIV is not the future at all. In fact DIV has no advantages whatsoever. So get real!

[deenesh1]

I agrees to Kendo, very right said, tables are not dead, and div is not the future too. many many websites still using table layouts. tables are easy to configure and change, for CSS you need to have training.

[lucy24]

I don't care what CSS pundits claim at all. In fact I doubt if they have more than limited exprience using CSS than what is already provided in their ready-made website via WordPress, etc.

Who's "they"? And what has Notepad to do with anything? It's just a text editor; it doesn't care whether you use tables, divs or flashing marquees.

Edit:
tables and CSS are not mutually exclusive. Is it hotter in New York than in the summer? Do you use tables or stylesheets? Do you ride your bike to school or take your lunch?

[tangor]

When one knows how to use tables, one will find that they have more control over the layout and appearance of the cells and modifications are much easier.

This simply is not true. There is a difference between tables for layout and divs for layout... semantics. That said (and I coded table based from 1996 to 2009) once the change over is made there's no going back. It is much more USER and SEO friendly to be div than table. And most here are always looking for a leg up to get more SEO.

However, as I stated earlier, table-layout is not dead and does continue, and is not "wrong"... so my question remains:

Why would an existing DIV site want to convert to TABLE? There's got to be a reason for the question. What is it?

[drhowarddrfine]

When one knows how to use tables, one will find that they have more control over the layout and appearance

No. You have LESS control. You can't cross boundaries. You can't control the flow. You can't control sizing. And on and on.

If one knows how to use tables, they know enough not to use tables for layout.

[drhowarddrfine]

There is a difference between tables for layout and divs for layout... semantics.

Divs have no semantic meaning at all. They're generic and only used to group elements together for styling or to provide a javascript hook. Otherwise, they are meaningless.

Semantics require an element such as a heading or a list or a paragraph; h1/ul/p. And a table is semantic. It's a table of data.

[tangor]

Think I said that @drhowarddrfine. :)

Have we scared the OP off? It was a serious question asked, and I am still curious why one might want to go from div to table layouts in this day and time.

[ChanandlerBong]

many many websites still using table layouts

including this one.

[Fotiman]

Unfortunately.

[ronin]

@Kendo - I don't imagine you intended it in this way, but your comment reads like a troll-post from 2004.

There's really no need to get emotive about "table layouts vs. CSS positioning" (assuming there is such a rivalry - which there isn't).

When one knows how to use tables, one will find that they have more control over the layout and appearance of the cells and modifications are much easier.

Absolutely, demonstrably, 100% untrue. The table-layout hack allows for 2 dimensional grids (or nested grids). Without CSS positioning, how can we attribute individual table cells with z-index, absolute positioning, relative positioning, fixed positioning, floating behaviour etc. ?

Even in Notepad table code is easier to use

Nonsense.

Is:

<table>
<tr>

<td class="header" colspan="2">HEADER HERE</td>

</tr><tr>

<td class="menu-left" width="20%">
<ol>
<li>Contents</li>
<li>Menu</li>
<li>goes</li>
<li>here.</li>
</ol>
</td>

<td class="content" width="80%">
<h1>Main Content</h1>
<p>goes here</p>
<p>and here.</p>
</td>

</tr>
</table>

easier than:

<header>HEADER HERE</header>

<nav>
<ol>
<li>Contents</li>
<li>Menu</li>
<li>goes</li>
<li>here.</li>
</ol>
</nav>

<article>
<h1>Main Content</h1>
<p>goes here</p>
<p>and here.</p>
</article>

If so, how so?

and I don't care what CSS pundits claim at all. In fact I doubt if they have more than limited exprience using CSS than what is already provided in their ready-made website via WordPress, etc.

Umm. Your doubt might be misplaced.

For example, while using Notepad I can punch out the code for a complex page comprised of tables including a multitude of varied settings for spacing and style with irregular columns and nested tables and know exactly what it will look like before I ven preview the page.

Very good. If you can already do this, then you are certainly sufficiently experienced to teach yourself the CSS positioning which produces the same layout.

I challenge anyone to try doing that using DIV and CSS from Notepad.

Easy as pie.

TABLES are not dead

Table layouts were never alive. They were a hack. A temporary band-aid. They were completely obsolete as long ago as 10-11 years ago.

and DIV is not the future at all.

On this last point, you are absolutely correct. The (semantically meaningless) <div> element has been superceded in HTML5 by (semantically meaningful) structural elements such as:

<header></header>
<nav></nav>
<section></section>
<article></article>
<figure></figure>
<aside></aside>
<footer></footer>

[incrediBILL]

When one knows how to use tables

They use them for tabular data.

FWIW, all the arguments for or against are silly as both divs and tables end up generating a ton of code, CSS files are humongous so and with the proliferation of both broadband and gzip page compression these days, unless your raw files are over 100K the load time is negligible.

Surprisingly, one of my pet peeves is still the big time suck today as it was with we used modems. the ubiquitous bloated and improperly optimized images.

Anyway, the topic is how to convert DIV design to table design and the answer is simple: take something done properly and mess it up. ;)

But seriously, there's nothing you can't do with CSS styling using almost any tag these days so the use of tables is actually a lack of understanding CSS.

I'd recommend a good CSS tutorial, there are several online worth watching or reading, and if you can't figure it out after that, enjoy your tables.

[Kendo]

@Ronin you have given an example of a simple table with only two cells and yes it is quite easy to duplicate that with DIV but my point and the point that no-one reads because they are too busy skim reading with steely eyes is that when one gets complex with div one will get lost.

Re Notepad... if you cannot code using Notepad or another similarly simple editor then you should not be in this debate. Likewise, if you your editing skills are limited to the manipulation of CSS and templates already provided by an out-of-the-box CMS you should not comment here either.

And yes I am emotive... about reading nonsense posted by newbies and greenhorns claiming that this is 2014 and that one is a lame old dud if you don't use CSS.

Btw I do use CSS and I use it with tables and I have created CMS and shopping carts for more than a decade. I do use DIV for odd fixes but that's all.

The original post here was "how to convert div to tables" and instead of getting helpful answers all we see is wisecracks about "why would anyone want to convert from div to tables" and "how wonderful DIV is"... when it is not. In fact what I have read here and in other forums about the pros of using DIV is absolute and utter rubbish.

Anyone insisting on using DIV instead of TABLES on one of my jobs will never get the job. So please don't waste any more of our time.

[lucy24]

Likewise, if you your editing skills are limited to the manipulation of CSS and templates already provided by an out-of-the-box CMS you should not comment here either.

What participant in the present thread does this refer to? Or does "here" mean WebmasterWorld as a whole?

Incidentally, the use of table layout for discussion forums can be easily justified. It isn't about "data" (near-meaningless word!), it's about relationships. Everything in a column has some unifying feature; everything in a row has some other unifying feature. That's what a table is. If your content requires three or more dimensions, it's time to fire up the javascript. But you still have to throw in css to make the tables suitably responsive on smaller devices.

So far we haven't heard anything concrete about the site that the original post was asking about. But you don't often see genuine tables laid out as divs from the outset.

[ronin]

@Kendo - you don't seem to understand that layout tables are a hack.

A hack that is both antiquated and obsolete.

If no-one had ever invented the hack in 1996, would it ever have crossed your mind to use it?

when one gets complex with div one will get lost.

In fact the opposite is true.

A page where elements are positioned using CSS2 is so much easier to build and maintain than writing and rewriting nested tables, that once you have weaned yourself off the hack, you'll never want to go back.

[lucy24]

Editorial comment after side trip which others in this thread have probably taken by now:

It's one thing to say "Yes, yes, I know, but I've had the site since 1996 and haven't the energy to change it". It's one thing to say "If it ain't broke, don't fix it". It's one thing to say "You can't teach an old dog new tricks". It's one thing to say "Do as I say, not as I do."

It's a very different thing to say "My way is objectively and factually superior to your way".

That's when people start getting into fights.

:: twiddling thumbs ::

[drhowarddrfine]

The (semantically meaningless) <div> element has been superceded in HTML5 by (semantically meaningful) structural elements

This is not true at all and the div element has a large part still to play as none of the HTML5 elements you list can take its place for things that don't require sectioning.

@Kendo, while you are able to create the things you talk about, the problem is you are only talking about the things you are able to do while ignoring the things you can't. You've run into the problem where you can say, "It works" but that's the best thing you can say about it. Many people still use IE6 cause "it works" and it works well for the sites they visit but they're ignoring the fact that there are sites they can't visit or use at all.

I like to show this article from 1997 by the guy known as the first to think of using tables for layout, appropriately titled, "The Web is Ruined and I Ruined It". [xml.com...]

I pour narrative text into tables, completely hosing the idea that tables should be used for tabular material. My sites become popular. People start doing what I'm doing. I write a book explaining how to do it, and it becomes the Amazon.com number one best-selling book of 1996 in five months. The Web falls apart quickly. The search engines can't tell a picture of Dolly Parton from a picture of Dolly the sheep.

He calls it, "the roots of html terrorism". Remember. This is 1997. 17 years ago.

[ronin]

Thanks, drhowarddrfine - I was looking for exactly that article (after you mentioned it in another WW thread only a few weeks ago) and I couldn't find it.

Allow me to substitute "extended" in place of "superceded".

[Kendo]

You've run into the problem where you can say, "It works" but that's the best thing you can say about it.

What has this statement got to do with anything that I posted?

If you consider a table as a simple 2 cell entity and you are able to repoduce that using DIV then congratulations but please be advised that the tables I refer to and use every day are very much more complex with custom colspan and rowspan offsets nested inside of many other tables to comprise different templates used in inserts assembled for pages on the fly, the like of which I have not seen in sites using DIV only. In fact I have had to convert DIV to tables on some jobs because DIV could not provide the desired layout. I won't even mention cross browser compatibility here!

[Fotiman]

the tables I refer to and use every day are very much more complex with custom colspan and rowspan offsets nested inside of many other tables

That sounds like a maintenance nightmare. Jamming presentation into the content/structure layer... kudos to you for being able to manage that, but I feel sorry for any poor fellow that has to work on it after you.

[drhowarddrfine]

@Kendo OK. Now take the contents of one cell in the bottom left and put that into the center of the page taking up 50% of the area's width and height while taking the contents of the center cell that was there and put that in the lower right while moving the lower right's cell to the left side. You have 30 minutes.

Well, don't try. Cause you can't do it cause you don't have that flexibility. I'll also ignore that search engines can't follow the structure of your page so they will struggle to find content and even give up at times.

Using tables for layout is stupid. Google for that phrase. It's another one I posted on here many years ago. I'd give you the link but I have a feeling you didn't read the other one I posted.

As @Fotiman said, tables are a maintenance nightmare. I don't know why anyone would do that to themselves.

[Kendo]

This is just it... if you can use tables, and I mean not just know what they are, then it is quite simple.

In the skill test mentioned above I would simply insert another table... 30 seconds. How I do that for the desired effect I leave you to figure and this is where our problem lies... you can only do such things with DIV because that is all you know.