![](/i/fill.gif) |
![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
On 12/09/2010 01:21 PM, Orchid XP v8 wrote:
> 2. I want to build a file tree where you can collapse or expand tree
> nodes. The obvious way to do this is with the <ul> element. However, I
> also want each file to have attributes, a creation date, and so forth,
> and all these columns should line up vertically. The obvious way to do
> that is with a table. But it can't be a table and a list at the same time!
>
> I could use nested tables I suppose, but nested tables are EVIL! Is
> there some more semantically-transparent way that I can do this?
>
> Root 2009-09-12 Ahsc
> Resources 2009-09-10 Ahsc
> Main.css 2009-09-10 Ahsc
> Main.js 2009-09-10 Ahsc
> Packages 2009-09-12 Ahsc
> ansi-terminal 2009-09-12 Ahsc
> ...
Facepalm moment: Using CSS, you can render any element AS A TABLE! >_<
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
And lo On Tue, 21 Sep 2010 21:59:13 +0100, Orchid XP v8 <voi### [at] dev null>
did spake thusly:
> On 12/09/2010 01:21 PM, Orchid XP v8 wrote:
>
>> 2. I want to build a file tree where you can collapse or expand tree
>> nodes. The obvious way to do this is with the <ul> element. However, I
>> also want each file to have attributes, a creation date, and so forth,
>> and all these columns should line up vertically. The obvious way to do
>> that is with a table. But it can't be a table and a list at the same
>> time!
>>
>> I could use nested tables I suppose, but nested tables are EVIL! Is
>> there some more semantically-transparent way that I can do this?
>>
>> Root 2009-09-12 Ahsc
>> Resources 2009-09-10 Ahsc
>> Main.css 2009-09-10 Ahsc
>> Main.js 2009-09-10 Ahsc
>> Packages 2009-09-12 Ahsc
>> ansi-terminal 2009-09-12 Ahsc
>> ...
>
> Facepalm moment: Using CSS, you can render any element AS A TABLE! >_<
Well yeah that was going to be my first response, but you wanted the
columns offset within rows and that would have ended up just as messy as
absolute positioning.
--
Phil Cook
--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>> Facepalm moment: Using CSS, you can render any element AS A TABLE! >_<
>
> Well yeah that was going to be my first response, but you wanted the
> columns offset within rows and that would have ended up just as messy as
> absolute positioning.
Well, I can make it so that a <ul> who's <li> elements contain multiple
<span> tags gets rendered as a regular table. What I *cannot* do is make
nested <ul> elements render correctly. Not for love nor money.
I can, however, take a <table> and annotate each <tr> with a style class
indicating how far to indent it, and get a result that looks exactly
like what I want.
So I have a choice here: The information I want to present is
semantically tabular *and* hierarchical. I can mark it up as <ul> (which
lets be expose the hierarchy but hides the tabular nature in <span>
tags), or I can mark it up as <table> (which exposes the tabular
structure but hides the hierarchy in style class declarations).
I think I'm going to go with <table>, simply because it lets me actually
achieve the rendering result I want. Sure, tables are evil. OTOH, my
data actually *is* a table! So putting it in <table> isn't that much of
a hack.
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
And lo On Wed, 22 Sep 2010 10:35:08 +0100, Invisible <voi### [at] dev null> did
spake thusly:
> I think I'm going to go with <table>, simply because it lets me actually
> achieve the rendering result I want. Sure, tables are evil. OTOH, my
> data actually *is* a table! So putting it in <table> isn't that much of
> a hack.
Well yeah if it's tabular data present it in a table nothing evil about
that well unless you're going to use nested tables just for display
purposes that's frowned upon; and if you're not then you're going to have
to style every single cell and that's just messy.
--
Phil Cook
--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
On 22/09/2010 10:50 AM, Phil Cook v2 wrote:
> And lo On Wed, 22 Sep 2010 10:35:08 +0100, Invisible <voi### [at] dev null> did
> spake thusly:
>
>> I think I'm going to go with <table>, simply because it lets me
>> actually achieve the rendering result I want. Sure, tables are evil.
>> OTOH, my data actually *is* a table! So putting it in <table> isn't
>> that much of a hack.
>
> Well yeah if it's tabular data present it in a table nothing evil about
> that well unless you're going to use nested tables just for display
> purposes that's frowned upon; and if you're not then you're going to
> have to style every single cell and that's just messy.
Nested tables won't even help me here. And no, I don't need to style
every single cell. I just style each row (so I can get alternating
colours) and each cell in column 1 (so I can set the indent). And since
the whole table will be machine-generated anyway...
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
On 22/09/2010 10:52 AM, Invisible wrote:
> Nested tables won't even help me here. And no, I don't need to style
> every single cell. I just style each row (so I can get alternating
> colours) and each cell in column 1 (so I can set the indent). And since
> the whole table will be machine-generated anyway...
Only remaining problem is how to expand/collapse subtrees (now that a
subtree isn't a single XML element any more). I'm sure it's solvable.
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
And lo On Wed, 22 Sep 2010 10:52:30 +0100, Invisible <voi### [at] dev null> did
spake thusly:
> On 22/09/2010 10:50 AM, Phil Cook v2 wrote:
>> And lo On Wed, 22 Sep 2010 10:35:08 +0100, Invisible <voi### [at] dev null> did
>> spake thusly:
>>
>>> I think I'm going to go with <table>, simply because it lets me
>>> actually achieve the rendering result I want. Sure, tables are evil.
>>> OTOH, my data actually *is* a table! So putting it in <table> isn't
>>> that much of a hack.
>>
>> Well yeah if it's tabular data present it in a table nothing evil about
>> that well unless you're going to use nested tables just for display
>> purposes that's frowned upon; and if you're not then you're going to
>> have to style every single cell and that's just messy.
>
> Nested tables won't even help me here. And no, I don't need to style
> every single cell. I just style each row (so I can get alternating
> colours) and each cell in column 1 (so I can set the indent). And since
> the whole table will be machine-generated anyway...
tr:nth-child(odd){background-color:red;}
tr:nth-child(even){background-color:blue;}
Seeing as you don't care about IE :-)
As for column 1 styling how will that line up the dates? You'll need to
line up column 1 of rows 2 and 5, and then column 1 of rows 3, 4, and 6
and then do the same for column 2.
--
Phil Cook
--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>> Nested tables won't even help me here. And no, I don't need to style
>> every single cell. I just style each row (so I can get alternating
>> colours) and each cell in column 1 (so I can set the indent). And
>> since the whole table will be machine-generated anyway...
>
> tr:nth-child(odd){background-color:red;}
> tr:nth-child(even){background-color:blue;}
>
> Seeing as you don't care about IE :-)
That works? Impressive... (As you say, it's only taken 10 years!)
> As for column 1 styling how will that line up the dates? You'll need to
> line up column 1 of rows 2 and 5, and then column 1 of rows 3, 4, and 6
> and then do the same for column 2.
Just adjust the padding property for column one. The other columns
automatically line up, the way they always do in a table.
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
And lo On Wed, 22 Sep 2010 11:34:03 +0100, Invisible <voi### [at] dev null> did
spake thusly:
>> As for column 1 styling how will that line up the dates? You'll need to
>> line up column 1 of rows 2 and 5, and then column 1 of rows 3, 4, and 6
>> and then do the same for column 2.
>
> Just adjust the padding property for column one. The other columns
> automatically line up, the way they always do in a table.
Well would you look at that. You learn something new every day.
--
Phil Cook
--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
On 22/09/2010 02:05 PM, Phil Cook v2 wrote:
> And lo On Wed, 22 Sep 2010 11:34:03 +0100, Invisible <voi### [at] dev null> did
> spake thusly:
>
>>> As for column 1 styling how will that line up the dates? You'll need to
>>> line up column 1 of rows 2 and 5, and then column 1 of rows 3, 4, and 6
>>> and then do the same for column 2.
>>
>> Just adjust the padding property for column one. The other columns
>> automatically line up, the way they always do in a table.
>
> Well would you look at that. You learn something new every day.
See, that's what's so awesome about this newsgroup. ;-)
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |