To table or not to table?

J

Jim S

Well done. I trust you find it simpler code.


OK Jim, I will take a look at these more complicated pages and
see if I can think of a way of proceeding that makes sense and
does not blind with science.

Remember it's an work in progress and usually adding an 'event' entails
using one of the pages as a template.
 
B

BootNic

Um, having scroll bars is irrelevant to being able to actually scroll
using just the keyboard. Did you even try?

I have, have no issues with it at all, I can even get it to scroll with
the keyboard in an old broken mozilla.

So just for my sake, what UA would you be using that your not able to
use the keyboard to scroll with?
 
D

dorayme

Bergamot said:
Um, having scroll bars is irrelevant to being able to actually scroll
using just the keyboard. Did you even try?


Yes, I use the arrow keys on my board, it is very convenient and
yes, it worked in FF for me when I added what I wrote about in
previous post. To be fair, I should add that I did this in FF
with the developer facilities, so I could easily add the text.
Perhaps this affects general conclusions. It was just an
observation, I thought I would throw it in the ring.

(You had to put in the word "even" didn't you? I am trying to be
pretty civil to you these days. Help out! You know I am as
delicate as you are blunt and caustic. I will get back in my box
now. I have a giant robot made in your image - took me ages to
engineer it - it is programmed to nail the box shut after I get
in. But I have a secret trap door. I am only a half fool.)
 
B

Bergamot

BootNic said:
I have, have no issues with it at all, I can even get it to scroll with
the keyboard in an old broken mozilla.

