make table pretty

[mcnewsxp]

i have a 5 column 11 row table that will contain links within eacg <td> to a
website. the text in the <td> will be the 50 states plus a few more.
how can i make this look less boring? i know this is subject to opinion,
but i thought i'd ask the experts. maybe someone has done something like
this before.
thanks much.
mcnewsxp

 

[Adrienne Boswell]

i have a 5 column 11 row table that will contain links within eacg
<td> to a website. the text in the <td> will be the 50 states plus a
few more. how can i make this look less boring? i know this is
subject to opinion, but i thought i'd ask the experts. maybe someone
has done something like this before.
thanks much.
mcnewsxp

A URL would be really helpful.

 

[mcnewsxp]

A URL would be really helpful.

you can't envision a 5 x 11 table with hyperlinks in the cells? it doesn't
live anywhere yet. i just created the html and will plug it into a page
later.

 

[Beauregard T. Shagnasty]

you can't envision a 5 x 11 table with hyperlinks in the cells? it
doesn't live anywhere yet. i just created the html and will plug it
into a page later.

...and a URL would help us correct any errors. (Don't forget the
errors!)

In my design's eye, a table of "50 states" isn't a table -- isn't
tabular data. It is a list. <ul><li>...

Oh, and rather than reinventing the wheel, you could just copy this
page: http://www.50states.com/ Multiple lists in one table row...

Alabama is not related to Illinois, Montana, Rhode Island - in this
site's "table". Also, when eye-scanning the display alphabetically, your
eye has to traverse multiple columns looking for the one you want. A
single vertical list (or even a <select>) removes that problem. See the
"Choose a State" on that same page.

 

[mcnewsxp]

..and a URL would help us correct any errors. (Don't forget the
errors!)

In my design's eye, a table of "50 states" isn't a table -- isn't
tabular data. It is a list. <ul><li>...

Oh, and rather than reinventing the wheel, you could just copy this
page: http://www.50states.com/ Multiple lists in one table row...

Alabama is not related to Illinois, Montana, Rhode Island - in this
site's "table". Also, when eye-scanning the display alphabetically, your
eye has to traverse multiple columns looking for the one you want. A
single vertical list (or even a <select>) removes that problem. See the
"Choose a State" on that same page.

that looks like what i have.

 

[Paul E. Schoen]

that looks like what i have.

Several ideas:

1. Use an icon of the state's outline for each link.
2. Use the state's flag, flower, governer, coin, or other distinctive image
http://www.50states.com/flower.htm
http://www.50states.com/flag/
3. Use the state's political color (red/blue) for each cell.
http://www.vaughns-1-pagers.com/politics/red-blue-states-summary.htm
4. To enhance #3, use a color with red/blue percentage = rep/dem
http://html-color-codes.info/

Good luck. Please reply with a link to your efforts.

Paul

 

[dorayme]

[/QUOTE]

In my design's eye, a table of "50 states" isn't a table -- isn't
tabular data. It is a list. <ul><li>...

50 stats could properly enough be a table, and in any real page
is quite likely to usefully and semantically be one. But
certainly not a 5 column 11 row one with states in each cell,
that is quite a bad use of tables as mere layout. If all that is
needing to be conveyed is the names of the states, the ret of the
effort being to make it look nice, then a UL would be the right
choice as B has in his designer's eye (how many eyes have you
got, B?)

 

[dorayme]

5. Put any or all of the above into a pop-up div that's triggered on a
mouse hover.

Whatever you do, don't do 5. But perhaps it was meant as a joke?

If you do some of 1 to 4, which are kind and reasonable
suggestions, and if you decide to use a UL now that it has been
mentioned as being quite appropriate (and it is the simplest
correct element to use) you can do it by using a background image
of these icons but with proper HTML text).

 

[dorayme]

In my design's eye, a table of "50 states" isn't a table -- isn't
tabular data. It is a list. <ul><li>...

And, I forgot to mention more support for it being a UL: it is
the better element here for styling that assists users. LIs can
be styled horizontal, they can float or simply be displayed
inline and this is superior to any table in a very significant
manner, it allows the states to fit on *any* users screens
better. In a table you have to preordain a number of columns and
so you lose an important flexibility for the user.

 

[mcnewsxp]

And, I forgot to mention more support for it being a UL: it is
the better element here for styling that assists users. LIs can
be styled horizontal, they can float or simply be displayed
inline and this is superior to any table in a very significant
manner, it allows the states to fit on *any* users screens
better. In a table you have to preordain a number of columns and
so you lose an important flexibility for the user.

--

could you point me to an example.
thanks much.

 

