Page 1 of 4

Whoa whoa.... tables -> div/span?

Posted: Wed Mar 17, 2004 11:18 pm
by Steveo31
I read about tables becoming "bad coding" practice, and should be replaced with the <div> and <span> tags and CSS to control those. I'm not doing anything that someone would be viewing on a PDA or something that tables wouldn't be interpreted, so can I just stick with tables and be happy?

Posted: Wed Mar 17, 2004 11:29 pm
by andre_c
Actually I have written websites that use divs and spans almost exclusively and until browsers become better at handling css positioning I don't think people will stop using tables for layout.
Websites that use divs and spans are much easier to maintain and build if you only have one target browser though. As bad as tables are, they're easier to use when you want the website to look the same in all browsers (as long as you use CSS)

Posted: Wed Mar 17, 2004 11:39 pm
by Steveo31
Okay, cool. At zengarden.com or somethin, their page is made in <div> and <span>. I don't get em really, it's gonna take time to uinderstand it all.

Thanks for your input though.

Posted: Sat Mar 20, 2004 6:59 am
by malcolmboston
as andre said

ive been coding in HTML around 6-7 years now and still i see no good reason to stop using Tables in my layouts

although my sites are very much CSS reliant (my current site that im building has 2 CSS files at 1500 lines each) CSS is still very much in its infancy and is not interpreted safely across ALL browsers, tables although they are being used for completely the wrong thing, can pretty much guarantee a consistent layout across all browsers

Posted: Sat Mar 20, 2004 7:27 am
by patrikG
to add to what malcomboston said, CSS is seriously hyped at the moment - which is a good thing. But unless IE, Mozilla, Safari and that AOL browser have some standardised CSS implementation, you'll be wringing you hands, banging your head against the wall just to get the one graphic aligned top-left with no space.

Using tables are old, no doubt, but they work. That's not to say CSS is silly. It actually is fantastic, the W3 standards just need to be implemented rigorously.

Posted: Sat Mar 20, 2004 1:21 pm
by vigge89
i just started using DIVs and SPANs (today actually), and i find em much easier to handle than tables (atleast when they're working ;) )
i had some problems in the beginning, like choosing which type to use (DIV/SPAN), but i got it worked after some time.

Posted: Sun Mar 21, 2004 12:26 am
by steedvlx
like choosing which type to use (DIV/SPAN), but i got it worked after some time.
Care to share? :lol: I am still wondering when to use DIV and when it's better to use SPAN. Both get screwed up pretty well across major platforms when I try them. So, I'm here looking for the answers.

Thanks in advance

Posted: Sun Mar 21, 2004 4:40 am
by malcolmboston
if you are wondering what to use heres my understanding on the subject

<div> is a block-level element
<span> is an inline element.

You can use a <span> inside a <div>, but not a <div> inside
a <span>.

This is very useful when you've applied a particular style to
a <div>, but have a block of text inside that <div> that you'd like to apply
a different style treatment to.

Also, in HTML, a <div> is a page <div>ision - you will always get a single
line break following a closing <div> tag (</div>). A <span> is simply a null
text container.

Posted: Sun Mar 21, 2004 8:17 am
by steedvlx
Thanks malcolmboston.

I'll try to wrap my head around that and see what difference it can make in my current IE/NS problems.

Posted: Sun Mar 21, 2004 11:05 pm
by no_memories
I'll add a bit to this post.

You can, with a bit of in-depth understanding of CSS, achieve a non table layout that works in a great number of browsers. The secret is to use CSS rules that apply across the board and not get tunnel vision on an exact look that you had in mind. Try to be flexible and have a plan "B" ready.

For instance, say you wanted a certain part of your layout to appear as X; it does in Mozilla based browsers, but in I.E. it may be off somewhat. So how to fix this? Well, it's good to understand each browser's limitations. Once you cross that bridge, only use solid CSS that you can 95% say will cross browser.

This doesn't limit your ability to layout designs; it simply makes you use your CSS imagination a bit more. You can stack <div>s by using the z-index rule.

Code: Select all

<div style="z-index: 1; background: transparent url( this.gif )">
<div style="z-index: 2; background: transparent url( that.gif )">
<div style="z-index: 3; background: transparent url( this.gif )">
<div style="z-index: 4; background: transparent url( that.gif )">

</div>
</div>
</div>
</div>
Each div is guided by its parent div's properties. The top level div may be positioned absolute; the other div's may be placed relative. Just depends on how you layout is structured. But keeping your div flow and z-index order is key to broad cross browser functionality.

In addition, you can use multiple backgrounds by specifying the transparent background property within each div, this allows transparent gifs to be used and stacked; simulating a table look.

Also, use the @import rule for all layout based css. This allows old browsers like Netscape 4, text only browsers, and text readers to access all the information on your site without looking garbled. If you use divs and you disable all styles, how does you site look? It should cascade into a readable format; if it doesn't you haven't done your homework.

Another way to simulate a table is to us the <dt><dl></dl></dt> tags.

Specify the <dl> as a block and the <dl> as inline, effectively creating simulated table rows.

Style:

Code: Select all

dt.t1 &#123; /*the added class limits this to specific dt's*/
display: block; white-space: nowrap; position: relative; margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid #f00;
&#125;
/*use margins and padding to space the elements, you can even specify the width and height of the each tag*/
dl &#123;
display: inline; margin: 0px 0px 0px 0px; padding: 0px;
&#125;
Make sure you keep your dl's in one line to keep variations from browser to browser from occuring:

Code: Select all

<dt class="t1"><dl>row 1 cell 1</dl><dl>row 1 cell 2</dl></dt>
<dt class="t1"><dl>row 2 cell 1</dl><dl>row 2 cell 2</dl></dt>
<dt class="t1"><dl>row 3 cell 1</dl><dl>row 3 cell 2</dl></dt>

Posted: Mon Mar 22, 2004 9:49 am
by steedvlx
no_memories,

I've been playing with this for the last several hours, and it has some great potential for me.

Thanks for the info.

Posted: Mon Mar 22, 2004 10:01 am
by Draco_03
CSS IS the futur table should be use for EXTRA precision.. like ina form for exemple.. a small form in a page.. you would be using a table
but otherwise.. css is your friend

Posted: Tue Mar 23, 2004 9:40 am
by Steveo31
Wow... lots of input. :cool:

Now, I know what CSS is, how its used generally, etc, but in this case it's confusing me. I think it may be the various opinions on how to use it in this case. You guys are saying that tables are still "ok" to use, but only as long as CSS is along with it, right?

Posted: Tue Mar 23, 2004 9:48 am
by malcolmboston
break down

css is not implemented 'consistently' across all browsers and therefore givens inconsistsnet look on different browsers

tables have been around alot longer and supported by all browsers

my personal opinion is dont rely on CSS, as people can always turn CSS files off anyway (in certain browsers)

i use CSS for everything except layout, for that i use tables

Posted: Tue Mar 23, 2004 7:27 pm
by Bill H
i use CSS for everything except layout, for that i use tables
For what my two cents is worth, bingo!