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

JavaScript and client side scripting.

Moderator: General Moderators

Steveo31
Forum Contributor
Posts: 416
Joined: Sun Nov 23, 2003 9:05 pm
Location: San Jose CA

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

Post 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?
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post 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)
Steveo31
Forum Contributor
Posts: 416
Joined: Sun Nov 23, 2003 9:05 pm
Location: San Jose CA

Post 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.
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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.
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post 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.
User avatar
steedvlx
Forum Contributor
Posts: 122
Joined: Wed Jun 11, 2003 10:54 pm
Location: Osaka, Japan

Post 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
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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.
User avatar
steedvlx
Forum Contributor
Posts: 122
Joined: Wed Jun 11, 2003 10:54 pm
Location: Osaka, Japan

Post 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.
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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>
User avatar
steedvlx
Forum Contributor
Posts: 122
Joined: Wed Jun 11, 2003 10:54 pm
Location: Osaka, Japan

Post 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.
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post 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
Steveo31
Forum Contributor
Posts: 416
Joined: Sun Nov 23, 2003 9:05 pm
Location: San Jose CA

Post 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?
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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
User avatar
Bill H
DevNet Resident
Posts: 1136
Joined: Sat Jun 01, 2002 10:16 am
Location: San Diego CA
Contact:

Post by Bill H »

i use CSS for everything except layout, for that i use tables
For what my two cents is worth, bingo!
Locked