space under text in a table

Discussion in 'HTML' started by mcsting@rogers.com, Feb 26, 2007.

  1. Guest

    Hi folks,

    I'm an amateur webpage designer. I've recently set up a page and am
    trying to see if there's a solution to something I've noticed when I
    view my page. In Internet Explorer and icab, it shows the way I would
    like, but in Safari and Firefox, I see a problem.

    My webpage is: http://www.worldwideaccessiblewashrooms.com

    At the top, I have the webpage title in a table. In Safari and
    Firefox, there is more space on the bottom of the text inside the
    table than on the top. I used a straightforward table html:

    <center>
    <table bgcolor="#f2e891" border="0" style="border: 3px solid black;">
    <tr>
    <td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>
    </tr>
    </table>
    </center>

    Is there a way I can change this so that there is equal space above
    and below the text inside the table box?

    Thanks![/url]
    , Feb 26, 2007
    #1
    1. Advertising

  2. On 25 Feb 2007 19:26:28 -0800, wrote:

    > <td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>
    >
    > Is there a way I can change this so that there is equal space above
    > and below the text inside the table box?


    <h2 style="margin:0.25em;">Worldwide .... might help here.

    Do you know this heading is before <body> ? It should be after
    (probably won't affect the display however).

    --
    Steven
    Steven Saunderson, Feb 26, 2007
    #2
    1. Advertising

  3. On Mon, 26 Feb 2007 14:40:14 +1100, Steven Saunderson <>
    wrote:

    > Do you know this heading is before <body> ? It should be after
    > (probably won't affect the display however).


    A better solution would be to move the <body ...> tag from line 2 to
    after the </head> tag and then delete the <body> tag after the table.

    --
    Steven
    Steven Saunderson, Feb 26, 2007
    #3
  4. Ranter Guest

    On Feb 25, 10:40 pm, Steven Saunderson <> wrote:
    > On 25 Feb 2007 19:26:28 -0800, wrote:
    >
    > > <td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>

    >
    > > Is there a way I can change this so that there is equal space above
    > > and below the text inside the table box?

    >
    > <h2 style="margin:0.25em;">Worldwide .... might help here.
    >
    > Do you know this heading is before <body> ? It should be after
    > (probably won't affect the display however).
    >
    > --
    > Steven


    That seems to have done the spacing trick, thanks a lot! I have been
    using Taco html editor on my mac and when I open a new document, there
    is some html already in there, and the heading is automatically set up
    to be before the body. Weird.
    Ranter, Feb 26, 2007
    #4
  5. Ranter Guest

    On Feb 25, 10:50 pm, "Ranter" <> wrote:
    > On Feb 25, 10:40 pm, Steven Saunderson <> wrote:
    >
    > > On 25 Feb 2007 19:26:28 -0800, wrote:

    >
    > > > <td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>

    >
    > > > Is there a way I can change this so that there is equal space above
    > > > and below the text inside the table box?

    >
    > > <h2 style="margin:0.25em;">Worldwide .... might help here.

    >
    > > Do you know this heading is before <body> ? It should be after
    > > (probably won't affect the display however).

    >
    > > --
    > > Steven

    >
    > That seems to have done the spacing trick, thanks a lot! I have been
    > using Taco html editor on my mac and when I open a new document, there
    > is some html already in there, and the heading is automatically set up
    > to be before the body. Weird.


    Hmmm, I seem to have spoke too soon, sort of. The spacing problem is
    now fixed, and the page is showing up fine in Safari, Firefox and
    iCab. However, in IE, "Washrooms" has gotten pushed down to a 2nd line
    in the table box.
    Ranter, Feb 26, 2007
    #5
  6. On 25 Feb 2007 20:19:37 -0800, "Ranter" <> wrote:

    > Hmmm, I seem to have spoke too soon, sort of. The spacing problem is
    > now fixed, and the page is showing up fine in Safari, Firefox and
    > iCab. However, in IE, "Washrooms" has gotten pushed down to a 2nd line
    > in the table box.


    The same happens here but not until the window is about 450px wide.
    This is as it should be. You could force it to stay on one line but
    then the page won't be able to reflow for narrow windows as it does now.

    Try <h2 style="margin:0.25em 0;"> if you like. But really you should
    fix the misplaced <body> tags first. This will help the validity of the
    page and might work wonders.

    Check <http://validator.w3.org/> and try to fix all the errors.

    --
    Steven
    Steven Saunderson, Feb 26, 2007
    #6
  7. dorayme Guest

    In article
    <>,
    wrote:

    > Hi folks,
    >
    > I'm an amateur webpage designer. I've recently set up a page and am
    > trying to see if there's a solution to something I've noticed when I
    > view my page. In Internet Explorer and icab, it shows the way I would
    > like, but in Safari and Firefox, I see a problem.
    >
    > My webpage is: http://www.worldwideaccessiblewashrooms.com
    >
    > At the top, I have the webpage title in a table. In Safari and
    > Firefox, there is more space on the bottom of the text inside the
    > table than on the top. I used a straightforward table html:
    >
    > <center>
    > <table bgcolor="#f2e891" border="0" style="border: 3px solid black;">
    > <tr>
    > <td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>
    > </tr>
    > </table>
    > </center>
    >
    > Is there a way I can change this so that there is equal space above
    > and below the text inside the table box?
    >
    > Thanks![/url]


    I'm afraid this mark up is quite jumbled up. From failure to
    separate instructions with semicolons where it is required (look
    at the first table css) to many other and worse individual
    mistakes. Nearly all your layout is enclosed in a <p>? It hardly
    counts as a paragraph. And a table is not really needed to layout
    your page (though this in itself is not as bad as doing it badly)

    Time to forget about your editor for a while and go to

    <http://www.htmldog.com/>

    Learn about separating the html from the css. Your cause is worth
    it...

    --
    dorayme
    dorayme, Feb 26, 2007
    #7
  8. wrote :
    > Hi folks,
    >
    > I'm an amateur webpage designer. I've recently set up a page and am
    > trying to see if there's a solution to something I've noticed when I
    > view my page. In Internet Explorer and icab, it shows the way I would
    > like, but in Safari and Firefox, I see a problem.
    >
    > My webpage is: http://www.worldwideaccessiblewashrooms.com
    >
    > At the top, I have the webpage title in a table.


    Why do you want to use a table for that page title? Your title
    "Worldwide Wheelchair Accessible Washrooms" has nothing, absolutely
    nothing to do with tabular data.

    <h1 style="text-align: center; border: 3px solid black;">Worldwide
    Wheelchair Accessible Washrooms</h1>

    will meet your design request in all CSS-capable browsers.

    In Safari and
    > Firefox, there is more space on the bottom of the text inside the
    > table than on the top.


    That's most likely because text sits on the baseline and browsers must
    provide sufficient space for descenders (g, y, p, q, j) and underlining.

    I used a straightforward table html:
    >
    > <center>


    Using Web Standards in your Web Pages
    # 2.2.3.2 I use <center> or align="center". How to align with CSS?
    http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages

    > <table bgcolor="#f2e891" border="0" style="border: 3px solid black;">
    > <tr>
    > <td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>
    > </tr>
    > </table>
    > </center>
    >


    All of the above can be replaced with

    <h1 style="text-align: center; border: 3px solid black;">Worldwide
    Wheelchair Accessible Washrooms</h1>

    Your webpage certainly needs some cleaning up with a validator too. As
    mentioned by others, <body> must follow <head>..</head>: you have a case
    of improper nesting. Proper webpage code structure:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>... document title ...</title>
    </head>
    <body>
    ....
    </body>
    </html>

    You could use some 2 columns CSS template instead of using tables.

    Visit the webpage in my signature for help.

    Gérard
    --
    Using Web Standards in your Web Pages (Updated Dec. 2006)
    http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Feb 26, 2007
    #8
  9. On Mon, 26 Feb 2007 01:46:23 -0500, Gérard Talbot
    <> wrote:

    > <h1 style="text-align: center; border: 3px solid black;">Worldwide
    > Wheelchair Accessible Washrooms</h1>
    >
    > will meet your design request in all CSS-capable browsers.


    The problem with this is that the bordered area is the entire window
    width rather than just the text. Is there a simple way to achieve the
    result his table effort is now ?

    --
    Steven
    Steven Saunderson, Feb 26, 2007
    #9
  10. Scripsit Gérard Talbot:

    > Why do you want to use a table for that page title? Your title
    > "Worldwide Wheelchair Accessible Washrooms" has nothing, absolutely
    > nothing to do with tabular data.


    First, I'd like to point out that the word "title" is ambiguous in HTML
    contexts. It could refer to the external title of a page (the <title>
    element), to an advisory, tooltip-like text attached to an element (via a
    title attribute), or some of the many heading-like elements like <h1> thru
    <h6>, or <caption>, or <th>. So it's better to refer to the <h1> element as
    the main heading (or page heading).

    > <h1 style="text-align: center; border: 3px solid black;">Worldwide
    > Wheelchair Accessible Washrooms</h1>


    No, it's not quite that simple. The current design makes the box as wide as
    the text (plus padding and border), whereas an <h1> element by default
    occupies the entire available width (normally, canvas width minus some
    paddings or margins of the <body> element). I'm afraid a single-cell table
    is the simplest way to achieve that (in a way that works on most browsers).
    For a CSS solution, you would probably have to use artificial <span> markup
    (<h1><span>...</span></h1>) and set the border and background for the
    <span>.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 26, 2007
    #10
  11. Roy A. Guest

    Gérard Talbot skrev:

    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html lang="en">
    > <head>
    > <title>... document title ...</title>
    > </head>
    > <body>
    > ...
    > </body>
    > </html>
    >
    > You could use some 2 columns CSS template instead of using tables.


    Sure you could. This should be simple, but what would you gain. And
    witch html editor do you suggest?
    Roy A., Feb 26, 2007
    #11
  12. Roy A. Guest

    Jukka K. Korpela skrev:
    > Scripsit Gérard Talbot:


    > > <h1 style="text-align: center; border: 3px solid black;">Worldwide
    > > Wheelchair Accessible Washrooms</h1>

    >
    > No, it's not quite that simple. The current design makes the box as wide as
    > the text (plus padding and border), whereas an <h1> element by default
    > occupies the entire available width (normally, canvas width minus some
    > paddings or margins of the <body> element). I'm afraid a single-cell table
    > is the simplest way to achieve that (in a way that works on most browsers).
    > For a CSS solution, you would probably have to use artificial <span> markup
    > (<h1><span>...</span></h1>) and set the border and background for the
    > <span>.


    Another CSS solution, the other way around (with 'display:inline'):
    <div style="text-align:center; margin: 1.5em 1.5em">
    <h1 style="font-size:x-large; border: 3px solid black; padding:
    0.25em; background-color:#f2e891; 0.25em; display:inline;">Worldwide
    Wheelchair Accessible Washrooms</h1>
    </div>
    Roy A., Feb 26, 2007
    #12
  13. Andrew Guest

    On Sun, 25 Feb 2007 19:26:28 -0800, mcsting wrote:

    > Hi folks,
    >
    > I'm an amateur webpage designer. I've recently set up a page and am
    > trying to see if there's a solution to something I've noticed when I
    > view my page. In Internet Explorer and icab, it shows the way I would
    > like, but in Safari and Firefox, I see a problem.
    >
    > My webpage is: http://www.worldwideaccessiblewashrooms.com


    snip>>>>>>>

    Hi,

    I suspect that you are asking the wrong question. Have you thought of
    using a css design rather than struggle with tables? I have done a quick
    mock-up at:

    http://people.aapt.net.au/~adjlstrong/test.html

    This is a flexible design that is W3C validated and contains almost all
    of your original design ideas. Needs a lot of work yet but the basic idea
    is there :) Much easier than wrestling with tables and spacing!

    Great idea incidentally, my wife is a paraplegic so I know the problems.

    All the best,

    Andrew (a fellow amateur webpage designer)

    --
    A: Because it disturbs the logical flow of the message.
    Q: Why is top posting frowned upon?
    Andrew, Feb 26, 2007
    #13
  14. Andy Dingley Guest

    On 26 Feb, 03:26, wrote:

    > My webpage is: http://www.worldwideaccessiblewashrooms.com


    Great idea but:

    * The HTML is all over the place. Find a good tutorial, read it, and
    pay particular attention to sections on "validity", "validation" and
    "semantic markup". Lately I've been recomending O'Reilly's "Head
    First HTML with CSS & XHTML" as the best around.

    You just can't get anywhere on cross-browser stability until you've
    addressed basic validity.


    * "Washroom" is too US-centric a term. I don't need a wash or a bath
    damnit, I need a toilet!


    In memory of the late CountB, how about also checking just what sort
    of wheelchairs these places are accessible for? It's one thing to find
    that a place is "accessible" meaning that it has ramps, but some
    wheelchair users are in lay-down chairs rather than sit-up chairs, and
    these need more space to manouevre.
    Andy Dingley, Feb 26, 2007
    #14
  15. Andy Dingley Guest

    Andy Dingley, Feb 26, 2007
    #15
  16. Jukka K. Korpela wrote :
    > Scripsit Gérard Talbot:
    >
    >> Why do you want to use a table for that page title? Your title
    >> "Worldwide Wheelchair Accessible Washrooms" has nothing, absolutely
    >> nothing to do with tabular data.

    >
    > First, I'd like to point out that the word "title" is ambiguous in HTML
    > contexts. It could refer to the external title of a page (the <title>
    > element), to an advisory, tooltip-like text attached to an element (via
    > a title attribute), or some of the many heading-like elements like <h1>
    > thru <h6>, or <caption>, or <th>. So it's better to refer to the <h1>
    > element as the main heading (or page heading).


    I agree with what you say. I kept using the terminology of the original
    poster so that he wouldn't feel disoriented.

    [snipped]

    > For a CSS solution, you would probably have to
    > use artificial <span> markup (<h1><span>...</span></h1>) and set the
    > border and background for the <span>.


    Good point here too.

    Gérard
    --
    Using Web Standards in your Web Pages (Updated Dec. 2006)
    http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Feb 26, 2007
    #16
  17. Roy A. wrote :
    > Gérard Talbot skrev:
    >
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >> <html lang="en">
    >> <head>
    >> <title>... document title ...</title>
    >> </head>
    >> <body>
    >> ...
    >> </body>
    >> </html>
    >>
    >> You could use some 2 columns CSS template instead of using tables.

    >
    > Sure you could. This should be simple, but what would you gain.


    Well, improved accessibility, easier code maintenance, smaller webpage
    (which brings many benefits), etc

    Top seven reasons to avoid tables for layout
    http://www.workingwith.me.uk/table_free/seven_reasons_to_go_table_free

    Why tables for layout is stupid. Problems defined, solutions offered.
    Most possibly the best resource on this issue covering all aspects: it
    was a seminar presentation, part of a conference in 2003. Translated in
    12 other languages.
    http://www.hotdesign.com/seybold/

    Table-based webpage design versus CSS-based webpage design: resources,
    explanations and tutorials
    http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

    And
    > witch html editor do you suggest?


    Personally, I use an advanced text editor and manually code all my
    webpages. When I use an HTML editor, I use KompoZer 0.77 mostly because
    I can use the latest HTML Tidy (HandCoder 0.3.4) to pretty print the
    code. When Composer 2 is released, I'll probably use it.

    Gérard
    --
    Using Web Standards in your Web Pages (Updated Dec. 2006)
    http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Feb 26, 2007
    #17
  18. dorayme Guest

    In article <>,
    Andrew <> wrote:

    > > I'm an amateur webpage designer. I've recently set up a page and am
    > > trying to see if there's a solution to something I've noticed when I
    > > view my page. In Internet Explorer and icab, it shows the way I would
    > > like, but in Safari and Firefox, I see a problem.
    > >
    > > My webpage is: http://www.worldwideaccessiblewashrooms.com

    >
    > I suspect that you are asking the wrong question. Have you thought of
    > using a css design rather than struggle with tables? I have done a quick
    > mock-up at:
    >
    > http://people.aapt.net.au/~adjlstrong/test.html
    >
    > This is a flexible design that is W3C validated and contains almost all
    > of your original design ideas.


    Nice, well done.


    > Needs a lot of work yet


    Really? What is it that you want from the world if this perfectly
    good and simple and adequate layout "needs a lot of work"?

    --
    dorayme
    dorayme, Feb 26, 2007
    #18
  19. Jim S Guest

    On Mon, 26 Feb 2007 13:34:33 -0500, Gérard Talbot wrote:

    > Roy A. wrote :
    >> Gérard Talbot skrev:
    >>
    >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >>> "http://www.w3.org/TR/html4/strict.dtd">
    >>> <html lang="en">
    >>> <head>
    >>> <title>... document title ...</title>
    >>> </head>
    >>> <body>
    >>> ...
    >>> </body>
    >>> </html>
    >>>
    >>> You could use some 2 columns CSS template instead of using tables.

    >>
    >> Sure you could. This should be simple, but what would you gain.

    >
    > Well, improved accessibility, easier code maintenance, smaller webpage
    > (which brings many benefits), etc
    >
    > Top seven reasons to avoid tables for layout
    > http://www.workingwith.me.uk/table_free/seven_reasons_to_go_table_free
    >
    > Why tables for layout is stupid. Problems defined, solutions offered.
    > Most possibly the best resource on this issue covering all aspects: it
    > was a seminar presentation, part of a conference in 2003. Translated in
    > 12 other languages.
    > http://www.hotdesign.com/seybold/
    >
    > Table-based webpage design versus CSS-based webpage design: resources,
    > explanations and tutorials
    > http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html
    >
    > And
    >> witch html editor do you suggest?

    >
    > Personally, I use an advanced text editor and manually code all my
    > webpages. When I use an HTML editor, I use KompoZer 0.77 mostly because
    > I can use the latest HTML Tidy (HandCoder 0.3.4) to pretty print the
    > code. When Composer 2 is released, I'll probably use it.
    >
    > Gérard


    It's all very well, but I have trawled through several tutorials and with my
    page layout I cannot for the life of me see how to produce a page like my
    homepage without using a table or indeed the other pages without frames.
    --
    Jim S
    Tyneside UK
    http://www.jimscott.co.uk
    Jim S, Feb 26, 2007
    #19
  20. Jim S a écrit :

    > It's all very well, but I have trawled through several tutorials and with my
    > page layout I cannot for the life of me see how to produce a page like my
    > homepage without using a table or indeed the other pages without frames.


    > Jim S
    > Tyneside UK
    > http://www.jimscott.co.uk


    Jim, we're far from the topic of "space under text in a table" here. If
    you want to post your issue in
    alt.html and comp.infosystems.www.authoring.stylesheets discussion
    newsgroups with a followup-to set to
    comp.infosystems.www.authoring.stylesheets
    then, I'm sure, you will get recommendations, tips and advices on how to
    achieve your page layout with CSS and without resorting to tables.

    Gérard
    --
    Using Web Standards in your Web Pages (Updated Dec. 2006)
    http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Feb 26, 2007
    #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. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,883
    Bryan Bullard
    Jul 11, 2003
  2. Christian Seberino
    Replies:
    21
    Views:
    1,643
    Stephen Horne
    Oct 27, 2003
  3. Ian Bicking
    Replies:
    2
    Views:
    1,005
    Steve Lamb
    Oct 23, 2003
  4. Ian Bicking
    Replies:
    2
    Views:
    716
    Michael Hudson
    Oct 24, 2003
  5. sdf
    Replies:
    3
    Views:
    1,895
Loading...

Share This Page