Html Table Issue.

Chesso

Nov 7 2007, 10:50 AM

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

Nov 7 2007, 02:07 PM

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.

Numenokh

Nov 7 2007, 07:21 PM

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

Chesso

Nov 7 2007, 09:08 PM

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

Nov 8 2007, 07:07 AM

QUOTE(Chesso @ Nov 7 2007, 11:08 PM)

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

Nov 8 2007, 07:19 AM

Well i'll put it this way:

CODE

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

Nov 9 2007, 06:10 PM

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

Nov 10 2007, 01:06 AM

QUOTE(Chesso @ Nov 8 2007, 07:19 AM)

Well i'll put it this way:

CODE

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.

CODE

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

CODE

Chesso

Nov 10 2007, 01:33 AM

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.

Habble

Nov 10 2007, 04:49 AM

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

Latest Entries

Chesso

Nov 12 2007, 11:24 AM

Well seen as it brakes the site up pretty badly, I guess some sort of alignment could be an issue.

I did test out a few different possibilities, but with being capped on speed and especially this ISP (it's mostly great otherwise) it's not very stable when capped, so it is hard just to load up this page lol (let alone a CSS reference).

Sten

Nov 12 2007, 10:01 AM

when i have troubles with tables the very first thing i do is make sure i have the cellpadding and cellspacing and both on 0. that always fixes any table problems i have, lol. oh and other problems i have i have to use colspan and valign.

for your problem though im not sure.

kelvinmaki

Nov 12 2007, 07:39 AM

QUOTE(Chesso @ Nov 10 2007, 01:33 AM)

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.

Just wondering does the examples I've gave you work for the div/css against table? Just curious as it did for me even though it might not be the best solution.

Cheers

Arbitrary

Nov 12 2007, 12:24 AM

QUOTE

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

Well, if you're going to do the latter, you might as well put that in css. IE:

<table class="info">

Then in your css file:

.info {
padding: 0px;
margin: 0px;
}

Or, in a more generic manner, you can just specify what you want for tables:

table {
//layout info
}

And you can specify how you want to layout the table with the info class.

Maybe it'd be better if you (Chesso) posted the code for the whole page so that people can get a better of idea of why the table is causing the page to break? I mean, it's true that you can emulate tables with divs, but I think it's better to use tables all the same. Also, maybe linking to the site would be better so that people can sort through things without looking at your php code.

Quatrux

Nov 11 2007, 09:17 PM

QUOTE(Chesso @ Nov 10 2007, 11:16 AM)

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.

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE