CSS table

Discussion in 'HTML' started by Jim Scott, Apr 13, 2005.

  1. Jim Scott

    Jim Scott Guest

    Most of my pages have a table with a picture, a link-button(CSS) and some
    text; sometimes 2x2 sometimes 3rowsx2cols. It would be nice to have the
    basic template in a stylesheet, but I looked at the tutorials and it looked
    verry complicated for what it does.
    Anyone recommend a site with perhaps a template/sample stylesheet for this?
    TIA
    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, Apr 13, 2005
    #1
    1. Advertising

  2. Jim Scott

    Andy Dingley Guest

    On Wed, 13 Apr 2005 12:10:55 GMT, Jim Scott <>
    wrote:

    >Anyone recommend a site with perhaps a template/sample stylesheet for this?


    Not entirely what you're after, but one of the few "template sites"
    I've seen recently that was worth looking at
    http://www.benmeadowcroft.com/webdev/csstemplates/prosandcons1.html

    CSS-design doesn't really need "templates". The idea is that the
    content and presentation are _separated_, which also allows you to
    refer to the same "presentation controller" (CSS stylesheet) from many
    places, without needing to duplicate it on each page.

    Of course there's still some need for templating, because you must
    still mark the content up sensibly, and with appropriate use of the
    class/id selectors. But this is very much simpler than for a
    table-based layout. Often you can simply keep it in your head (for
    stylesheets by a single designer) because _all_ of them work with the
    same content markup; a <div class="body=text" > in the middle, etc.

    Another advantage of the CSS approach is that these selectors are
    bound to the content, not the presentation. So "nav-menu" with one
    stylesheet might be entirely different with one stylesheet rather than
    the other. This is the CSS Zen Garden approach (take a look)
    --
    Smert' spamionam
    Andy Dingley, Apr 13, 2005
    #2
    1. Advertising

  3. Jim Scott

    Jim Scott Guest

    >
    > CSS-design doesn't really need "templates".

    Sorry My jargon is not up to scratch yet.
    I suppose I meant sample scripts.

    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, Apr 13, 2005
    #3
  4. Jim Scott

    Andy Dingley Guest

    On Wed, 13 Apr 2005 15:41:10 GMT, Jim Scott <>
    wrote:

    >Sorry My jargon is not up to scratch yet.
    >I suppose I meant sample scripts.


    No, "templates" is fine.

    Before CSS, you _really_ needed templates. With CSS you can recycle
    the existing file (because it's separate) and the thing you author
    yourself becomes so simple that close guidance is no longer so
    necessary.
    Andy Dingley, Apr 13, 2005
    #4
  5. Jim Scott

    Jim Scott Guest

    > Before CSS, you _really_ needed templates. With CSS you can recycle
    > the existing file (because it's separate) and the thing you author
    > yourself becomes so simple that close guidance is no longer so
    > necessary.


    I know what it is and I use one Toby posted. Although I understand what it
    does, I could not have produced it. I find the learning curve very steep
    and I am, by nature, impatient. :eek:?
    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, Apr 13, 2005
    #5
  6. On 2005-04-13 08:10:55 -0400, Jim Scott <> said:

    > Most of my pages have a table with a picture, a link-button(CSS) and some
    > text; sometimes 2x2 sometimes 3rowsx2cols. It would be nice to have the
    > basic template in a stylesheet, but I looked at the tutorials and it looked
    > verry complicated for what it does.
    > Anyone recommend a site with perhaps a template/sample stylesheet for this?
    > TIA


    Tables are for tabular data.
    William Hamby, Apr 13, 2005
    #6
  7. Jim Scott

    Jim Scott Guest

    On Wed, 13 Apr 2005 15:32:08 -0400, William Hamby wrote:

    > On 2005-04-13 08:10:55 -0400, Jim Scott <> said:
    >
    >> Most of my pages have a table with a picture, a link-button(CSS) and some
    >> text; sometimes 2x2 sometimes 3rowsx2cols. It would be nice to have the
    >> basic template in a stylesheet, but I looked at the tutorials and it looked
    >> verry complicated for what it does.
    >> Anyone recommend a site with perhaps a template/sample stylesheet for this?
    >> TIA

    >
    > Tables are for tabular data.


    But they make nice placeholders if you don't know how to do that otherwise.
    Which really is my question, how do I find out how to get/make a stylesheet
    to do what my tables do.
    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, Apr 13, 2005
    #7
  8. On 2005-04-13 15:37:47 -0400, Jim Scott <> said:

    > But they make nice placeholders if you don't know how to do that otherwise.
    > Which really is my question, how do I find out how to get/make a stylesheet
    > to do what my tables do.


    Actually, they do NOT make nice placeholders since they are NOT
    supposed to be used for anything but tabular data. It's like using a
    tricycle to commute back and worth to work just because it's cheaper
    than driving a car, only you'll get a ticket for playing in traffic.

    To answer your question (thank you for asking it, btw), simply go to
    www.w3.org or the CSS vault and learn away. If you have any questions,
    don't hesitate to ask me. I'll help in any way I can.
    William Hamby, Apr 14, 2005
    #8
  9. Jim Scott

    Andy Dingley Guest

    On Wed, 13 Apr 2005 19:21:10 -0400, William Hamby
    <> wrote:

    >It's like using a tricycle to commute back and worth to work just because it's cheaper
    >than driving a car, only you'll get a ticket for playing in traffic.


    Read uk.rec.cycling Several of my neighbours commute 10 miles each
    way (Bristol-Bath) on tricycles. I'd do it too, but I'm only a
    two-wheeler. :cool:

    Faster than driving too.
    Andy Dingley, Apr 14, 2005
    #9
  10. On 2005-04-13 20:00:27 -0400, Andy Dingley <> said:

    > Read uk.rec.cycling Several of my neighbours commute 10 miles each
    > way (Bristol-Bath) on tricycles. I'd do it too, but I'm only a
    > two-wheeler. :cool:
    >
    > Faster than driving too.


    LOL
    William Hamby, Apr 14, 2005
    #10
  11. Jim Scott

    RF Rohrer Guest

    You dont. Replacing table quickly with CSS is not possible cross-browser.
    There are still too many browser quirks. Work with what is fast and solid
    cross-browser.

    "Jim Scott" <> wrote in message
    news:...
    > On Wed, 13 Apr 2005 15:32:08 -0400, William Hamby wrote:
    >
    > > On 2005-04-13 08:10:55 -0400, Jim Scott <> said:
    > >
    > >> Most of my pages have a table with a picture, a link-button(CSS) and

    some
    > >> text; sometimes 2x2 sometimes 3rowsx2cols. It would be nice to have the
    > >> basic template in a stylesheet, but I looked at the tutorials and it

    looked
    > >> verry complicated for what it does.
    > >> Anyone recommend a site with perhaps a template/sample stylesheet for

    this?
    > >> TIA

    > >
    > > Tables are for tabular data.

    >
    > But they make nice placeholders if you don't know how to do that

    otherwise.
    > Which really is my question, how do I find out how to get/make a

    stylesheet
    > to do what my tables do.
    > --
    > Jim on Tyneside UK
    > Remove X to email me.
    > http://freespace.virgin.net/mr.jimscott/
    RF Rohrer, Apr 14, 2005
    #11
  12. Andy Dingley wrote:
    > Read uk.rec.cycling Several of my neighbours commute 10 miles each
    > way (Bristol-Bath) on tricycles. I'd do it too, but I'm only a
    > two-wheeler. :cool:
    > Faster than driving too.


    I use to commute from Kinser (Naha) to Foster (just outside of Okinawa
    city) and it was a faster commute if II rode my bike.

    --
    -=tn=-
    Travis Newbury, Apr 14, 2005
    #12
  13. Jim Scott

    Jim Scott Guest

    Jim Scott, Apr 14, 2005
    #13
  14. Jim Scott

    humbads Guest

    humbads, Apr 15, 2005
    #14
  15. Jim Scott

    Jim Scott Guest

    On 14 Apr 2005 20:14:06 -0700, humbads wrote:

    > I'd stick with tables for laying out your images. But use CSS classes
    > to make your life easier. Try this to learn how:
    >
    > http://www.somacon.com/blog/page41.php


    Thanks friend.
    I've spent a couple of days playing with CSS two and three column layouts
    (no tables), but one image only has to be slightly bigger than an allocated
    % width and the whole thing goes pear-shaped.
    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, Apr 15, 2005
    #15
  16. Jim Scott

    Jim Scott Guest

    On Fri, 15 Apr 2005 09:08:00 GMT, Jim Scott wrote:

    > On 14 Apr 2005 20:14:06 -0700, humbads wrote:
    >
    >> I'd stick with tables for laying out your images. But use CSS classes
    >> to make your life easier. Try this to learn how:
    >>
    >> http://www.somacon.com/blog/page41.php

    >

    Follow-up.
    Done that and it works well (well, as well as normal tables did)
    Can anyone explain why constructing tables via a stylesheet should be
    'better' than using convential HTML?
    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, Apr 15, 2005
    #16
  17. Jim Scott

    Spartanicus Guest

    Jim Scott <> wrote:

    >>> I'd stick with tables for laying out your images. But use CSS classes
    >>> to make your life easier. Try this to learn how:
    >>>
    >>> http://www.somacon.com/blog/page41.php

    >>

    >Follow-up.
    >Done that and it works well (well, as well as normal tables did)
    >Can anyone explain why constructing tables via a stylesheet should be
    >'better' than using convential HTML?


    Use css to style a table if it still makes sense/works if css is not
    enabled, otherwise use html attributes.

    Using css to create a page layout only has real benefits if you abandon
    using html tables for layout purposes. Adding inline css to a html
    layout table as you have done has no real benefits.

    Be advised that using a non html table css layout that works in IE
    restricts what you can do in terms of complexity of the layout. Css2
    makes it easy to replace most complex html table layouts with a css
    layout, but IE doesn't support that particular aspect of css2.

    Staying within the constraints of IE limits what can be achieved with a
    "css layout". For example it's not possible to create layout boxes that
    properly contain their content.

    You'd do well to forget about css layouts for the moment, and
    concentrate on making your pages work in a wider range of viewport
    widths, using html to properly structure your pages by using headers,
    lists, paragraphs etc., and lastly getting rid of other presentational
    html such as font tags.

    If after having done that you enjoyed completing that challenge, then
    come back to the topic of css layouts.

    --
    Spartanicus
    Spartanicus, Apr 15, 2005
    #17
  18. Jim Scott

    Jim Scott Guest

    > You'd do well to forget about css layouts for the moment, and
    > concentrate on making your pages work in a wider range of viewport
    > widths, using html to properly structure your pages by using headers,
    > lists, paragraphs etc., and lastly getting rid of other presentational
    > html such as font tags.


    Thanks for the help although that last paragraph blinded me with science eg
    "wider range of viewport widths". I take it that might mean I should make
    it look better in a higher screen resolution as I have only designed it for
    800x600?

    I am trying very hard to produce a site which in markup compares to a
    correctly punctuated sentence. (While of course maintaining my Bellringers
    section, where it all started.)

    When I used Frontpage I was criticised for 'bloat' and incorrect HTML. I
    dumped FP which, incidentally, was by far the simplest way to build a
    website.
    I rebuilt all my 'million' pages so that each was validated.
    I made mistakes along the way, but felt I had got there even learning some
    HTML and css (which I had never heard of when I began).
    The criticism now arose that 'frames are for data' and that I should not
    use them to hold images and buttons in place. Since my site consists
    largely of images and buttons, I have to be sure that any advice I follow
    is 'better' and not just some pedant's view of heaven.
    I had a look at creating the css equivalent of a 2x2 or 3x3 table to fix
    the positions of my images in the manner I desire, and although it all
    worked well in Firefox, IE beggered it up if a picture was a tad too big.
    However then someone kindly chipped in and advised that I should stick with
    tables as 'scaffolding' (my term), but set up the basic table in css.
    My question here was really "what difference does it make whether the table
    is in a stylesheet or purely in the HTML body? It's still a table."
    I have all the time in the world to change yet again, but need to be sure
    of the course to take.
    --
    Jim on Tyneside UK
    Remove X to email me.
    http://freespace.virgin.net/mr.jimscott/
    Jim Scott, Apr 15, 2005
    #18
  19. Jim Scott

    dorayme Guest

    > From: Jim Scott <>

    >
    > My question here was really "what difference does it make whether the table
    > is in a stylesheet or purely in the HTML body? It's still a table."
    > I have all the time in the world to change yet again, but need to be sure
    > of the course to take.
    > --
    > Jim on Tyneside UK
    > Remove X to email me.
    > http://freespace.virgin.net/mr.jimscott/


    Having a separate stylesheet helps to set all the tables of the same type on
    your site. Some gains: not having to repeat style info in the html pages(s),
    being able to change many things at one go. If the style is unique to some
    particular html item on some particular page, probably best to use inline
    right there where it acts...

    dorayme
    dorayme, Apr 15, 2005
    #19
  20. Jim Scott

    humbads Guest

    > not just some pedant's view of heaven.

    Funny. <flamebait>I'm afraid you'll get a lot of that around
    here.</flamebait>

    What is a table? It is a collection of data organized by rows and
    columns. Since you want your images in rows and columns, it is best to
    use a table to hold them. I have the CSS2 programmer's reference, and
    it doesn't even have an entry in its index for "columns". CSS doesn't
    know anything about rows and columns. Don't use tables where you can
    use CSS, but that doesn't mean don't ever use tables. (Example, you
    have a list of products and you want there to be a lot of white space
    between each list item. Don't use a table with high cell padding, use
    the line-height CSS property specified in em units on the LI tag.)

    For your two by two tables, put your style definitions in a common file
    and reference this file via a link tag in each html page. Then,
    specify the class for the 2x2 tables, like this:

    CSS:

    table.foursquare { width: 100%; }
    table.foursquare td { width: 50%; }

    psuedo-HTML:
    <link rel="stylesheet" type="text/css" href="globalstyles.css">
    </head><body>
    <table class="foursquare">
    <tr><td><img1></td><td><img2></td>
    <tr><td><img3></td><td><img4></td>
    </table>

    Now you can control the look of all the foursquare tables in your whole
    website from a single file. That's the main advantage of CSS. Another
    major advantage is inheritance, which you can see above in the
    "table.foursquare td" style. This says the style applies to all td
    elements within a table.foursquare. You save the tedious work of having
    to specify a class attribute in each td. Now let your imagination run
    wild with the possibilities.
    humbads, Apr 16, 2005
    #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. David Williams
    Replies:
    2
    Views:
    1,120
    Jacob Yang [MSFT]
    Aug 12, 2003
  2. Eric
    Replies:
    4
    Views:
    711
    clintonG
    Dec 24, 2004
  3. Rio
    Replies:
    4
    Views:
    1,184
  4. Replies:
    3
    Views:
    900
    richard
    Sep 24, 2006
  5. vitay
    Replies:
    8
    Views:
    542
    Stan McCann
    Nov 9, 2006
Loading...

Share This Page