table/css conversion

@khakiMay 29.2003

I’m not sure of this…
but I believe that the sandman might have hit me over the head with the “stupid-stick” last night…
because I’ve been spinning my wheels for well over an hour trying to figure something out.

Here is the deal:
I have a <table> 😮 and I am trying to replicate it using CSS.
I understand that <div> is a block element (which forces a line break after it is closed)…
so… it would sorta be the equivalent of the <tr> tag (right?).

Okay (supposing that I ~~[I]~~am[/I] right about that)…
then the <span> tag could be considered the equivalent to the <td> tag (sorta? since it is an inline element?).

So anyway…
I tried all that (substituting as mentioned) and styled the <span> tags.
But… I could not get the WIDTH to work ?

~~[I]~~EDIT: I guess I should mention that it works in IE5.0 (I didn’t test any other IE versions)… but it doesn’t work in Netscape7.0 and Opera6.02 (sorry about that. I only just now tested it in IE. But still :rolleyes: )[/I]

Now…
before I get the usual link to the W3 ? …
let me just say that I already went there 😮 (no… seriously… I ~~[I]~~did[/I] ? )
Oddly enough… the example at the W3 (for <span> and <div>) actually uses a <table> (oh-boy… just my luck :rolleyes: lol)

Anyway…
I’m stuck ?

So here is the <table> that I am trying to re-create using CSS.
Can it be done?
And if so… how big ~~[I]~~was[/I] that “stupid-stick” anyway?!
(maybe I should start wearing a helmet to bed :rolleyes: )

So… who’s got game?

thanks…
? k

~~[COLOR=NAVY]~~
<table border=”1″>
<tr>
<td width=”150px”>Row 1 – Column 1</td>
<td width=”150px”>Row 1 – Column 2</td>
<td width=”150px”>Row 1 – Column 3</td>
<td width=”150px”>Row 1 – Column 4</td>
</tr>
<tr>
<td colspan=”2″>Row 2 – Column 1 & 2</td>
<td>Row 2 – Column 3</td>
<td>Row 2 – Column 4</td>
</tr>
<tr>
<td colspan=”3″>Row 3 – Column 1 & 2 & 3</td>
<td>Row 3 – Column 4</td>
</tr>
<tr>
<td colspan=”4″>Row 4 – Column 1 & 2 & 3 & 4</td>
</tr>
</table>
[/COLOR]

to post a comment

HTML

28 Comments(s) _↴

@JonaMay 29.2003 — #[font=arial][color=maroon][b]Here's what I came up with.[/b][/color][/font]

[font=courier new]

<style type="text/css">

span {border:double black 1px;}

</style>

<div><div>

<span style="width:150px">Row 1 - Column 1</span>

<span style="width:150px">Row 1 - Column 2</span>

<span style="width:150px">Row 1 - Column 3</span>

<span style="width:150px">Row 1 - Column 4</span>

</div><div>

<span style="width:303px">Row 2 - Column 1 & 2</span>

<span style="width:150px">Row 2 - Column 3</span>

<span style="width:150px">Row 2 - Column 4</span>

</div><div>

<span style="width:456px">Row 3 - Column 1 & 2 & 3</span>

<span style="width:150px">Row 3 - Column 4</span></div>

<div>

<span style="width:609px">Row 4 - Column 1 & 2 & 3 & 4</span></div>

</div>

[/font]

[b]Jona[/b]

@VladdyMay 29.2003 — #But why would you want to do that ? ?

[CODE][size=3]
 <html>
 <head>
 <title>No Tables</title>
 <style>
 body
 { font-family: Arial,sans-serif;
 }
 
 .table
 { font-size: 80%;
 }
 
 .row div
 { float: left;
 text-align: center;
 width:150px;
 }
 </style>
 </head>
 <body>
 <div class="table">
 <div class="row">
 <div>Row 1 - Column 1</div>
 <div>Row 1 - Column 2</div>
 <div>Row 1 - Column 3</div>
 <div>Row 1 - Column 4</div>
 </div>
 <div class="row">
 <div style="width:300px">Row 2 - Column 1&2</div>
 <div>Row 2 - Column 3</div>
 <div>Row 2 - Column 4</div>
 </div>
 <div class="row">
 <div style="width:450px">Row 3 - Column 1&2&3</div>
 <div>Row 3 - Column 4</div>
 </div>
 <div class="row">
 <div style="width:600px">Row 4 - Column 1&2&3&4</div>
 </div>
 </body>
 [/size] [/CODE]