[mcnewsxp]

Several ideas:

1. Use an icon of the state's outline for each link.
2. Use the state's flag, flower, governer, coin, or other distinctive
image
http://www.50states.com/flower.htm
http://www.50states.com/flag/
3. Use the state's political color (red/blue) for each cell.
http://www.vaughns-1-pagers.com/politics/red-blue-states-summary.htm
4. To enhance #3, use a color with red/blue percentage = rep/dem
http://html-color-codes.info/

Good luck. Please reply with a link to your efforts.

Paul

i like all of those ideas.
thanks much.

 

[dorayme]

could you point me to an example.
thanks much.

I will make you an example... how about this to illustrate the
idea of floated list items, with a bit of extra styling that
might not suit you, the key thing to note is the floating of the
list items that gets you the flexibility I mentioned. The
semantics is taken care of by simply having the unordered list
element.

<http://dorayme.netweaver.com.au/list_of_US_states.html>

You can style however you want, but the float is the main thing
here.

 

[Paul E. Schoen]

I will make you an example... how about this to illustrate the
idea of floated list items, with a bit of extra styling that
might not suit you, the key thing to note is the floating of the
list items that gets you the flexibility I mentioned. The
semantics is taken care of by simply having the unordered list
element.

<http://dorayme.netweaver.com.au/list_of_US_states.html>

You can style however you want, but the float is the main thing
here.

Doesn't work for me in IE8. Just a table of state names with a US map
background.

Paul

 

[dorayme]

Doesn't work for me in IE8. Just a table of state names with a US map
background.

What does not work. Not sure what you were expecting? I hope not
that the text appears in the picture. That was not the aim of the
exercise. That would be another exercise (easily enough done in a
sense).

It cannot be a table as in the html table element. And I would be
very surprised if it behaved like a table in respect to the *only
relevant* things I was demonstrating, making the list horizontal
and the flexible adaptation of the list items to the browser
window. In a table, the columns are fixed, in this UL, the list
items (the states of the US) adapt to browser size.

 

[Paul E. Schoen]

What does not work. Not sure what you were expecting? I hope not
that the text appears in the picture. That was not the aim of the
exercise. That would be another exercise (easily enough done in a
sense).

It cannot be a table as in the html table element. And I would be
very surprised if it behaved like a table in respect to the *only
relevant* things I was demonstrating, making the list horizontal
and the flexible adaptation of the list items to the browser
window. In a table, the columns are fixed, in this UL, the list
items (the states of the US) adapt to browser size.

Oh. I thought the "float" meant a floating image on mouse hover, such as:
http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
http://www.samisite.com/test-csb2nf/id121.htm

There may be other meanings to the term "float":
https://d2o0t5hpnwv4c1.cloudfront.net/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html
http://www.html.net/tutorials/css/lesson13.php

Also, apparently some examples don't work on IE8.

Sorry for the misunderstanding.

Paul

 

[dorayme]

Oh. I thought the "float" meant a floating image

I see. OK. It is a CSS box property. There is plenty of
information on this most useful styling property. I have some
information and some stories to tell about it at:

<http://netweaver.com.au/floatHouse/>

 

[mcnewsxp]

I see. OK. It is a CSS box property. There is plenty of
information on this most useful styling property. I have some
information and some stories to tell about it at:

<http://netweaver.com.au/floatHouse/>

how about if i wanted to display the state abbreviation, but when
hovered it would display the full state name?

 

[Paul E. Schoen]

I see. OK. It is a CSS box property. There is plenty of
information on this most useful styling property. I have some
information and some stories to tell about it at:

<http://netweaver.com.au/floatHouse/>

how about if i wanted to display the state abbreviation, but when
hovered it would display the full state name?

Here is a simple way:
http://www.chami.com/tips/internet/010298I.html

A textbox watermark:
http://stackoverflow.com/questions/108207/how-do-i-make-an-html-text-box-show-a-hint-when-empty

Here's the mother lode:
http://www.dynamicdrive.com/dynamicindex5/

Good luck,

Paul

 

[dorayme]

<[email protected]
m>,

....

how about if i wanted to display the state abbreviation, but when
hovered it would display the full state name?

If the abbreviations are in a link, to take a possible case
(since you provide no URL), you can use title.

<div><a href="allAboutNewYork.html" title="New York">NY</a></div>

 

[mcnewsxp]

<[email protected]
m>,

...

If the abbreviations are in a link, to take a possible case
(since you provide no URL), you can use title.

<div><a href="allAboutNewYork.html" title="New York">NY</a></div>

--

witin an <il> ?