Select Lists -vs- Tables

R

Richard Maher

Hi,

Sorry if this is one of those issues that people feel passionate about and I
assure you I'm not trolling but rather seeking guidance on which way to go
with the web browser presentation of tabular result sets.

I'm a newbie and don't know any better, but I immediately opted for Select
Lists 'cos A) someone showed me :) and b) 'cos I didn't think you could
select from a Table without a Button-cell on each row (but a recent post of
Stephane's showed me this is not so)

These are some of the reasons I think I should now go to tables: -
1) I have columns and am sick of having to use a non-proportional font to
line up.
2) I have column headings and don't like having to fudge option[0] as a
header when thead and tfoot entries now look like they can be static outside
the scroll area (true?)
3) You can "select" table rows (true?)
4) Inserting and removing <tr>s is no harder than <options> in a <select>
5) Have you seen what Microsoft has done with Tables lately? I don't know
how much is down to CSS or how much (<div TABNAM="name">) is IE specific but
it really looks good! Click down to expand tehh whole table or leave it how
it is and scroll through.

So any thoughts or advice on what direction drowsers are heading in with
regard to this issue?

Cheers Richard Maher
 
M

McKirahan

Richard Maher said:
Hi,

Sorry if this is one of those issues that people feel passionate about and I
assure you I'm not trolling but rather seeking guidance on which way to go
with the web browser presentation of tabular result sets.

I'm a newbie and don't know any better, but I immediately opted for Select
Lists 'cos A) someone showed me :) and b) 'cos I didn't think you could
select from a Table without a Button-cell on each row (but a recent post of
Stephane's showed me this is not so)

These are some of the reasons I think I should now go to tables: -
1) I have columns and am sick of having to use a non-proportional font to
line up.
Click to expand...

[anip]

Consider this:

<html>
<head>
<title>selectab.htm</title>
<script type="text/javascript">
var opts = "\n<option value='0'>Row 0^^^^^^^^^^Heading";
opts += "\n<option value='0'>----------------------";
for (var i=1; i<10; i++) {
opts += "\n<option value='" + i + "'>Row " + i + "^^^^^^^^^^Details";
}
opts = opts.replace(/\^/g," ");
function pick(that) {
var valu = that.options[that.selectedIndex].value;
if (valu > 0) alert(valu);
}
</script>
</head>
<body>
<form>
<select size="11" onclick="pick(this)"
style="font-family:Courier New">
<script type="text/javascript">
document.write(opts);
</script>
</select>
</form>
</body>
</html>
 
R

Richard Maher

Hi,

Consider this:
Click to expand...

OK, I've considered it. Is there something in there I'm meant to see apart
from you "having to use a non-proportional font to line up."?

Regards Richard Maher
Richard Maher said:
Hi,

Sorry if this is one of those issues that people feel passionate about
Click to expand...
and
I
assure you I'm not trolling but rather seeking guidance on which way to go
with the web browser presentation of tabular result sets.

I'm a newbie and don't know any better, but I immediately opted for Select
Lists 'cos A) someone showed me :) and b) 'cos I didn't think you could
select from a Table without a Button-cell on each row (but a recent post of
Stephane's showed me this is not so)

These are some of the reasons I think I should now go to tables: -
1) I have columns and am sick of having to use a non-proportional font to
line up.
Click to expand...

[anip]

Consider this:

<html>
<head>
<title>selectab.htm</title>
<script type="text/javascript">
var opts = "\n<option value='0'>Row 0^^^^^^^^^^Heading";
opts += "\n<option value='0'>----------------------";
for (var i=1; i<10; i++) {
opts += "\n<option value='" + i + "'>Row " + i + "^^^^^^^^^^Details";
}
opts = opts.replace(/\^/g," ");
function pick(that) {
var valu = that.options[that.selectedIndex].value;
if (valu > 0) alert(valu);
}
</script>
</head>
<body>
<form>
<select size="11" onclick="pick(this)"
style="font-family:Courier New">
<script type="text/javascript">
document.write(opts);
</script>
</select>
</form>
</body>
</html>
Click to expand...
 
T

TheBagbournes

Richard said:
Hi,

Sorry if this is one of those issues that people feel passionate about and I
assure you I'm not trolling but rather seeking guidance on which way to go
with the web browser presentation of tabular result sets.

