Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
DIV and SPAN instead of TABLE!!! 1
- Thread starter Ikramy
- Start date
dilettante
MIS
Well, this uses CSS to get what you're at. Perhaps it would make a good starting point?
Good luck!
Code:
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>DIV & SPAN: Simulating Table Layout</TITLE>
<STYLE>
.hs1 {COLOR: #ffffff;
BACKGROUND-COLOR: #333333; WIDTH: 150px;
TEXT-ALIGN: center; MARGIN: 2px}
.hs2 {COLOR: #ffffff;
BACKGROUND-COLOR: #333366; WIDTH: 100px;
TEXT-ALIGN: center; MARGIN: 2px}
.hs3 {COLOR: #ffffff;
BACKGROUND-COLOR: #336633; WIDTH: 100px;
TEXT-ALIGN: center; MARGIN: 2px}
.s1 {COLOR: #000000;
BACKGROUND-COLOR: #cccccc; WIDTH: 150px;
TEXT-ALIGN: center; MARGIN: 2px}
.s2 {COLOR: #000000;
BACKGROUND-COLOR: #ccccff; WIDTH: 100px;
TEXT-ALIGN: right; MARGIN: 2px}
.s3 {COLOR: #000000;
BACKGROUND-COLOR: #ccffcc; WIDTH: 100px;
TEXT-ALIGN: right; MARGIN: 2px}
</STYLE>
</HEAD>
<BODY>
<DIV>
<SPAN class="hs1">Item</SPAN>
<SPAN class="hs2">Quantity</SPAN>
<SPAN class="hs3">Unit Price</SPAN>
</DIV>
<DIV>
<SPAN class="s1">Conical Widget</SPAN>
<SPAN class="s2">47</SPAN>
<SPAN class="s3">$34.56</SPAN>
</DIV>
<DIV>
<SPAN class="s1">Top Wobblecrank</SPAN>
<SPAN class="s2">8</SPAN>
<SPAN class="s3">$1,234.70</SPAN>
</DIV>
</BODY>
</HTML>Hi,
If your goal is to format the display of the page, I would suggest that you stick to tables. CSS positioning is not that well supported and it can be a headache. CSS1 which dates back to december 1996 is supported by browsers version 5 and up!!! CSS2 (may 1998) introduced element positioning. When will browsers support CSS2? Who knows.
Most companies are happy to say that their latest version supports CSS1, more than 4 years after it was made a W3C recommandation!!!
Bye.
If your goal is to format the display of the page, I would suggest that you stick to tables. CSS positioning is not that well supported and it can be a headache. CSS1 which dates back to december 1996 is supported by browsers version 5 and up!!! CSS2 (may 1998) introduced element positioning. When will browsers support CSS2? Who knows.
Most companies are happy to say that their latest version supports CSS1, more than 4 years after it was made a W3C recommandation!!!
Bye.
-
1
- #4
Um....CSS1 supported absolute positioning. It supports floats. I can make 4 column layouts using only CSS1. If you look at
That only uses CSS1 and looks fine in any CSS compliant browser. And it also degrades gracefully in any noncompliant browser. Is suprisingly useable in Netscape 4.x.
I don't know where you got the idea that CSS1 does not support positioning....
===
Supports Mozilla and Web Standards
Knows HTML/XHTML, CSS1, JavaScript, PHP, C++, DOM1
===
That only uses CSS1 and looks fine in any CSS compliant browser. And it also degrades gracefully in any noncompliant browser. Is suprisingly useable in Netscape 4.x.
I don't know where you got the idea that CSS1 does not support positioning....
===
Supports Mozilla and Web Standards
Knows HTML/XHTML, CSS1, JavaScript, PHP, C++, DOM1
===
Hi,
I read standards' specifications.
"Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C Recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables."
from
"CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface."
from
"Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C Recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
So how are positioning and style sheets related? The original cascading style sheets recommendation included very little related to page lay out. With CSS1 the width and height of an element can be specified margins and padding can be specified on an element text indent can be applied to the first line of an element float and clear provide the means to create columnar layout (up to a point). Definitely lacking from this list is the ability to specify where the top or left hand side of an element should be.
To address this lack of positioning, a separate draft specification, CSS2 (for positioning) was developed by Scott Furman, and others from Netscape Communications Corp. and Scott Isaacs, and others from Microsoft Corp. This provides a series of new properties, as well as the extension of some existing properties from CSS. Together these provide much more sophisticated page layout capabilities for style sheets developers."
from
Bye.
I read standards' specifications.
"Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C Recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables."
from
"CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface."
from
"Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C Recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
So how are positioning and style sheets related? The original cascading style sheets recommendation included very little related to page lay out. With CSS1 the width and height of an element can be specified margins and padding can be specified on an element text indent can be applied to the first line of an element float and clear provide the means to create columnar layout (up to a point). Definitely lacking from this list is the ability to specify where the top or left hand side of an element should be.
To address this lack of positioning, a separate draft specification, CSS2 (for positioning) was developed by Scott Furman, and others from Netscape Communications Corp. and Scott Isaacs, and others from Microsoft Corp. This provides a series of new properties, as well as the extension of some existing properties from CSS. Together these provide much more sophisticated page layout capabilities for style sheets developers."
from
Bye.
Hi,
Trevman, I've looked at and I don't see any positioning properties in there. Your CSS is valid CSS1.
The float (and clear) properties were in CSS1 and could alter the position of elements but they could not control it and do not make positioning part of CSS1.
Some of the properties that were added in CSS2 to support positioning are: position, overflow, clip, visibility.
Bye.
Trevman, I've looked at and I don't see any positioning properties in there. Your CSS is valid CSS1.
The float (and clear) properties were in CSS1 and could alter the position of elements but they could not control it and do not make positioning part of CSS1.
Some of the properties that were added in CSS2 to support positioning are: position, overflow, clip, visibility.
Bye.
dilettante
MIS
All I know is my example works fine in IE. How does it look in later Netscape browsers? Sorry, can't be bothered to install Netscape's stuff again right now - maybe later - I only do MS-oriented sites these days.
If you guys are serious about supporting "everyone" how come I don't see anything about WebTV? Still a bunch of 'em out there and they may just end up being bigger (hit-count-wise) than Netscape if trends continue.
P.S. - So your best advice to this guy is to use tables for layout? But doesn't Netscape wimp out here too, forcing you to use a whole bunch o' nested tables to avoid those ugly 3D borders?
If you guys are serious about supporting "everyone" how come I don't see anything about WebTV? Still a bunch of 'em out there and they may just end up being bigger (hit-count-wise) than Netscape if trends continue.
P.S. - So your best advice to this guy is to use tables for layout? But doesn't Netscape wimp out here too, forcing you to use a whole bunch o' nested tables to avoid those ugly 3D borders?
Hi,
What I'm suggesting is that if the goal is to present tabular information, then by all means use tables; this is what they were invented for. If, like I suspect, the use of table was to control the layout of the HTML document; then I still would use tables over CSS because of simplicity and compatability.
BTW, I would not and do not waste time coding for NS, WebTV or other agent because all together they barely represent 10% of all hits. Unless the client insist... but then, he pays extra!
Bye.
What I'm suggesting is that if the goal is to present tabular information, then by all means use tables; this is what they were invented for. If, like I suspect, the use of table was to control the layout of the HTML document; then I still would use tables over CSS because of simplicity and compatability.
BTW, I would not and do not waste time coding for NS, WebTV or other agent because all together they barely represent 10% of all hits. Unless the client insist... but then, he pays extra!
Bye.
dilettante
MIS
Gotcha.
I was assuming Ikramy was asked by his boss/client/life-partner to create "tables" using CSS because Netscape tables are so bad, resulting in all those table-nesting fiascos to try to get a decent-looking layout.
I was assuming Ikramy was asked by his boss/client/life-partner to create "tables" using CSS because Netscape tables are so bad, resulting in all those table-nesting fiascos to try to get a decent-looking layout.
Don't program for a browser when at all possible. Program for a specification. Most things you write for a spec will work in Netscape 6+ and IE5+. Then just use the @import command to hide the stylesheet from the POS browsers and your set to go. ===
Supports Mozilla and Web Standards
Knows HTML/XHTML, CSS1, JavaScript, PHP, C++, DOM1
===
Supports Mozilla and Web Standards
Knows HTML/XHTML, CSS1, JavaScript, PHP, C++, DOM1
===
- Status
Similar threads
- Locked
- Question