@JonaMay 29.2003 — #[b][font=arial][color=maroon]...Vladdy, I'm learning, man! :p I've never really used DIVs instead of tables, but I think I did fairly well for a start... And I used SPANs because that's what khaki suggested, not because I prefered them over DIVs (which I don't, I think DIVs are much more useful because of their level).[/color][/font]

Jona[/b]

@CharlesMay 29.2003 — #[font=georgia]Here's my shot at keeping the borders.[/font]

[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<title>Example</title>

<style type="text/css">



</style>

<div style="width:627px">

<div>

<div style="width:150px">Row 1 - Column 1</div>

<div style="width:150px">Row 1 - Column 2</div>

<div style="width:150px">Row 1 - Column 3</div>

<div style="width:150px">Row 1 - Column 4</div>

</div>

<div>

<div style="width:306px">Row 1 - Column 1 & 2</div>

<div style="width:150px">Row 1 - Column 3</div>

<div style="width:150px">Row 1 - Column 4</div>

</div>

<div>

<div style="width:462px">Row 1 - Column 1 & 2 & 3</div>

<div style="width:150px">Row 1 - Column 4</div>

</div>

<div>

<div style="width:619px">Row 1 - Column 1 & 2 & 3 & 4</div>

</div>

</div>[/font]

@JonaMay 29.2003 — #[b][font=arial][color=maroon]Charles, did you test that code? It offsets a little to the left, which was my problem and why I didn't have exactly 300px in my SPAN tag--I had to add some to make it perfectly even. Also, the borders are a bit lengthened away from each other...[/color][/font]

Jona[/b]

@VladdyMay 29.2003 — #You can keep borders right in either W3C compliant browsers or damn IE, but not both... (that is why I did not even try ? )

@CharlesMay 29.2003 — #[font=georgia]Yes, it needs a little tweaking. I was doing it by eye instead of counting up the paddings, borders and margins. And my eyes aren't so good. I'm too cheap to buy glasses.[/font]

@JonaMay 29.2003 — #[i]Originally posted by Charles [/i]

[B][font=georgia]And my eyes aren't so good. I'm too cheap to buy glasses.[/font] [/B][/QUOTE]

[b][font=arial][color=maroon]My eyes aren't too good either, and I'm also too cheap to buy glasses. ?[/color][/font]

Jona[/b]

@khakiauthorMay 29.2003 — #oooohh ?

first things first:

Jona sweetie.... you really need to get your new hard-drive soon... cause you really need to load Netscape for testing purposes ?

(and I'm sorry that I lured you into my <span> trap. I'm blaming it on the "stupid-stick" ? )

Vladdy...

you bail me out so many times (where were you on my 21st birthday? :rolleyes: lol)

and I suppose that Charles is determined to "thin" my skull (as long as I actually [I]try[/I] to reference the W3 before I ask these questions ? )

But... may I ask questions?

(too bad... I'm asking anyway ? )

Why does only IE accept this:

[B]<span style="width:150px;">Row 1 - Column 1</span>[/B]

(Netscape and Opera ignored it)

I read some stuff about "Inline non-replaced elements" but it didn't really explain it very well

(in other words... I didn't understand it :rolleyes: ).

Is it because it is an "Inline non-replaced element"? (whatever that means)

(and does anyone want to explain that in simple terms?)

Also...

Charles... in your <style> you have:

a div

a div div

and a div div div

can you explain that for me please?

and as far as glasses...

I need em too! 8-( ... but I wear contact lenses mostly (cause "guys don't make passes at girls who wear glasses". lol. Although my glasses [I]do[/I] make me look kinda smart... which some people would say is a case of false advertising :rolleyes: lol).

well anyway (sorry about that) can I please get serious answers to those questions?

thanks guys! ?

? k

@nkaisareMay 29.2003 — #Note that the div will stretch only upto its content... it will not stretch till the bottom of the longest adjoining div.

@JonaMay 29.2003 — #[i]Originally posted by khaki[/i]

[b]I read some stuff about "Inline non-replaced elements" but it didn't really explain it very well

(in other words... I didn't understand it ).

Is it because it is an "Inline non-replaced element"? (whatever that means) :rolleyes:

(and does anyone want to explain that in simple terms?)[/b][/quote]

[b][font=arial][color=maroon]I think we're going to get back to the W3C, khaki.... (dot dot dot)

Inline positioning: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

Inline non-replaced elements: http://www.w3.org/TR/CSS2/visudet.html#q4

[/b][/font][/color]

[i]Originally posted by khaki[/i]

[b]Also...

Charles... in your <style> you have:

a div

a div div

and a div div div

can you explain that for me please?[/b][/quote]

[b][font=arial][color=maroon]I believe that is specifying a style for each div inside of a div. For example, all DIVs have the div { } style attached, but all DIVs that are inside of a DIV have the div div { } style attached, and so on.

Am I right, Charles? :p[/color][/font][/b]

[b]Jona[/b]

@khalidali63May 29.2003 — #Hello K,

Here is my take on this div/span layout.

I have put some comments on it as well.And I tested it on both IE6+ and NS6+

http://68.145.35.86/temp/khaki/AnotherTable2CSS.html

@nkaisareMay 29.2003 — #http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors

[b]div span[/b] span which is a descendent (child, grand-child etc) of a div.

[b]div>span[/b] span which is a child (not any other decendent) of a div.

@JonaMay 29.2003 — #[i]Something else I forgot to mention:[/i]

[i]Originally posted by khaki[/i]

[b]Jona sweetie.... you really need to get your new hard-drive soon... cause you really need to load Netscape for testing purposes ?

(and I'm sorry that I lured you into my <span> trap. I'm blaming it on the "stupid-stick" ) ?[/b][/quote]

[b][font=arial][color=maroon]I forgot all about Netscape! I tested it in IE and it worked for me. :p But I did download Netscape 6.2. I hope you're happy with that.. I'll remember to test it in Netscape next time... ?[/color][/font]

Jona[/b]

@khakiauthorMay 29.2003 — #FYI

my head just exploded

@JonaMay 29.2003 — #[b][font=arial][color=maroon]Is that all you have to say? ?

[/color][/font][/b]

@VladdyMay 29.2003 — #[i]Originally posted by khaki [/i]

[B]

Vladdy...(where were you on my 21st birthday? :rolleyes: lol) [/B][/QUOTE]

On June 26th 1997 I was..... lemme think about.... can't remember... ? ?

@khakiauthorMay 29.2003 — # Is that all you have to say? ? [/QUOTE] ummmm....

well I placed a call to All The King's Horses And All The King's Men...

so maybe a little later :rolleyes:

i'm still picking up the pieces

On June 26th 1997 I was..... lemme think about.... can't remember... ? ? [/QUOTE]well... my whereabouts on that day are a matter of public record :eek:

(the location of my underwear however... remains a mystery :eek: :eek: )

:rolleyes: k

@JonaMay 29.2003 — #[b][font=arial][color=maroon]OK, pick up the pieces and when you're done, give us a shout.[/color][/font][/b]

[i]Originally posted by khaki[/i]

[b](the location of my underwear however... remains a mystery :eek: :eek: ) [/b][/quote]

[b][font=arial][color=maroon]No comment. *Stern face*[/color][/font][/b]

@nkaisareMay 29.2003 — #[i]Originally posted by khaki [/i][/quote]
[B]and I'm sorry that I lured you into my <span> trap.[/b]

I hope the difference between span and div is now clarified :rolleyes: ?

[b]Why does only IE accept this:

<span style="width:150px;">Row 1 - Column 1</span>

(Netscape and Opera ignored it)[/b]

Because they are supposed to ignore it. Width cannot be applied to inline elements (such as span). http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width

NS will apply the rule if you use display: block. There is another property display: inline-block... not sure how well its supported (I guess pretty scratchy). Does this explain the "non-replaced inline-level elements" conundrum?

[b]div div div[/b]

Make sure that this comes after the "div div" style. This is because the innermost div is also a descendent of div... hence the "div div div" style will be overruled by the "div div" style. In other words:

div div div {...} style applies to any div that is a descendent of a div, which in turn is a decendent of a div.

div div {...} styles applies to any div that is a descendent of a div, no matter until what level of nesting. Hence a "div div [b]div[/b]" is also a "div [b]div[/b]" ? ? ?

@gizmoMay 29.2003 — #I have a related problem, i.e. that of getting the CSS equivalent of a table. The table is used to format text (which is why I want to eliminate it) into two columns, newspaper style, by having three columns, one of text, one empty and 2% width as a column spacer, and the third as the second column of text. The advantages are that it resizes with the browser window. The disadvantage is that some devices will read line1, col1 then line1, col2.

As I see it in CSS the column widths would be fixed, but maybe someone out there knows better.

@gizmoMay 29.2003 — #Doh! I've just found what I am looking for on the CSS forum. ?

@VladdyMay 29.2003 — #[i]Originally posted by khaki [/i]

[B](the location of my underwear however... remains a mystery :eek: :eek: )[/B][/QUOTE]
? ? What's your size? I found a pair in my back seat, last time I cleaned my car ....? ? ?

@nowonlineMay 29.2003 — #Khaki did you ever come up with a final file for the poetry thing we talked about? I found a website that has what I want to set up on my site but theirs is apparently not posting new poems right, looks like the link is messed up it's at

http://talesfromthevault.com/poetry/newpoem.html

If you want to you can attach the file to an email and send it to me.

thanks,

-Richard

@khakiauthorMay 29.2003 — #What's your size? I found a pair in my back seat, last time I cleaned my car...[/QUOTE]well... actually...

unless you had your car parked in the Gulf of Mexico... they probably aren't mine ?

(i feel another stern look from Jona coming up ? )

ummm...

back on topic now....

I'm still trying to digest everything...

but honestly....

this is all not as clear as you guys are expecting it to be for me (it's me, not you ? )

I'll give it all another look in the morning and see if it makes more sense then.

Right now...

it's off to happy hour to get ready for the Devils/Ducks!!!

(don't tell anybody... but...

I'm a Rangers fan who has been a closet Devils fan for the last few years :eek:

I'm not a bandwagoner though. It's just that my b/f has season tickets and I get to go to a lot of games... so... :rolleyes: )

off-topic again... sorry

catch you guys in the morning.

THANK YOU SO MUCH for the help (don't worry... it will eventually sink-in ? )

promising to keep my underwear on during the game ? ...

? k

[I]EDIT:

you guys [I]do[/I] realize that I'm just having fun... right?

It's just playing.

(I just wanna make sure... that's all)

[/I]

@JonaMay 29.2003 — #[b][font=arial][color=maroon]I don't know what to think, khaki. I think you're joking about the underwear thing, right?[/color][/font][/b]

@nkaisareMay 29.2003 — #You mean to say she was kiddin when she promised to keep them on during the game?? :rolleyes:

Clarifying the mumble jumble

1. width property is not applied to an inline element.

2. div div {...} sets the style for a div that is nested within (not necessarily immediately) a div.

<div id="one">

<div id="two">

<p><div id="three"></div></p>

</div>

</div>

The rules will be applied to "two" and "three" as both these divs are decendent of some div.

3. div div div {...} in above example will be applied to "three". This in spite of "three" not being an (immediate) child of a div.

4. Note that div div {...} rules will also be applied to "three". CSS rules will "cascade".

@khakiauthorMay 30.2003 — #hey Richard....

I'm going to answer you at the original thread for that.

then I'll be back to ask more questions over here :rolleyes:

(you guys are so cool ? )

? k

Also in #HTML _↴

Blank Pages in Admin? HTTP Error 500 (Internal Server Error)How to keep navigation bar drop down in front of everything else?page becomes bigger when i press button or press f12

Success!

Help @khaki spread the word by sharing this article on Twitter...

Tweet This

table/css conversion

28 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

table/css conversion

28 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

28 Comments(s) _↴

Also in #HTML _↴