I'm a newbie and don't know any better, but I immediately opted for Select
Lists 'cos A) someone showed me :) and b) 'cos I didn't think you could
select from a Table without a Button-cell on each row (but a recent post of
Stephane's showed me this is not so)

These are some of the reasons I think I should now go to tables: -
1) I have columns and am sick of having to use a non-proportional font to
line up.
2) I have column headings and don't like having to fudge option[0] as a
header when thead and tfoot entries now look like they can be static outside
the scroll area (true?)
3) You can "select" table rows (true?)
4) Inserting and removing <tr>s is no harder than <options> in a <select>
5) Have you seen what Microsoft has done with Tables lately? I don't know
how much is down to CSS or how much (<div TABNAM="name">) is IE specific but
it really looks good! Click down to expand tehh whole table or leave it how
it is and scroll through.

So any thoughts or advice on what direction drowsers are heading in with
regard to this issue?
Click to expand...

You might want to consider the full-on AJAX/RIA option like:

http://www.yui-ext.com/deploy/ext-1.0-alpha3/examples/form/forum-search.html

The drop down which appears when you type (try entering "grid") is a fully configurable Grid with moveable, resizable columns. Lots of other example under the /examples directory there...

Download the library at http://www.yui-ext.com/deploy/ext-1.0-alpha3.zip

Help forum at http://www.yui-ext.com/forum/index.php

Have fun,

Animal
 
A

ASM

McKirahan a écrit :
Consider this:
Click to expand...

or this :

<html>
<script type="text/javascript">
function myOptions() {
var S = document.forms[0][0], opts;
for(var i=1; i<10; i++) {
opts = new Option('Row '+i+' -----Details',i);
S.options[S.length] = opts;
}
}
function pick(that) {
var k = that.selectedIndex;
if (k > 0)
alert(that.options[k].text +
' value = ' + that.options[k].value);
}
</script>
<form>
<select size="11" onclick="pick(this)"
style="font-family:Courier New">
<option>Row 0 --------Heading</option>
</select>
</form>
<script type="text/javascript">
myOptions();
</script>
</html>
 
R

Richard Maher

Hi Stephane,

I'm not sure what you and Macca have given me apart from two very good
examples of one of the things I find undesirable in a select list. I must be
missing something but I just don't know what it is. "Without table columns
we need to use a non-proportional font in our select lists to get things to
line up correctly" Is that what you were showing me? The reverse? Something
new?

Regards Richard Maher

ASM said:
McKirahan a écrit :
Consider this:
Click to expand...

or this :

<html>
<script type="text/javascript">
function myOptions() {
var S = document.forms[0][0], opts;
for(var i=1; i<10; i++) {
opts = new Option('Row '+i+' -----Details',i);
S.options[S.length] = opts;
}
}
function pick(that) {
var k = that.selectedIndex;
if (k > 0)
alert(that.options[k].text +
' value = ' + that.options[k].value);
}
</script>
<form>
<select size="11" onclick="pick(this)"
style="font-family:Courier New">
<option>Row 0 --------Heading</option>
</select>
</form>
<script type="text/javascript">
myOptions();
</script>
</html>
Click to expand...
 
R

Richard Maher

Hi Animal,
You might want to consider the full-on AJAX/RIA option like:
Click to expand...

I'm not real keen on http as a middleware protocol and much prefer something
context-rich, stateful, conversational, and with a bit more power, but I did
like the quality of your output (If not the performance :) So if there is a
"Third-Way" in the argument between Tables and Select-Lists then I'm all for
hearing about it!

I tried viewing the source and also tried looking up some of the responses
to "grid" but I'm sorry to report that I'm still none the wiser. You
couldn't just post ~100-200 line example with inline styles that knocks up
one of these grids couldya? <DIV> seems to be extremely powerful and the
driving force behind a lot of this stuff; is that right? I did see a great
example from someone here where the horizontal and vertical headers would
follow there columns when scrolling on way but stay fixed the other. This
was amazing functionality! But when I looked at the source it was
copyrighted and many hundreds of lines long :-(

I guess what I'm realling looking for is "Where are the browser vendors
putting their investment dollars when it comes to tables/select lists?" With
Internet Explorer is certainly looks like Tables to me.

Regards Richard Maher

PS. No idea what RIA is sorry.

TheBagbournes said:
Richard said:
Hi,

Sorry if this is one of those issues that people feel passionate about and I
assure you I'm not trolling but rather seeking guidance on which way to go
with the web browser presentation of tabular result sets.

I'm a newbie and don't know any better, but I immediately opted for Select
Lists 'cos A) someone showed me :) and b) 'cos I didn't think you could
select from a Table without a Button-cell on each row (but a recent post of
Stephane's showed me this is not so)

These are some of the reasons I think I should now go to tables: -
1) I have columns and am sick of having to use a non-proportional font to
line up.
2) I have column headings and don't like having to fudge option[0] as a
header when thead and tfoot entries now look like they can be static outside
the scroll area (true?)
3) You can "select" table rows (true?)
4) Inserting and removing <tr>s is no harder than <options> in a
Click to expand...
5) Have you seen what Microsoft has done with Tables lately? I don't know
how much is down to CSS or how much (<div TABNAM="name">) is IE specific but
it really looks good! Click down to expand tehh whole table or leave it how
it is and scroll through.

