www.webdeveloper.com
Results 1 to 12 of 12

Thread: Tables in Opera

  1. #1
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    24

    Tables in Opera

    I'm going a bit nuts here. Can anyone explain how Opera 6.0.4 decides to lay out the columns of tables? It seems to want to expand the columns I least want and is totally different from all other browsers I am testing on (NS 4.7, 6, 7, IE 4, 5, 6).

    e.g. The following table in Opera expands the first column (label 1) to fill all the blank space. Other browsers space it evenly.
    PHP Code:
    <table width="100%">
    <
    tr>
    <
    th>label 1</th>
    <
    td><input type="text" size="10" name="blah"/></td>
    <
    td>&nbsp;</td>
    <
    th>label 2</th>
    <
    td><input type="text"size="10" name="blah2"/></td>
    </
    tr>
    </
    table
    In another table, which has links in each cell except one, it spaces the linked cells evenly and squashes the non-link cell.

    Is there any way to get Opera to space things the way you want them to?

  2. #2
    Join Date
    Sep 2003
    Posts
    187
    Try a spacer gif??

    MNS

  3. #3
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    From the HTML 4.01 Specification:
    Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
    http://www.w3.org/TR/html4/struct/tables.html#h-11.1
    Moreover, you need to make use of the LABEL element.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  4. #4
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    24
    Thanks, MNS, but no images are allowed on my website.

    <sigh> I was so tempted to say "and YES I am setting out lots of tabular data!!!!" on the original post 'cause I knew someone would decide to tell me off instead of trying to answer the question. I really should have put it in.

    Most of the website I'm developing is for tabular data. Lots and lots of data. The other part is for input forms to add the data. I need this to work on old browsers as well as new and CSS-P doesn't really work on NS4.7.

    So, back to my original question, how does the Opera rendering engine decide to lay out its tables? Is the label tag going to make it lay things out nicely?

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    And I go back to my original answer, mark up the page properly.

    1) Start with a page properly marked up in HTML 4.01 Strict. Use the TABLE element only for tabular data. At this point your page will be a bit drab but it will work on all browsers.

    2) Add presentation using CSS. The page will work on browsers that do not understand CSS because you have carefully followed 1 above. Browsers the understand CSS1 and not CSS2 present a small challenge. Start with a CSS1 style sheet and make use of the @import rule to hide things from those browsers. The idea is that you end up with three pages from one.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    Originally posted by careyf
    I need this to work on old browsers as well as new and CSS-P doesn't really work on NS4.7
    Seems to me you misundersand what working site is...
    Last edited by Vladdy; 09-24-2003 at 11:55 AM.
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  7. #7
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    24
    Seems to me you misundersand what working site is...
    I personally understand the difference, but can you explain to my bosses & my users why things look really bad on what is a comparably new browser?

    1) Start with a page properly marked up in HTML 4.01 Strict. Use the TABLE element only for tabular data. At this point your page will be a bit drab but it will work on all browsers.
    This isn't true actually. The table problem also happens when you are laying out strictly tabular data on Opera 6.04... first column is far left and fills up all the padding, and the other columns get thrown to the far right and squashed up.

    2) Add presentation using CSS. The page will work on browsers that do not understand CSS because you have carefully followed 1 above. Browsers the understand CSS1 and not CSS2 present a small challenge. Start with a CSS1 style sheet and make use of the @import rule to hide things from those browsers. The idea is that you end up with three pages from one.
    I am using CSS for presentation, but compromising and using tables as well (HTML 4.0.1 transitional).

    Anyway, I've noticed in many posts and not just this one, that people respond to table questions simply with 'use CSS'. Can we please give examples of what would work across all browsers instead of just preaching? This would help all us CSS-challenged people.

  8. #8
    Join Date
    Sep 2003
    Posts
    187
    People are not CSS chalenged, browsers are. Especially the latest piece o work from M$. IE 6.

    Making a site work cross browser in css without using a javascript sniffer and serving up a stylesheet that a particular browser will not choke on seems to be the only way.

    I have a business site. I only do html 4.01 transitional and use deprecated tags etc(no tables for layout thoug. because it works in all browsers without the use of javascript. I cannot afford to have someonee come to my site and go away without seeing it because CSS support in their browser is horrible, and yes I mean IE, any version or platform you pick.

    NN6x+, Mozilla and the latest in Opera, Safari and Konqueror good luck making something that will work in all of them and not be extremely simple.

    Until browser support gets better, or there is a mass exodus from the use of IE, you really have a hard time making a site in CSS cross browser. HTML 401 transitional is VALID coding and can work in IE 3x to IE 6, NN4 to NN7...go for it for now.

    MNS

  9. #9
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,148
    IE isn't all that bad. Particularly if you use basic css.
    In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
    "And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.


    Web Design Faq? | W3C | Validator | Accessibility testing | Speed up your PC | Wura | Box Model Research

  10. #10
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    24
    Oh.... just found out something... Opera 6 doesn't support the LABEL tag.

  11. #11
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Originally posted by careyf
    Oh.... just found out something... Opera 6 doesn't support the LABEL tag.
    1)The LABEL element is there for non-visual user agents, to associate the label with the form element. This is especially important if you insist on breaking the rules and employ TABLE elements for layout.

    2) Opera 7 recognizes it just fine.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  12. #12
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    24
    I think it's rather silly to need to justify everything. I need to break the rules so I would like some help.

    There is no requirement for my project to provide for the visually impaired. There IS a requirement for speed, cross-browser compatability & to serve up tabular data while still adhering to set GUI guidelines. All of this against a tight deadline.

    If someone could provide me an example of exactly how to build a form like this (but with more rows) that doesn't use tables but will still work across all my browsers without the use of a sniffer or a CSS per browser, I would be very very happy to use it. In the meantime HTML Transitional will have to do.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles