Whoa whoa.... tables -> div/span?
Moderator: General Moderators
Whoa whoa.... tables -> div/span?
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?
- andre_c
- Forum Contributor
- Posts: 412
- Joined: Sun Feb 29, 2004 6:49 pm
- Location: Salt Lake City, Utah
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)
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)
-
malcolmboston
- DevNet Resident
- Posts: 1826
- Joined: Tue Nov 18, 2003 1:09 pm
- Location: Middlesbrough, UK
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
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
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.
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.
-
malcolmboston
- DevNet Resident
- Posts: 1826
- Joined: Tue Nov 18, 2003 1:09 pm
- Location: Middlesbrough, UK
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.
<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.
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
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.
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:
Make sure you keep your dl's in one line to keep variations from browser to browser from occuring:
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>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 { /*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;
}
/*use margins and padding to space the elements, you can even specify the width and height of the each tag*/
dl {
display: inline; margin: 0px 0px 0px 0px; padding: 0px;
}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>-
malcolmboston
- DevNet Resident
- Posts: 1826
- Joined: Tue Nov 18, 2003 1:09 pm
- Location: Middlesbrough, UK
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
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