So any thoughts or advice on what direction drowsers are heading in with
regard to this issue?
Click to expand...

You might want to consider the full-on AJAX/RIA option like:

http://www.yui-ext.com/deploy/ext-1.0-alpha3/examples/form/forum-search.html

The drop down which appears when you type (try entering "grid") is a fully
Click to expand...
configurable Grid with moveable, resizable columns. Lots of other example
under the /examples directory there...
 
G

Guy Peled

Hi Animal,
You might want to consider the full-onAJAX/RIAoption like:
Click to expand...

I'm not real keen on http as a middleware protocol and much prefer something
context-rich, stateful, conversational, and with a bit more power, but I did
like the quality of your output (If not the performance :) So if there is a
"Third-Way" in the argument between Tables and Select-Lists then I'm all for
hearing about it!

I tried viewing the source and also tried looking up some of the responses
to "grid" but I'm sorry to report that I'm still none the wiser. You
couldn't just post ~100-200 line example with inline styles that knocks up
one of these grids couldya? <DIV> seems to be extremely powerful and the
driving force behind a lot of this stuff; is that right? I did see a great
example from someone here where the horizontal and vertical headers would
follow there columns when scrolling on way but stay fixed the other. This
was amazing functionality! But when I looked at the source it was
copyrighted and many hundreds of lines long :-(

I guess what I'm realling looking for is "Where are the browser vendors
putting their investment dollars when it comes to tables/select lists?" With
Internet Explorer is certainly looks like Tables to me.

Regards Richard Maher

PS. No idea whatRIAis sorry.




Richard said:
Hi,
Sorry if this is one of those issues that people feel passionate about and I
assure you I'm not trolling but rather seeking guidance on which way to go
with the web browser presentation of tabular result sets.
I'm a newbie and don't know any better, but I immediately opted for Select
Lists 'cos A) someone showed me :) and b) 'cos I didn't think you could
select from a Table without a Button-cell on each row (but a recent post of
Stephane's showed me this is not so)
These are some of the reasons I think I should now go to tables: -
1) I have columns and am sick of having to use a non-proportional font to
line up.
2) I have column headings and don't like having to fudge option[0] as a
header when thead and tfoot entries now look like they can be static outside
the scroll area (true?)
3) You can "select" table rows (true?)
4) Inserting and removing <tr>s is no harder than <options> in a
Click to expand...
5) Have you seen what Microsoft has done with Tables lately? I don't know
how much is down to CSS or how much (<div TABNAM="name">) is IE specific but
it really looks good! Click down to expand tehh whole table or leave it how
it is and scroll through.
So any thoughts or advice on what direction drowsers are heading in with
regard to this issue?
Click to expand...
Click to expand...
You might want to consider the full-onAJAX/RIAoption like:
http://www.yui-ext.com/deploy/ext-1.0-alpha3/examples/form/forum-sear...

The drop down which appears when you type (try entering "grid") is a fully
Click to expand...

configurable Grid with moveable, resizable columns. Lots of other example
under the /examples directory there...




Download the library athttp://www.yui-ext.com/deploy/ext-1.0-alpha3.zip
Click to expand...
Help forum athttp://www.yui-ext.com/forum/index.php
Click to expand...
Have fun,
Click to expand...
Animal- Hide quoted text -
Click to expand...

- Show quoted text -- Hide quoted text -

- Show quoted text -
Click to expand...

Hi,

Try Visual WebGui for a way to have a applicative web presence with
out going through hell (JavaScript long long files)...
This solution is basically extending ASP.NET with WinForms like
programming including design time which provides a very rapid
environment for developing web applications.

You can also use it to enhance an existing ASP.NET site with out
rewriting all the application... and it is open source available under
the GPL license.

Some quick start video tutorials:
http://www.visualwebgui.com/Default.aspx?tabid=297

The homepage of the project:
http://www.visualwebgui.com

