SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast xiaohai's Avatar
    Join Date
    Apr 2003
    Location
    NE
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    question about table in XHTML

    Following code looks differnt in HTML and XHTML:

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    </head>

    <body>
    <table border="1" height="100%" width="100%">
    <tr>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    </tr>
    <tr>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    </tr>
    <tr>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    </tr>
    </table>
    </body>
    </html>

    When I add following code to before <html> tag, the whole table shrinked.
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Can anyone tell me why and how to solve the problem?
    Thanks.

  2. #2
    SitePoint Enthusiast vischo's Avatar
    Join Date
    Mar 2003
    Location
    Chicago, IL
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the issue is that the browser ignores the width="100%" attribute your XHTML version. Try using CSS and set:

    Code:
      table {
    	 width: 100%;
    }
    while using XHTML code for structure. That should fix the issue.

  3. #3
    SitePoint Enthusiast xiaohai's Avatar
    Join Date
    Apr 2003
    Location
    NE
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok,here's my entile code:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    </head>
    
    <body>
    <table style="height: 100%; width: 100%" border="1">
    <tr>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    </tr>
    <tr>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    </tr>
    <tr>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    </tr>
    </table>
    </body>
    </html>
    Strangely it showed different result in IE and Mozilla.
    Everything worked fine in IE. But in Mozilla, the height
    of the table shrinked considerably.
    And idea?
    Last edited by xiaohai; Apr 28, 2003 at 22:37.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Funnily enough IE6 and Mozilla will have the same display in quirks mode and standards mode . In quirks mode the height will be 100% but in standards mode the height will collapse.

    As you are using the xml prologue (the first line of your code) there's a major bug in IE6 that sends IE6 into quirks mode when it meets the prologue. The answer is to leave it out as it is optional ( just ensure you have the character encoding in the meta tag).

    However all this will do is to make both display the same i.e. a collapsed table. This is how xhtml the xhtml spec meant it to be as tables are used for tabular data and not layout. If you take out the doctype then Mozilla will revert to quirks mode and you will get a full size table.

    I don't think there's a complete solution other than not to use tables for layout but I think this code will make IE6 and Mozilla 1.2. expand the table to 100% (although Opera and other browsers could have different results.)

    Code:
    <style type="text/css">
    html, body, table {
      margin: 0; padding: 0;
      width: 100%; height: 100%;
     }
    </style>
    Then get rid of the inline style in your table tag.

    Sorry I couldn't find a better solution.

    Paul

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    This question gets asked a lot and it is quite true you cannot use percentages to define the height of a <table> and except it to fill the canvas since CSS-2 does not define what percentage % values of 'height' refer to when specified for table cells thus typically it refers to the table itself and its internal contents.

  6. #6
    SitePoint Enthusiast abbey's Avatar
    Join Date
    Apr 2003
    Location
    Chicago
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    That is telling your browser how to render your code. Technically the url there can be anything, but most people use the published standard. Depending on how your browser was coded, it should render according to how the Document Type is defined in the referenced url above.

    Clear as mud?
    Doctype explained.

    There are enough differences that if you code to the 4.01, then use that Doc Type otherwise the XHTML elements will throw some browsers into quirks mode (and vice versa).
    <abbey />
    HTML/XHTML/CSS coding
    Abbey Ink

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To code a table height, u might want to do

    style="height: 300px"

    to set a minimum height of the table

    Also if you wanna centre a table this topic might be useful to you also

    http://www.sitepoint.com/forums/show...15#post1236215

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why have you dug this thread up its over a year old

  9. #9
    SitePoint Member makapangyarihan's Avatar
    Join Date
    May 2004
    Location
    Philippines
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I think it's because XHTML DTD does not support the height attribute for the table element.


Bookmarks

Posting Permissions

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