Html Table Issue.

[Chesso 0]

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?

[Quatrux 4]

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. :rolleyes: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.

[Numenokh 0]

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://forums.xisto.com/no_longer_exists/

... 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 :-)

[Chesso 0]

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.

[Quatrux 4]

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.

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.

[Chesso 0]

Well i'll put it this way:

<table> <tr>  <td> </td> </tr></table>

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.

[vizskywalker 0]

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

[kelvinmaki 0]

Well i'll put it this way:

<table> <tr>  <td> </td> </tr></table>

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.

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.

<html><body><div id="abc"><div><table> <tr>  <td> </td> </tr></table><div id="abc"><div><table> <tr>  <td> </td> </tr></table></body></html>

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..

<html><body><div id="abc"><table> <tr>  <td> </td> </tr></table><div><div id="abc"><div></body></html>

[Chesso 0]

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.

[iGuest 3]

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

[Chesso 0]

Yeah I did try things like that, to see if some of the core CSS code or out element div tags and things had somehow had an adverse effect, but that doesn't seem to be the case.Unless their is something CSS specific that can cause this kind of issue.That's why I posted hoping someone might have come across this type of issue before and may have already had some answers.

[Quatrux 4]

to repeat myself again, I really don't think you'll get the correct answer asking us to guess what can be wrong, show as the html code and we will look into it, add some comments to it what is wrong with it and what you're trying to do and what result you want, that will be easy. Just host a separate file of it or something, or use services like pastebin.com or something

[Chesso 0]

It would require too many files, they aren't simple HTML files, but much of PHP/mySQL, Javascript, CSS and XHTML.It would take too long for one person that go through it all and find the issue.Hence why I was hoping someone has just had a similar issue and may identify it, or a possibility.It was actually a problem even when it was simpler code, but I didn't have time to leave it, and I found a way around. So if no one knows of the issue being possible, I will just leave it as is, but everything else works except for a table.So if no one has come across this, then there probably won't be an answer until someone else is stuck in the same position and find its, but isn't necessary for me. Just thought I would ask.

[twitch 0]

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

The later being preferable.

Consider tables as inline-blocks, that is they shouldn't be a top level element like divisions.

[Quatrux 4]

It would require too many files, they aren't simple HTML files, but much of PHP/mySQL, Javascript, CSS and XHTML.

For my understanding, hmm, the only thing needed is the html output with some things removed to make it smaller and an explanation of the result you want to get in that html output, all the further coding how to achieve that in your php or whatever source code is another issue, but maybe it is just me and I don't get.