table cellspacing

Discussion in 'HTML' started by Eustace, Feb 13, 2008.

  1. Eustace

    Eustace Guest

    At last I managed to make my webpage

    http://www.geocities.com/emfrilingos/fril

    fully compliant with html 4.01 Strict. But there is a slight issue that
    leaves me unsatisfied:

    In the <head> I have defined a class table.poem{} as

    table.poem {
    margin: 0 auto;
    text-align: left;
    border-width: 10px;
    border-style: outset;
    }

    table.poem td {
    border-width: 1px;
    padding: 0em 1em 0px 1em;
    border-style: inset;
    }


    In the <body> I use it as

    <table class="poem" cellspacing=10>
    ....

    What should I add/change to the css definition so I don't have to use
    cellspacing=10 when I call the class in the body?

    Thanks,

    Eustace

    PS. I post this because I don't see in the newsgroup a similar message
    over 12 hours ago.
    Eustace, Feb 13, 2008
    #1
    1. Advertising

  2. Eustace

    Ben C Guest

    On 2008-02-13, Eustace <> wrote:
    > At last I managed to make my webpage
    >
    > http://www.geocities.com/emfrilingos/fril
    >
    > fully compliant with html 4.01 Strict. But there is a slight issue that
    > leaves me unsatisfied:
    >
    > In the <head> I have defined a class table.poem{} as
    >
    > table.poem {
    > margin: 0 auto;
    > text-align: left;
    > border-width: 10px;
    > border-style: outset;
    > }
    >
    > table.poem td {
    > border-width: 1px;
    > padding: 0em 1em 0px 1em;
    > border-style: inset;
    > }
    >
    >
    > In the <body> I use it as
    >
    ><table class="poem" cellspacing=10>
    > ...
    >
    > What should I add/change to the css definition so I don't have to use
    > cellspacing=10 when I call the class in the body?


    Add border-spacing: 10px (and get rid of the cellspacing attribute).
    Might not work in IE.
    Ben C, Feb 13, 2008
    #2
    1. Advertising

  3. Eustace

    Andy Dingley Guest

    On 13 Feb, 11:40, Eustace <> wrote:
    > At last I managed to make my webpage
    > http://www.geocities.com/emfrilingos/fril
    > fully compliant with html 4.01 Strict.


    You can't host a compliant page on Geocities, as their inserted
    JavaScript banner code breaks your page structure. You can't even
    achieve a standards-mode rendering page! I regard this as sufficient
    reason to not host with Geocities.


    > table.poem {
    > margin: 0 auto;
    > text-align: left;
    > border-width: 10px;
    > border-style: outset;
    > }


    Your use of one-cell tables simply to place borders around things is a
    fairly gross abuse of <table>. Use a single <div>, if you're only
    having one cell.
    Andy Dingley, Feb 13, 2008
    #3
  4. Eustace

    rf Guest

    "Andy Dingley" <> wrote in message
    news:...
    > On 13 Feb, 11:40, Eustace <> wrote:
    >> At last I managed to make my webpage
    >> http://www.geocities.com/emfrilingos/fril
    >> fully compliant with html 4.01 Strict.

    >
    > You can't host a compliant page on Geocities, as their inserted
    > JavaScript banner code breaks your page structure. You can't even
    > achieve a standards-mode rendering page! I regard this as sufficient
    > reason to not host with Geocities.
    >
    >
    >> table.poem {
    >> margin: 0 auto;
    >> text-align: left;
    >> border-width: 10px;
    >> border-style: outset;
    >> }

    >
    > Your use of one-cell tables simply to place borders around things is a
    > fairly gross abuse of <table>. Use a single <div>, if you're only
    > having one cell.


    h1 I would say in this case :)

    --
    Richard.
    rf, Feb 13, 2008
    #4
  5. Scripsit Ben C:

    >> <table class="poem" cellspacing=10>
    >> ...
    >>
    >> What should I add/change to the css definition so I don't have to use
    >> cellspacing=10 when I call the class in the body?

    >
    > Add border-spacing: 10px (and get rid of the cellspacing attribute).
    > Might not work in IE.


    Does not work in IE, making the whole idea worse than pointless. What's
    the idea of replacing code by something that does not work on the most
    popular browser just to "comply with HTML 4.01" (especially since in
    this case, the page does not actually comply with any HTML specification
    anyway)?

    Note: The tables are really just for getting borders around poems.
    Ideally, we would use <p> elements with suitable CSS settings, but this
    isn't practical. A single-cell table is a hack, but it's the simplest
    hack for producing a box that is as wide as needed by its content. So
    there's really no need to change the author's current approach.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 13, 2008
    #5
  6. Eustace

    Ben C Guest

    On 2008-02-13, Jukka K. Korpela <> wrote:
    > Scripsit Ben C:
    >
    >>> <table class="poem" cellspacing=10>
    >>> ...
    >>>
    >>> What should I add/change to the css definition so I don't have to use
    >>> cellspacing=10 when I call the class in the body?

    >>
    >> Add border-spacing: 10px (and get rid of the cellspacing attribute).
    >> Might not work in IE.

    >
    > Does not work in IE, making the whole idea worse than pointless. What's
    > the idea of replacing code by something that does not work on the most
    > popular browser just to "comply with HTML 4.01" (especially since in
    > this case, the page does not actually comply with any HTML specification
    > anyway)?


    Often it helps to know that there is a proper way of doing something,
    even if for some practical purposes you can't always use it.

    > Note: The tables are really just for getting borders around poems.
    > Ideally, we would use <p> elements with suitable CSS settings, but this
    > isn't practical. A single-cell table is a hack, but it's the simplest
    > hack for producing a box that is as wide as needed by its content.


    A float would be ever simpler.

    ..poem
    {
    float: left;
    clear: left;
    border: 2px solid black;
    }
    Ben C, Feb 13, 2008
    #6
  7. Eustace

    Ben C Guest

    On 2008-02-13, Ben C <> wrote:
    > On 2008-02-13, Jukka K. Korpela <> wrote:

    [...]
    >> Note: The tables are really just for getting borders around poems.
    >> Ideally, we would use <p> elements with suitable CSS settings, but this
    >> isn't practical. A single-cell table is a hack, but it's the simplest
    >> hack for producing a box that is as wide as needed by its content.

    >
    > A float would be ever simpler.
    >
    > .poem
    > {
    > float: left;
    > clear: left;
    > border: 2px solid black;
    > }


    Actually looking back at the OP's OP, he wants them centered, so a float
    won't work.

    So I will now suggest:

    body { text-align: center }

    .poem
    {
    display: inline-block;
    border: 2px solid black;
    }

    with <br>s between the inline blocks.

    Doesn't work in IE or Firefox, but should be fine in Opera or Safari.
    Ben C, Feb 13, 2008
    #7
  8. Eustace

    Andy Dingley Guest

    On 13 Feb, 12:55, "rf" <> wrote:

    > h1 I would say in this case :)


    Read down the page. There are lots of them.
    Andy Dingley, Feb 13, 2008
    #8
  9. Eustace

    Eustace Guest

    On 2008-02-13 08:36 Ben C wrote:
    > On 2008-02-13, Ben C <> wrote:
    >> On 2008-02-13, Jukka K. Korpela <> wrote:

    > [...]
    >>> Note: The tables are really just for getting borders around poems.
    >>> Ideally, we would use <p> elements with suitable CSS settings, but this
    >>> isn't practical. A single-cell table is a hack, but it's the simplest
    >>> hack for producing a box that is as wide as needed by its content.

    >> A float would be ever simpler.
    >>
    >> .poem
    >> {
    >> float: left;
    >> clear: left;
    >> border: 2px solid black;
    >> }

    >
    > Actually looking back at the OP's OP, he wants them centered, so a float
    > won't work.
    >
    > So I will now suggest:
    >
    > body { text-align: center }
    >
    > .poem
    > {
    > display: inline-block;
    > border: 2px solid black;
    > }
    >
    > with <br>s between the inline blocks.
    >
    > Doesn't work in IE or Firefox, but should be fine in Opera or Safari.


    The main attraction of using <table> is the 3D borders that give the
    impression of the content being encased in a frame. If I knew of a way
    to create the same effect I would consider it. A solid border is out of
    question. The possibility of using border-style is essential.

    But I see that I can use border-style: outset with your code... Now the
    main problem I have to solve is how to make the block as wide as needed
    for the content. Thanks everybody for the ideas you gave me.

    Eustace

    --
    It ain't THAT, babe! - A radical reinterpretation
    http://www.geocities.com/itaintme_babe/itaintme.html
    Eustace, Feb 13, 2008
    #9
  10. Eustace

    Eustace Guest

    On 2008-02-13 07:34 Andy Dingley wrote:
    > On 13 Feb, 11:40, Eustace <> wrote:
    >> At last I managed to make my webpage
    >> http://www.geocities.com/emfrilingos/fril
    >> fully compliant with html 4.01 Strict.

    >
    > You can't host a compliant page on Geocities, as their inserted
    > JavaScript banner code breaks your page structure. You can't even
    > achieve a standards-mode rendering page! I regard this as sufficient
    > reason to not host with Geocities.


    I take care of my own code and let Geocities take care of theirs. Up
    till now Geocities has been satisfactory for my needs and purposes,
    though of course their introduction of the right-hand panel wasn't very
    nice, but on the other hand one can close it, as I would expect my
    visitors to do.

    >
    >> table.poem {
    >> margin: 0 auto;
    >> text-align: left;
    >> border-width: 10px;
    >> border-style: outset;
    >> }

    >
    > Your use of one-cell tables simply to place borders around things is a
    > fairly gross abuse of <table>. Use a single <div>, if you're only
    > having one cell.


    "fairly gross abuse of <table>"! That seems a fairly harsh criticism. I
    started using once cell tables long before I knew of css, and I doubt
    that the couple of (rather dated now) books I have read on html provide
    alternate solutions. One of the advantages of posting to newsgroups like
    this is, however, extending and updating one's knowledge.

    On the theoretical side, I have been working on a Java program that
    solves spherical trigonometry triangles. One might say that a spherical
    triangle in which 1 angle is 180° (and the other 2 are 0°) is "a fairly
    gross abuse of a spherical triangle"! Theoretically, however, it *is* a
    spherical triangle, though an extreme case of one, and, on the practical
    side, one that is often encountered when you try to calculate the
    distance between two locations of the same longitude; and it has to be
    treated as such: the triangle solver should accept is as a triangle and
    provide results. In this frame of thought, my idea of using a single
    cell table did not seem more extreme than the idea of a triangle that
    looks like a straight line.

    Regards,

    Eustace

    --
    It ain't THAT, babe! - A radical reinterpretation
    http://www.geocities.com/itaintme_babe/itaintme.html
    Eustace, Feb 13, 2008
    #10
  11. Eustace wrote:

    > The main attraction of using <table> is the 3D borders that give the
    > impression of the content being encased in a frame. If I knew of a
    > way to create the same effect I would consider it. A solid border is
    > out of question. The possibility of using border-style is essential.


    You do not need to use a table for those (usually ugly) borders.

    Put this in your CSS:

    ..boxy {
    border-top: 8px outset #f66;
    border-left: 8px outset #f66;
    border-right: 8px outset #c30;
    border-bottom: 8px outset #c30;
    padding: 0.25em;
    }

    ...and assign it to a paragraph, or a div, in your HTML:

    <p class="boxy">This is a paragraph with borders.</p>

    Remember, if you want to emulate "sunlight", the top and left are the
    lighter colors, the bottom and right are darker. Use "inset" instead of
    "outset" to make it look like a hole.

    Super-wide borders are very distracting.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Feb 13, 2008
    #11
  12. Eustace

    Ben C Guest

    On 2008-02-13, Eustace <> wrote:
    [...]
    > The main attraction of using <table> is the 3D borders that give the
    > impression of the content being encased in a frame. If I knew of a way
    > to create the same effect I would consider it. A solid border is out of
    > question. The possibility of using border-style is essential.
    >
    > But I see that I can use border-style: outset with your code...


    Correct-- you should be able to put any kind of border on any element.

    > Now the main problem I have to solve is how to make the block as wide
    > as needed for the content. Thanks everybody for the ideas you gave me.


    Since you also want the blocks of content centered your options are, in
    descending order of aesthetic preference (which strangely enough is the
    same as ascending order of browser support):

    1. display: inline-block (KO)
    2. display: table (FKO)
    3. HTML tables (FKOE)
    4. Some kind of JavaScript solution (FKOE)

    K = Konqueror/Safari
    F = Firefox
    O = Opera
    E = Internet Explorer

    See also dorayme's page:

    http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html
    Ben C, Feb 13, 2008
    #12
  13. Eustace

    dorayme Guest

    In article <foukv9$vam$>,
    Eustace <> wrote:

    > At last I managed to make my webpage
    >
    > http://www.geocities.com/emfrilingos/fril
    >
    > fully compliant with html 4.01 Strict. But there is a slight issue that
    > leaves me unsatisfied:
    >
    > In the <head> I have defined a class table.poem{} as
    >
    > table.poem {
    > margin: 0 auto;
    > text-align: left;
    > border-width: 10px;



    You seem to like the look of

    <http://netweaver.com.au/alt/eustace.html> ?

    About your question, and to take some liberties, I would have
    thought:

    http://netweaver.com.au/alt/eustace2.html

    But if it was me, I would have done something like:

    http://netweaver.com.au/alt/eustace3.html

    Notice how for IE 6, I have had to reduce the width of the div
    from 33em to 26em! It beggars belief!

    --
    dorayme
    dorayme, Feb 13, 2008
    #13
  14. Eustace

    Bergamot Guest

    Beauregard T. Shagnasty wrote:
    >
    > .boxy {
    > border-top: 8px outset #f66;
    > border-left: 8px outset #f66;
    > border-right: 8px outset #c30;
    > border-bottom: 8px outset #c30;
    > }


    FYI, if you used just
    ..boxy {border: 8px outset #f66;}

    the browser would determine the top/left and bottom/right colors
    automatically. Ditto inset. The results would be the same as what you
    coded, though probably won't be the same across browsers.

    > <p class="boxy">This is a paragraph with borders.</p>


    Too bad that won't shrink-wrap the box, though. :(

    --
    Berg
    Bergamot, Feb 13, 2008
    #14
  15. Eustace

    Eustace Guest

    On 2008-02-13 17:25 dorayme wrote:
    > In article <foukv9$vam$>,
    > Eustace <> wrote:
    >
    >> At last I managed to make my webpage
    >>
    >> http://www.geocities.com/emfrilingos/fril
    >>
    >> fully compliant with html 4.01 Strict. But there is a slight issue that
    >> leaves me unsatisfied:
    >>
    >> In the <head> I have defined a class table.poem{} as
    >>
    >> table.poem {
    >> margin: 0 auto;
    >> text-align: left;
    >> border-width: 10px;

    >
    >
    > You seem to like the look of
    >
    > <http://netweaver.com.au/alt/eustace.html> ?
    >
    > About your question, and to take some liberties, I would have
    > thought:
    >
    > http://netweaver.com.au/alt/eustace2.html
    >
    > But if it was me, I would have done something like:
    >
    > http://netweaver.com.au/alt/eustace3.html
    >
    > Notice how for IE 6, I have had to reduce the width of the div
    > from 33em to 26em! It beggars belief!


    Thanks a lot! No, I prefer you first solution, though I will have to
    examine what you do with the other 2 too. I haven't thought yet why, but
    it has an added advantage to the first one of which I am not sure
    whether you are aware of: Over here, on my WinXp I use white text on
    blue background. In FF all three webpages are displayed black text on
    white background. In IE, however, the first displays as white text on
    blue background, but the other 2 have the box with black text on white
    background all right, but have the rest of the screen blue, which
    doesn't look very nice and certainly is not your intended effect (though
    I am sure there is a way that this can be taken care of). But the issue
    of colors on my webpage is another one that I still have to work on.
    Though I specify the colors in the body ccs code, it doesn't seem to
    work always, yesterday it did, today it didn't. I don't know why, but
    for now I had to add old code: <body text=navy bkground="#ccccff"> that
    is not in accordance with the 4.01 Strict rules...

    Based on earlier advice, I have already changed the meander separator
    line to:

    div.meander {
    margin-top: 30px;
    margin-bottom: 30px;
    height: 15px;
    width: 100%;
    border: 0px;
    padding: 0px;
    background-image:url("fril/meander.gif");
    }

    which is called in a single short line:

    <div class="meander"></div>

    In this particular case, it is certainly a simpler and more elegant
    solution to having to call:

    <table class="meander">
    <tr><td></td></tr>
    </table>

    Tomorrow I'll be working on the poem code.

    Cheers,

    Eustace

    --
    The car in a ditch/ the man on a tree/ the moon was full/ and so was he.
    Eustace, Feb 14, 2008
    #15
  16. Eustace

    Eustace Guest

    On 2008-02-13 17:14 Ben C wrote:
    > On 2008-02-13, Eustace <> wrote:
    > [...]
    >> The main attraction of using <table> is the 3D borders that give the
    >> impression of the content being encased in a frame. If I knew of a way
    >> to create the same effect I would consider it. A solid border is out of
    >> question. The possibility of using border-style is essential.
    >>
    >> But I see that I can use border-style: outset with your code...

    >
    > Correct-- you should be able to put any kind of border on any element.
    >
    >> Now the main problem I have to solve is how to make the block as wide
    >> as needed for the content. Thanks everybody for the ideas you gave me.

    >
    > Since you also want the blocks of content centered your options are, in
    > descending order of aesthetic preference (which strangely enough is the
    > same as ascending order of browser support):
    >
    > 1. display: inline-block (KO)
    > 2. display: table (FKO)
    > 3. HTML tables (FKOE)
    > 4. Some kind of JavaScript solution (FKOE)
    >
    > K = Konqueror/Safari
    > F = Firefox
    > O = Opera
    > E = Internet Explorer
    >
    > See also dorayme's page:
    >
    > http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html


    Wow! this is a great newsgroup! If I had asked for advice here a week
    ago I would probably have avoided a lot of work. You learn better, of
    course, when you find out by yourself, but still...

    Sorry for those who use other browsers, but I am focused on FF and IE. I
    suppose most who do not use regularly IE still keep one on the side for
    cases when it is needed - at least that is what I do. But I do think
    it's better to be W3C compliant - I would only express the hope that
    they will stop changing things very often, so the browsers and the
    website designers have time to follow them closely.

    Anyway, yesterday before posting the message here, at the very end of a
    few hours of working on the code I managed to break a few things and
    today I had first to set them right and then start improving on the
    basis of the suggestions I got here. I added border-spacing: 10px
    suggested by Ben. Yes, it's not supported by the IE, but it is W3C
    compliant and anyway the IE effect without it is not that bad. And as I
    write elsewhere, I already changed the code for the meander separator.

    The pages with the examples seem very useful. I only wish I had come
    across them a couple of days ago, when I googled a lot of pages looking
    for info.

    Thanks,

    Eustace

    --
    JS Date Calculator with original all-purpose code
    http://www.geocities.com/emfrilingos/js/datecalc.html
    Eustace, Feb 14, 2008
    #16
  17. Eustace wrote:

    > Sorry for those who use other browsers, but I am focused on FF and IE.
    > I suppose most who do not use regularly IE still keep one on the side
    > for cases when it is needed - at least that is what I do. ...


    What would you expect people who do not use Windows to do?

    If a site will not work unless IE is used, I just go elsewhere. I
    changed banks a couple years ago because of their IE-only web site.

    --
    -bts
    -Friends don't let friends drive Vista
    Beauregard T. Shagnasty, Feb 14, 2008
    #17
  18. Eustace

    dorayme Guest

    In article
    <8JWsj.224376$>,
    "Beauregard T. Shagnasty" <> wrote:

    > I
    > changed banks a couple years ago because of their IE-only web site.


    OK, you did. But let's go back in time and suppose that the bank
    with the IE-only offered you n% more interest on your dough. What
    I wanna know is this: what value of n for you to have stuck with
    them?

    --
    dorayme
    dorayme, Feb 14, 2008
    #18
  19. dorayme wrote:

    > "Beauregard T. Shagnasty" wrote:
    >> I changed banks a couple years ago because of their IE-only web site.

    >
    > OK, you did. But let's go back in time and suppose that the bank with
    > the IE-only offered you n% more interest on your dough. What I wanna
    > know is this: what value of n for you to have stuck with them?


    I can't actually say how much more n% it would have taken to keep me. As
    it turned out, the new bank (actually a credit union) offered higher
    rates of interest on every type of service available. Checking, savings,
    CDs, lower on loans and mortgages (though I didn't need any) and far
    lower fees, etc.

    And the new place was closer to home!

    Oh, when the IE-bank asked why I was leaving, I gave the reason, and the
    questioner had no clue what I was talking about. I told her to be
    absolutely sure to write this down and pass it along to management. This
    was about three years ago, and since I no longer have an account, I am
    not interested in seeing if they have yet changed their ways.

    --
    -bts
    -Friends don't let friends drive Vista
    Beauregard T. Shagnasty, Feb 14, 2008
    #19
  20. Eustace

    dorayme Guest

    In article
    <1N2tj.225479$>,
    "Beauregard T. Shagnasty" <> wrote:

    > dorayme wrote:
    >
    > > "Beauregard T. Shagnasty" wrote:
    > >> I changed banks a couple years ago because of their IE-only web site.

    > >
    > > OK, you did. But let's go back in time and suppose that the bank with
    > > the IE-only offered you n% more interest on your dough. What I wanna
    > > know is this: what value of n for you to have stuck with them?

    >
    > I can't actually say how much more n% it would have taken to keep me. As
    > it turned out, the new bank (actually a credit union) offered higher
    > rates of interest on every type of service available.


    So maybe you are on to something here B, if they are clueless
    about such things as making their website accessible (which is
    damn important thing, you would think), they are likely to be
    poor in other areas as well. I have noticed this sort of thing
    with films, if they are bad to begin with, they never really get
    good. (The converse is not true, either in films or banking). <g>

    --
    dorayme
    dorayme, Feb 14, 2008
    #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. Malderez Cédric

    Array & cellspacing

    Malderez Cédric, Sep 16, 2003, in forum: HTML
    Replies:
    1
    Views:
    795
    David Dorward
    Sep 16, 2003
  2. Tony Vella

    cellspacing question

    Tony Vella, Nov 17, 2003, in forum: HTML
    Replies:
    9
    Views:
    1,406
    Tony Vella
    Nov 18, 2003
  3. shank

    convert cellspacing to CSS

    shank, Jan 23, 2004, in forum: HTML
    Replies:
    8
    Views:
    22,342
    shank
    Jan 24, 2004
  4. Guest

    cellspacing = 0 ?

    Guest, Apr 9, 2004, in forum: HTML
    Replies:
    3
    Views:
    569
    Guest
    Apr 9, 2004
  5. Gnarlodious
    Replies:
    2
    Views:
    7,390
    Gnarlodious
    Apr 10, 2004
Loading...

Share This Page