make table pretty

Discussion in 'HTML' started by mcnewsxp, Oct 8, 2010.

  1. mcnewsxp

    mcnewsxp Guest

    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
     
    mcnewsxp, Oct 8, 2010
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed "mcnewsxp"
    <> writing in
    news:i8n6cv$7v8$-september.org:

    > 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.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Oct 8, 2010
    #2
    1. Advertising

  3. mcnewsxp

    mcnewsxp Guest

    "Adrienne Boswell" <> wrote in message
    news:Xns9E0B499661BC0arbpenyahoocom@81.169.183.62...
    > Gazing into my crystal ball I observed "mcnewsxp"
    > <> writing in
    > news:i8n6cv$7v8$-september.org:
    >
    >> 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.
    >


    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.
     
    mcnewsxp, Oct 8, 2010
    #3
  4. mcnewsxp wrote:

    > "Adrienne Boswell" wrote:
    >> "mcnewsxp" wrote:
    >>> 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.

    >>
    >> 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.


    ...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.

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
     
    Beauregard T. Shagnasty, Oct 8, 2010
    #4
  5. mcnewsxp

    mcnewsxp Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:i8nl25$s7e$-september.org...
    > mcnewsxp wrote:
    >
    >> "Adrienne Boswell" wrote:
    >>> "mcnewsxp" wrote:
    >>>> 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.
    >>>
    >>> 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.

    >
    > ..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.
     
    mcnewsxp, Oct 8, 2010
    #5
  6. "mcnewsxp" <> wrote in message
    news:i8nnf9$ah7$-september.org...
    >
    > "Beauregard T. Shagnasty" <> wrote in message
    > news:i8nl25$s7e$-september.org...
    >> mcnewsxp wrote:
    >>
    >>> "Adrienne Boswell" wrote:
    >>>> "mcnewsxp" wrote:
    >>>>> 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.
    >>>>
    >>>> 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.

    >>
    >> ..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.


    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
     
    Paul E. Schoen, Oct 8, 2010
    #6
  7. mcnewsxp

    dorayme Guest

    In article <i8nl25$s7e$-september.org>,
    "Beauregard T. Shagnasty" <> wrote:

    > >>> 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.


    >
    > 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
     
    dorayme, Oct 8, 2010
    #7
  8. mcnewsxp

    dorayme Guest

    In article <>,
    Sherm Pendley <> wrote:

    > "Paul E. Schoen" <> writes:
    >
    > > 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/

    >
    > 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
     
    dorayme, Oct 8, 2010
    #8
  9. mcnewsxp

    dorayme Guest

    In article <i8nl25$s7e$-september.org>,
    "Beauregard T. Shagnasty" <> wrote:

    > 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.

    --
    dorayme
     
    dorayme, Oct 8, 2010
    #9
  10. mcnewsxp

    mcnewsxp Guest

    "dorayme" <> wrote in message
    news:...
    > In article <i8nl25$s7e$-september.org>,
    > "Beauregard T. Shagnasty" <> wrote:
    >
    >> 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.
    >
    > --


    could you point me to an example.
    thanks much.
     
    mcnewsxp, Oct 9, 2010
    #10
  11. mcnewsxp

    mcnewsxp Guest

    "Paul E. Schoen" <> wrote in message
    news:2dLro.49$...
    >
    > "mcnewsxp" <> wrote in message
    > news:i8nnf9$ah7$-september.org...
    >>
    >> "Beauregard T. Shagnasty" <> wrote in message
    >> news:i8nl25$s7e$-september.org...
    >>> mcnewsxp wrote:
    >>>
    >>>> "Adrienne Boswell" wrote:
    >>>>> "mcnewsxp" wrote:
    >>>>>> 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.
    >>>>>
    >>>>> 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.
    >>>
    >>> ..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.

    >
    > 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.

    >
     
    mcnewsxp, Oct 9, 2010
    #11
  12. mcnewsxp

    dorayme Guest

    In article <i8pts8$aus$-september.org>,
    "mcnewsxp" <> wrote:

    > "dorayme" <> wrote in message

    ....
    > > ... 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.


    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.

    --
    dorayme
     
    dorayme, Oct 10, 2010
    #12
  13. "dorayme" <> wrote in message
    news:...
    > In article <i8pts8$aus$-september.org>,
    > "mcnewsxp" <> wrote:
    >
    >> "dorayme" <> wrote in message

    > ...
    >> > ... 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.

    >
    > 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
     
    Paul E. Schoen, Oct 10, 2010
    #13
  14. mcnewsxp

    dorayme Guest

    In article <yO8so.12513$>,
    "Paul E. Schoen" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    > > In article <i8pts8$aus$-september.org>,
    > > "mcnewsxp" <> wrote:
    > >
    > >> "dorayme" <> wrote in message

    > > ...
    > >> > ... 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.

    > >
    > > 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.
    >



    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.

    --
    dorayme
     
    dorayme, Oct 10, 2010
    #14
  15. "dorayme" <> wrote in message
    news:...
    > In article <yO8so.12513$>,
    > "Paul E. Schoen" <> wrote:
    >
    >> "dorayme" <> wrote in message
    >> news:...
    >> > In article <i8pts8$aus$-september.org>,
    >> > "mcnewsxp" <> wrote:
    >> >
    >> >> "dorayme" <> wrote in message
    >> > ...
    >> >> > ... 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.
    >> >
    >> > 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.
    >>

    >
    >
    > 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
     
    Paul E. Schoen, Oct 10, 2010
    #15
  16. mcnewsxp

    dorayme Guest

    In article <84aso.15160$>,
    "Paul E. Schoen" <> wrote:

    > 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/>

    --
    dorayme
     
    dorayme, Oct 10, 2010
    #16
  17. mcnewsxp

    mcnewsxp Guest

    On Oct 10, 4:50 am, dorayme <> wrote:
    > In article <84aso.15160$>,
    >  "Paul E. Schoen" <> wrote:
    >
    > > 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/>
    >
    > --
    > dorayme


    how about if i wanted to display the state abbreviation, but when
    hovered it would display the full state name?
     
    mcnewsxp, Oct 14, 2010
    #17
  18. "mcnewsxp" <> wrote in message
    news:...
    On Oct 10, 4:50 am, dorayme <> wrote:
    > In article <84aso.15160$>,
    > "Paul E. Schoen" <> wrote:
    >
    > > 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/>
    >
    > --
    > dorayme


    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
     
    Paul E. Schoen, Oct 15, 2010
    #18
  19. mcnewsxp

    dorayme Guest

    In article
    <
    m>,
    mcnewsxp <> wrote:

    ....
    >
    > 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>

    --
    dorayme
     
    dorayme, Oct 15, 2010
    #19
  20. mcnewsxp

    mcnewsxp Guest

    "dorayme" <> wrote in message
    news:...
    > In article
    > <
    > m>,
    > mcnewsxp <> wrote:
    >
    > ...
    >>
    >> 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>
    >
    > --

    witin an <il> ?
     
    mcnewsxp, Oct 15, 2010
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andrew Montgomery
    Replies:
    0
    Views:
    653
    Andrew Montgomery
    Sep 17, 2003
  2. David Williams
    Replies:
    2
    Views:
    1,181
    Jacob Yang [MSFT]
    Aug 12, 2003
  3. Rio
    Replies:
    4
    Views:
    1,249
  4. Makoto Kuwata
    Replies:
    3
    Views:
    372
    James Britt
    Jul 1, 2005
  5. make a date pretty

    , Oct 2, 2008, in forum: Javascript
    Replies:
    9
    Views:
    111
    dhtml
    Oct 6, 2008
Loading...

Share This Page