question about table in XHTML

**xiaohai** · Apr 28, 2003 19:04

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.

**vischo** · Apr 28, 2003 20:25

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.

**xiaohai** · Apr 28, 2003 21:46

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?

**Paul O'B** · Apr 29, 2003 03:32

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

**xhtmlcoder** · Apr 29, 2003 06:18

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.

**abbey** · Apr 29, 2003 11:34

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).

**Digital Oracle** · May 25, 2004 05:55

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

**Paul O'B** · May 25, 2004 06:57

Hi,

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

**makapangyarihan** · May 25, 2004 19:53

Hi,

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

User Tag List

Thread: question about table in XHTML

Thread Tools

Display

question about table in XHTML

Bookmarks

Bookmarks

Posting Permissions