Guy Peled
Founder & Chief Architect
Gizmox - Visual WebGui
 
A

ASM

Richard Maher a écrit :
Hi Stephane,

I'm not sure what you and Macca have given me apart from two very good
examples of one of the things I find undesirable in a select list. I must be
missing something but I just don't know what it is. "Without table columns
we need to use a non-proportional font in our select lists to get things to
line up correctly" Is that what you were showing me? The reverse? Something
new?
Click to expand...

I did try to swhow you that you can very easily
- empty a select
- grow a select
- insert somewhere a new option in a select
because you seemed to say it was easier to do so with table(s) than with
select(s)

If your question is about presentation of options text ...
You can fix that via css (at least with FireFox or Opera)
as you would do with a table

select,
select option { color: maroon; font-size: 1.2em; text-align: center;
font-family: times, times new roman, university, serif;
width: 10em; height: 1.2em; background: #ffc; }

Now, you probably can do your increasing menu using "normal" lists
(ul li a) that will accelerate IE displays comparatively to tables
 
T

TheBagbournes

Richard said:
Hi Animal,


I'm not real keen on http as a middleware protocol and much prefer something
context-rich, stateful, conversational, and with a bit more power, but I did
like the quality of your output (If not the performance :) So if there is a
"Third-Way" in the argument between Tables and Select-Lists then I'm all for
hearing about it!

I tried viewing the source and also tried looking up some of the responses
to "grid" but I'm sorry to report that I'm still none the wiser. You
couldn't just post ~100-200 line example with inline styles that knocks up
one of these grids couldya? <DIV> seems to be extremely powerful and the
driving force behind a lot of this stuff; is that right? I did see a great
example from someone here where the horizontal and vertical headers would
follow there columns when scrolling on way but stay fixed the other. This
was amazing functionality! But when I looked at the source it was
copyrighted and many hundreds of lines long :-(

I guess what I'm realling looking for is "Where are the browser vendors
putting their investment dollars when it comes to tables/select lists?" With
Internet Explorer is certainly looks like Tables to me.

Regards Richard Maher

PS. No idea what RIA is sorry.
Click to expand...

"Rich Internet Application."

The actual *example* code is quite small, 48 lines - follow the link to forum-search.js

And you won't be able to make head or tail of the actual library source (ext-all.js - the compressed version). It's a complex library. You'd have to study it in detail and step through the uncompressed source code. It's open source, so you are free to do so.

The point is that the API is documented, logical and reasonably simple for an experienced software developer to use, you don't actually *need* to understand the guts of it.

And as for using HTTP.... You are isolated in a browser - it's what you have!

Animal
 
R

Richard Maher

Hi Animal,
The point is that the API is documented, logical and reasonably simple for
Click to expand...
an experienced software developer to use, you don't actually *need* to
understand the guts of it.

OK, that's the bit I missed; I'll have to go back and look again. As I said
before, I was very impressed with the quality of the UI.
And as for using HTTP.... You are isolated in a browser - it's what you
Click to expand...
have!

Oh, how wrong you are! (Or should I say, HTTP's not the only tool in the box
and it's certainly not the sharpest :) Once http has pimped your hosting
page and applet for you, you are free to deploy any form of light-weight,
high-performance, application-sepecific protocol over a secure TCP/IP
connection. Context-rich, connection-oriented, authenticated,
high-performance, it's just all gravy here!

Cheers Richard Maher

PS. You don't even need HTTP for the applet upload, but I have to admit that
it beats FTP at least :)

TheBagbournes said:
"Rich Internet Application."

The actual *example* code is quite small, 48 lines - follow the link to forum-search.js

And you won't be able to make head or tail of the actual library source
Click to expand...
(ext-all.js - the compressed version). It's a complex library. You'd have to
study it in detail and step through the uncompressed source code. It's open
source, so you are free to do so.
The point is that the API is documented, logical and reasonably simple for
Click to expand...
an experienced software developer to use, you don't actually *need* to
understand the guts of it.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

<option onmousover> and auto-scrolling <select> lists 0
Using nested lists and tables 8
Dynamic select lists using optgroups again - without frameworks 19
Form - Tables, Lists or Divs? 10
Firefox and select lists 3
master select list changes contents of slave select lists 0
dynamically populate select option list via javascript array with sql data 4
Firefox Select-list & dreaded "XX" in drop down 3

Members online

No members online now.
Total: 45 (members: 0, guests: 45)
Robots: 293

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,813
Latest member
lawrwtwinkle111

Latest Threads

Top