Does anyone know how I might create a HTML table but using pure CSS (div's and what not).

I really have no idea why, but for some odd reason my layout goes nuts if I try to use the table tags, even used properly with no errors the whole thing just brakes down (I don't use tables anywhere).

So I figured my only option is to attempt to do it CSS way if possible?

Well, you could give as an example of what you're doing, if you're doing it with tables, then everything needs to be alright, if you're doing it with CSS only and with div tags, then you may have problems understanding something, but I don't understand what kind of an answer you want, for example how to do a layout in a CSS you can easily find lots of examples on google and even tutorials and also I remember I posted a topic about 3 column layouts, it is a way to make it work in IE and other browsers normally, a layout which is flexible, fluid and can stretch, it can easily be done with CSS on a normal browser, but with IE: it doesn't support display: table-cell; as it should, there is a hack for that where javascript is involved though.

So if you want to learn to use CSS divs to create a layout, when just google for CSS layouts, CSS 3 column layouts and etc.

Hi Chesso,


I started using DIV tags with CSS a while ago instead of TABLE tags. Honestly, it was more for convenience than due to any serious problems with tables. Plus, I was kinda trying to test some SEO-related issue.

Anyway, as Quatrux said, it would be best if you post some examples of the work you need done. Anyway, you can take a look at the source code of my pages at...

http://www.arabic-translation-help.com/

... and see if the use of DIV tags is your cup of tea. I suppose you can download the CSS file as well if you just save one of the pages to your computer -- save it as "HTML complete" not "HTML only."

Good luck :-)

The entire layout is DIV/CSS based.

The issue is I ACTUALLY need tabular data now but using TABLE HTML tag brakes the entire layout despite not using anything related to TABLEs yet.

So i'm looking to make TABULAR data using DIV/CSS.

Which I have managed using a whole lot of   lol.

Show the way you're doing it, I mean, why should a table tag break your entire layout, you're just doing something wrong in my opinion, I never really had problems with tables, the only thing about them is that you need to write a lot of tables, tds, and trs in the html with their attributes as well.

Well i'll put it this way:



Brakes the entire layout....., even if I set borders, padding, margins etc, it all makes no difference, the whole page just goes nuts.

But I don't use anything at all in it to do with tables or even remotely close, so I don't know why a table or it's inner elements would cause issues.

Just showing us the table code probably isn't going to help. If it's layout issues, it is likely to be a problem with the surrounding layout or the placement of the table in the code. If you could show us a larger snippet, maybe we could help you. Also, which browser are you using, because that makes a big difference. In fact, the cross-browser issue makes doing tables with just CSS and HTMLDivElements is extremely difficult. I spent a couple years working on that before I gave it up, because getting it to work in even one browser is just not worth it when tables work fine unless you break something.

~Viz

If you are using div/css with tables, you need to create a div class for your table. And the table need to be in that div. You can't just have a mixture of table and div/css in the root. If you know what I meant.



Something above will mess up the layout. I've tried it and it does for me. Put the table inside a <div> and it should solve the layout issue. So you can declare all kind of css attributes on abc div. At least it solve for me. Example below..

Oh I see what you mean, I should have tried that. I just haven't had that issue before, it might be something specific to how the code/tags are layed out and branched.

I have ended up using a simple but reasonably nice looking DIV table (even though it is for tabular data), but if I can get the tables to work, it would be much better source wise and give me more options with less garbage.

instead of <table>, try:
<table cellpadding="0" cellspacing="0">
or
<table style="border-width: 0px; padding: 0px; margin: 0px;">