My mozilla is neither old nor broken, but does not scroll. Your page
behaves the same as a scrolling div, which it, in essence, is. Scrolling
divs are a bane to keyboard accessibility. :(
 
D

dorayme

Jim S said:
Remember it's an work in progress and usually adding an 'event' entails
using one of the pages as a template.

I will suggest what I might do without doing what I find too
unacceptable. Perhaps you are not aware that on a monitor with
res of 1600 x 1200 (like my 20"), your

<http://www.jimscot.pwp.blueyonder.co.uk/Local_History/LH_8_graffi
ti.html>

can easily look like:

<http://netweaver.com.au/jim/pics/jimsProtoPage.jpg>

So, I would be wanting to guard against this (and other things).


(I need a little time on this, when I get moments to spare...)
 
B

BootNic

My mozilla is neither old nor broken, but does not scroll. Your page
behaves the same as a scrolling div, which it, in essence, is.
Scrolling divs are a bane to keyboard accessibility. :(

In my 100% table example it's the body that scrolls in most browsers,
same difference I suppose.

For Firefox and Seamonkey all one has to do is tab about until the body
has focus. Once the body has focus you can scroll all you like with the
keyboard.

Although I really think this issue is about the scrolling, at least in my
example, is not an accessibility issue, but rather a UA issue that has
very limited keyboard shortcuts and perhaps a lack of knowledge or
willingness to use of them.
 
D

dorayme

I would tend to do something like this.

<http://netweaver.com.au/jim/jimsPage.html>

Most of this is straight forward. I am sure it could be improved
upon. If you really want those buttons left and right, at the
base as with the example I made for you at

http://netweaver.com.au/jim/guestFootJim2.html

then just use the same code for the buttons but now allow (an
immediate slight loss in accessibility) about 2em margin left and
right on the wrapper. This should let the absolutely positioned
buttons then be 'sort of' more useful. theoretically if someone
has little height on the browser window.

I have just copy pasted your button code in from your site.

I feel this sort of thing is better across the browsers and
screen sizes than the heavy table layout of yours. Just look at
the difference in the size and complexity of the html/css between
the two.

Yes, I did cheat a little to make it look neater with the pics,
but it would be what I would normally do in an image editor
reasonably quickly to suit the page. You might spot the fiddle...
<g>
 
J

Jim S

I will suggest what I might do without doing what I find too
unacceptable. Perhaps you are not aware that on a monitor with
res of 1600 x 1200 (like my 20"), your

<http://www.jimscot.pwp.blueyonder.co.uk/Local_History/LH_8_graffi
ti.html>

can easily look like:

<http://netweaver.com.au/jim/pics/jimsProtoPage.jpg>

So, I would be wanting to guard against this (and other things).


(I need a little time on this, when I get moments to spare...)

I have some px width statements that I may have to change to %s
 
J

John Hosking

BootNic said:
In my 100% table example it's the body that scrolls in most browsers,
same difference I suppose.

For Firefox and Seamonkey all one has to do is tab about until the body
has focus. Once the body has focus you can scroll all you like with the
keyboard.

Oh, well, that does work. <sarcasm>And it's so intuitive.</sarcasm> Too
bad I can't click on the body to give it focus. I'd actually thought to
try *that*. Unfortunately, you've quite rudely gone and placed content
on top of the body. ;-)
Although I really think this issue is about the scrolling, at least in my
example, is not an accessibility issue, but rather a UA issue that has
very limited keyboard shortcuts and perhaps a lack of knowledge or
willingness to use of them.

I'm worried that the word "accessibility" has come to be a code word to
mean "bending over backwards for those few, poor gimps." Isn't
accessibility really the question of whether *anybody* can access some
resource?

Making navigation JS-dependent makes a site inaccessible to those
without JavaScript (turned on). A page for Canadian citizens on how to
get a passport is not accessible to (pure) francophones if it's only in
English and has no link to French content.

IMDb.com uses a JS don't-copy-our-content-by-right-clicking mechanism,
so when I see an uncaptioned picture and try to see the alt text,
nothing happens. I can use the Web Developer toolbar, though, to turn on
"Display Alt Attributes", or I can turn JS off, or I can scan the
source, so I *can* get to the info, but it's basically an accessibilty
issue as soon as it becomes more difficult than necessary to get to it.

I think my argument is leading to the conclusion that your page lacks
accessibility (a cumbersome phrase, to be sure, but "is inaccessible" is
also misleading, and "has accessibility issues" is even longer). Yes,
the scrollbars are there when appropriate, and they work for me without
any problem. But my finger's right next to the _scrollwheel_, and my
cursor is way over _here_, while your scrollbars are way over _there_.

IYSWIM.
 
B

BootNic

BootNic said:
[snip]
For Firefox and Seamonkey all one has to do is tab about until the
body has focus. Once the body has focus you can scroll all you like
with the keyboard.

Oh, well, that does work. <sarcasm>And it's so intuitive.</sarcasm>
Too bad I can't click on the body to give it focus. I'd actually
thought to try *that*. Unfortunately, you've quite rudely gone and
placed content on top of the body. ;-)

It sounds to me as though you are using an older version of a mozilla
browser, in which case it will never work well. The only reason it would
work is because you tabbed to the link in the table, which would allow you
to scroll with the mouse or keyboard as long as the link has focus. If this
would be the case, it's a UA issue, and the only thing that would help is
to change to a UA that is not as borken as the one being used.

If the UA that you are using in not intuitive, complain to the authors
perhaps it may get corrected.
I'm worried that the word "accessibility" has come to be a code word
to mean "bending over backwards for those few, poor gimps." Isn't
accessibility really the question of whether *anybody* can access some
resource?

Making navigation JS-dependent makes a site inaccessible to those
without JavaScript (turned on). A page for Canadian citizens on how to
get a passport is not accessible to (pure) francophones if it's only
in English and has no link to French content.

IMDb.com uses a JS don't-copy-our-content-by-right-clicking mechanism,
so when I see an uncaptioned picture and try to see the alt text,
nothing happens. I can use the Web Developer toolbar, though, to turn
on "Display Alt Attributes", or I can turn JS off, or I can scan the
source, so I *can* get to the info, but it's basically an accessibilty
issue as soon as it becomes more difficult than necessary to get to
it.

My example does not have any JS in it at all, although it did have a
navigation footer, but I removed that in an earler post.

My example is in English without a link to any French content. Now that I
think about it, none of my examples really have any content in them, there
just examples.
I think my argument is leading to the conclusion that your page lacks
accessibility (a cumbersome phrase, to be sure, but "is inaccessible"
is also misleading, and "has accessibility issues" is even longer).
Yes, the scrollbars are there when appropriate, and they work for me
without any problem. But my finger's right next to the _scrollwheel_,
and my cursor is way over _here_, while your scrollbars are way over
_there_.

There is no argument, there may be an issue, but no argument. Until you
share what UA and version you are viewing the page with, I don't think
there is even an issue. If you are unable or unwilling to choose or update
a UA, then that is a problem, but not a problem with my example.
 
J

Jim S

Just one more little thing I forgot to add to last post. I would
be tending to use display: block on the images but I have
captioned with a simple method that is easier to immediately
understand. Anyway, maybe this sort of thing could get you going?

I have tried your suggestion, but 'correct' tho' it may be, I find it
tiresome when updating pages, which I constantly do.
I use Expression Web (I can hear the sighs already) because it works for
me. For me, one of the faults with your layout is that I cannot 'see' it in
EW as it will look, without constantly flipping between a browser and back.

The fact that have asked for help in constructing my site to Strict
standards is mainly because I have the time, but partly because I was
goaded into it and partly because of the constant criticism that tables are
not meant to be used as placeholders for graphics.
Well that may be so, but it works for me and it validates (usually).
It is a simple site, but mine own.

If I make mistakes and the site looks wrong in your enormous display, it is
my fault for bad markup, not the fault of using tables. I recommend the
resolution on the homepage and try to keep the pictures and setup so there
are no problems when viewing in 800 x 600 (unlike the one you suggested).
Thanks for now.
 
J

Jonathan N. Little

Jim said:
I have tried your suggestion, but 'correct' tho' it may be, I find it
tiresome when updating pages, which I constantly do.
I use Expression Web (I can hear the sighs already) because it works for
me. For me, one of the faults with your layout is that I cannot 'see' it in
EW as it will look, without constantly flipping between a browser and back.

Jim this may see a bit harsh but you do know that PCs can multitask now,
right? If you have the screen real estate, put your editor window beside
your browser window, cascade if you wish. Simply ALT TAB or click
taskbar buttons to toggle windows... The advantages are your can test
more than one browser. Yep, fire up Firefox and MS(Windows)IE and maybe
Opera at once and you can cycle among them rather than depend on MS's
take on how the web "should" work...not a good strategy IMHO
The fact that have asked for help in constructing my site to Strict
standards is mainly because I have the time, but partly because I was
goaded into it and partly because of the constant criticism that tables are
not meant to be used as placeholders for graphics.
Well that may be so, but it works for me and it validates (usually).
It is a simple site, but mine own.

Actually, going tablesless can be much simpler if you free yourself from
the grid. As you learn more about CSS you can streamline your
presentation and can make changes in presentations or add content
without having to redo the page...
If I make mistakes and the site looks wrong in your enormous display, it is
my fault for bad markup, not the fault of using tables. I recommend the
resolution on the homepage and try to keep the pictures and setup so there
are no problems when viewing in 800 x 600 (unlike the one you suggested).
Thanks for now.

See that's the evidence on your mindset problem. You are thinking 800 x
600... what if my display area is only 500px wide either by the
limitations of my display device or browser window I have alloted
because I have more than one window up on my desktop? Hang your page on
an 800 x 600 grid and I will have to scroll back and forth *and* up and
down within my view port. dorayme's design adjusts and all I have to do
is scroll down...with my scroll wheel at the ready!
 
J

Jim S

Jim this may see a bit harsh but you do know that PCs can multitask now,
right? If you have the screen real estate, put your editor window beside
your browser window, cascade if you wish. Simply ALT TAB or click
taskbar buttons to toggle windows... The advantages are your can test
more than one browser. Yep, fire up Firefox and MS(Windows)IE and maybe
Opera at once and you can cycle among them rather than depend on MS's
take on how the web "should" work...not a good strategy IMHO


Actually, going tablesless can be much simpler if you free yourself from
the grid. As you learn more about CSS you can streamline your
presentation and can make changes in presentations or add content
without having to redo the page...

See that's the evidence on your mindset problem. You are thinking 800 x
600... what if my display area is only 500px wide either by the
limitations of my display device or browser window I have alloted
because I have more than one window up on my desktop? Hang your page on
an 800 x 600 grid and I will have to scroll back and forth *and* up and
down within my view port. dorayme's design adjusts and all I have to do
is scroll down...with my scroll wheel at the ready!

I guess I just cannot cope with it.
Thanks for your efforts.
 
D

dorayme

Jim S said:
I have tried your suggestion, but 'correct' tho' it may be, I find it
tiresome when updating pages, which I constantly do.
I use Expression Web (I can hear the sighs already) because it works for
me. For me, one of the faults with your layout is that I cannot 'see' it in
EW as it will look, without constantly flipping between a browser and back.

The fact that have asked for help in constructing my site to Strict
standards is mainly because I have the time, but partly because I was
goaded into it and partly because of the constant criticism that tables are
not meant to be used as placeholders for graphics.
Well that may be so, but it works for me and it validates (usually).
It is a simple site, but mine own.

If I make mistakes and the site looks wrong in your enormous display, it is
my fault for bad markup, not the fault of using tables. I recommend the
resolution on the homepage and try to keep the pictures and setup so there
are no problems when viewing in 800 x 600 (unlike the one you suggested).
Thanks for now.

No problem Jim. Just thought it might give you some ideas, the
coding being so much simpler than your table layout. I am sure
you can mark up your table layout simpler and better (as you are
allowing is possible).

About table layouts, up to a considerable point there is no
reason that you cannot make a fluid design with tables in the
sense that the page displays in a pleasant manner on most
screens. (Mobile brigade: relax!). They can be seen all over the
show.

But fluid does not mean that all the cells of a page must expand
to fill any size monitor. It may (sort of) mean that it should be
able to be seen in 800 x 600. But there is no point at all in
designing so that all the elements of a page make like marks on
the outside of a balloon or like stars in an expanding universe,
getting further and further away from each other.

There are a few devices to stop this sort of needless expansion
happening that I can mention immediately. First, do use the
excellent facility of such as

#wrapper {max-width: 1000px;}

or whatever figure is suitable for your material. Pick a wrapper
(it may be the main table) and a number of px where you judge the
material is spreading out needlessly beyond. Some older browsers
(including IE6!) do not recognise this but there are workarounds.

Second, *let* the magic of tables arrange the widths of the cells
to suit the material in it, think carefully whether to bother to
set widths on anything at all in the table. Be wary, above all,
of table {width: 100%;}

Third, be careful of setting heights on things. My advice is not
to in tables.

Please, Jim, I am working from memory and making general remarks,
I have not got your site on screen.

One thing I do recall though very vividly though is that you have
far too much inline css. If it is maintenance and updating you
are wanting, templating and all that in a busy site, get the
whole lot off the html page and put it into css sheets, use
inline only sparingly and mostly tactically in development.
 
J

Jim S

See that's the evidence on your mindset problem. You are thinking 800 x
600... what if my display area is only 500px wide either by the
limitations of my display device or browser window I have alloted
because I have more than one window up on my desktop? Hang your page on
an 800 x 600 grid and I will have to scroll back and forth *and* up and
down within my view port. dorayme's design adjusts and all I have to do
is scroll down...with my scroll wheel at the ready!

You missed my point I fancy.
The reference to 800x600 was meant to say that although my pages are not
specifically written for it, I have kept my photos to a size and layout
which should mean that sideways scrolling is never required.
I make the (arrogant?) assumption that most users of my site will be using
the default resolution that came with their pc and would not know how to
use shortcuts to change the size of what they see, or even want to.
 
J

Jim S

No problem Jim. Just thought it might give you some ideas, the
coding being so much simpler than your table layout. I am sure
you can mark up your table layout simpler and better (as you are
allowing is possible).

About table layouts, up to a considerable point there is no
reason that you cannot make a fluid design with tables in the
sense that the page displays in a pleasant manner on most
screens. (Mobile brigade: relax!). They can be seen all over the
show.

But fluid does not mean that all the cells of a page must expand
to fill any size monitor. It may (sort of) mean that it should be
able to be seen in 800 x 600. But there is no point at all in
designing so that all the elements of a page make like marks on
the outside of a balloon or like stars in an expanding universe,
getting further and further away from each other.
This is possibly where we differ most.
You would have me create pages which never gets bigger than size X x Y and
would appear in the top left of any browser screen that opens it?
(That's a question)
My own starting point has always been to fill the allotted space
There are a few devices to stop this sort of needless expansion
happening that I can mention immediately. First, do use the
excellent facility of such as

#wrapper {max-width: 1000px;}
I have never met #wrapper and why 1000px?
(Pages with wide empty right hand margins really bug me)
or whatever figure is suitable for your material. Pick a wrapper
(it may be the main table) and a number of px where you judge the
material is spreading out needlessly beyond. Some older browsers
(including IE6!) do not recognise this but there are workarounds.
Oh dear, I imagine most of the world uses IE6/7 and the workarounds I have
used before usually are unvalidatable.
Second, *let* the magic of tables arrange the widths of the cells
to suit the material in it, think carefully whether to bother to
set widths on anything at all in the table. Be wary, above all,
of table {width: 100%;}
I try not to use individual cell widths except where there are several
images which look weirdly arranged otherwise.
HOWEVER width:100%; height:100% are the rocks on which my table stylesheet
is based. I have never actually considered changing that as my whole design
will probably fall to nothing (I'm going off to try that now so if you can
feel bad vibes, you know it's me)
Third, be careful of setting heights on things. My advice is not
to in tables.

Please, Jim, I am working from memory and making general remarks,
I have not got your site on screen.

One thing I do recall though very vividly though is that you have
far too much inline css. If it is maintenance and updating you
are wanting, templating and all that in a busy site, get the
whole lot off the html page and put it into css sheets, use
inline only sparingly and mostly tactically in development.

This, you see is where I have my difficulty ie the jargon.
"Inline css": does this refer to a line like this
<td valign="bottom" style="text-align: left">
or something that refers to some style eg style1 created in the header?
If it is the latter then it is one which has been created by Expression Web
and I have missed it as I try not to let that happen.
OR perhaps I should let EW do that, but call it something more meaningful.
 
D

dorayme

But fluid does not mean that all the cells of a page must expand
to fill any size monitor. It may (sort of) mean that it should be
able to be seen in 800 x 600. But there is no point at all in
designing so that all the elements of a page make like marks on
the outside of a balloon or like stars in an expanding universe,
getting further and further away from each other.
This is possibly where we differ most.
You would have me create pages which never gets bigger than size X x Y and
would appear in the top left of any browser screen that opens it?
(That's a question)[/QUOTE]

Not saying that at all. I know it sounds boring, but too much of
one thing or the other can be bad. The fluid I have in mind is
this, *allow* a page to be squashed up a bit so that those with
small screens get as much as possible without having to scroll
(especially horizontally) but don't let it go so far the other
way *merely* to fill a screen. It seems to me paying lip service
to fluidity to let things blow out no matter what the size of the
screen is.

It requires some judgement, the figures I supply below are mere
stabs. With a big spread sheet page, many cols, much info, there
would be real advantage in *not* setting a max width. But even
here, width: 100% is not really needed because of what I have
referred to as the magic of tables, their inbuilt tendencies to
grow to fit the natural content. You need a good reason to
inhibit or control this natural process.

But it all depends! In the above paragraph, I have in mind a
table with info like stock numbers, sizes, web addresses,
price... not cells full of discursive text. If there is a spiel
in a cell, an essay even, then the game changes. With text, it is
uncomfortable to read lines that are very very wide, so here it
makes sense not to let the table do its natural thing, ie. to
grow as wide as it can before wrapping is forced. Magic is like
that, one sometimes does not get quite one wishes for when
unthinkingly talking to the genie.
My own starting point has always been to fill the allotted space

It seems a most odd assumption when one considers the size and
resolution of some modern screens. Sometimes one simply does not
have enough material to do this effectively. Spreading a few
crumbs out just for the sake of "using" the space seems not
sensible to me. Greedy would-be miners rush out into greenfields
to grab as much as possible. But we know the reason for this. said:
I have never met #wrapper and why 1000px?
(Pages with wide empty right hand margins really bug me)

Consider this carefully. If you do not like something, it is not
always sensible to do whatever it takes to avoid it. You can make
things even worse. I take a different attitude completely. If an
author has a little bit of material, I prefer to see it neatly
organised and read or look at it without having to cope with the
authors need to do the expanding. I prefer for my mouse to travel
the shortest distance, the eyes too. It is all a matter of
judging. I would say to you not to start with some absolute
requirement to fill the void at all costs!

In any case, if you do have a thing about empty space, there are
things you can do to make it seem more natural to your eye. I
won't go into this here but you are welcome to raise the issue.
This, you see is where I have my difficulty ie the jargon.
"Inline css": does this refer to a line like this
<td valign="bottom" style="text-align: left">

This is what I am referring to. In the head is fine enough in
your circumstances, at least it is all together there!
 

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

Members online

Forum statistics

Threads
473,769
Messages
2,569,577
Members
45,054
Latest member
LucyCarper

Latest Threads

Top