<table> doesnt have a height attribute but still works?

Tim Warnock · Aug 31, 2003

according to html 4.01 it doesnt have a property: yet it works in
ie/mozilla?

what are we supposed to do to make a table using a height percentage?

ie:

+----------------------------+
| |
| |
| 100% x 60% |
| |
| |
| |
+----------------------------+
| 100% x 40% |
| |
+----------------------------+

EightNineThree · Aug 31, 2003

Tim Warnock said:
according to html 4.01 it doesnt have a property: yet it works in
ie/mozilla?

No it doesn't
<repost>
Here we see a 100 pct (height and width) table -
http://karlcore.com/100pcttable/100pctnodtd.php
Notice how this "works". Unfortunately, it only works because there is no
DTD. As such, it throws the browser into "Quirks mode".
Last I checked, it worked in all browsers.

This may be a suitable "workaround" for some people, but it is not for me. I
care about the quality of my work and I will not walk around topless with no
DTD.
This is the same exact page with an HTML 4.01 Strict DTD -
http://karlcore.com/100pcttable/100pctwithdtd.php
Notice that despite the fact that the "height" attribute remains on the
table element, it does not show up? This is because the browser is no
longer in "Quirks mode" but is rather following the DTD we have given to it.
(It is also still not valid markup because of the height attribute)

Now, there may be a solution to this issue, borrowed from our pal, Brucie
and a post he made to CIWAH -
http://karlcore.com/100pcttable/100pctcsswithdtd.php
This is 100% valid HTML 4.01 Strict and does what is intended.

Simply put - if you have to find a way to make something work - fix the
design.

Tim Warnock · Aug 31, 2003

is this a valid use then?

<table width="100%" border="1" cellpadding="3" style="height: 67%;">

it validates for 4.01 traditional and appears to work

--
Thanks
Tim Warnock

ISP Technical Manager
GetOnIt! Nationwide Internet.
1300 88 00 97
timoid (at) getonit.net.au

Richard · Aug 31, 2003

Tim Warnock wrote:>>

is this a valid use then?

<table width="100%" border="1" cellpadding="3" style="height: 67%;">

it validates for 4.01 traditional and appears to work

Height and width are "floating" variables. If you specify neither, both will
vary in accordance with content.
IMHO, height should never be a %. unless it's a nested table.
Unless you define the page size, how does height know what to use as 100%?

Toby A Inkster · Aug 31, 2003

Tim said:
<table width="100%" border="1" cellpadding="3" style="height: 67%;">

67% of what? This certainly doesn't mean 67% of the screen height -- it
means 67% of the body height. But how tall is the body? The body is only
as big as the elements that it contains -- possibly just this table. So
the body is the same height as the table. But then the table has to be 67%
of the height of the body, etc -- the height of each is defined in terms
of the other. Not a good situation to find yourself in.

Nico Schuyt · Aug 31, 2003

Tim said:
what are we supposed to do to make a table using a height percentage?

With CSS? See code below
(Tested in IE5.5 and Mozilla1. In fact in surprises me. Thought it was not
possible)
Regards, Nico

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
body {
text-align: center;
font-family: sans-serif;
margin: 10px;}
table {margin-left:auto; margin-right: auto; width: 100%; height: 100%}
..w30 {width: 30%;}
..w70 {width: 70%}
..h40 {height: 40%}
..h60 {height: 60%}
td, th {border: 1px solid black; color: black; background: blue}
</style>
</head>
<body>
<table>
<tr class="h60">
<th class="w30"> </th>
<th class="w70"> </th>
</tr>
<tr class="h40">
<td> </td>
<td> </td>
</tr>
</table>
</body
</html>

Nico Schuyt · Aug 31, 2003

Richard said:
IMHO, height should never be a %. unless it's a nested table.
Unless you define the page size, how does height know what to use as
100%?

Ehhh, is % of window size not logical?
Nico

David Dorward · Aug 31, 2003

Ehhh, is % of window size not logical?

It might be logical, but CSS doesn't have a special case for elements which
are children of the body.

The short version is: "If an element has height: 100% and its parent element
has height: auto then the element with height: 100% changes to height:
auto".

Nico Schuyt · Aug 31, 2003

David said:
Nico Schuyt wrote:

It might be logical, but CSS doesn't have a special case for elements
which are children of the body.
The short version is: "If an element has height: 100% and its parent
element has height: auto then the element with height: 100% changes
to height: auto".

Not sure I understand it correctly so forgive my stupid remarks

:
- 'height: auto' means that "the browser calculates the actual height" isn't
it?
I can't find the basis/formula of that calculation. Doesn't that makes the
result unpredictable?
- If no height of the parent (like 'body') is defined, and the child has
height: 100%, isn't that 100% of window size?
Regards, Nico

David Dorward · Aug 31, 2003

Nico said:
- 'height: auto' means that "the browser calculates the actual height"
isn't it?

The height of the element is dependent on its content.

I can't find the basis/formula of that calculation. Doesn't that makes the
result unpredictable?

Its as big as it needs to be

- If no height of the parent (like 'body') is defined, and the child has
height: 100%, isn't that 100% of window size?

No. The height of the parent (in this case "body") is defined - its the
default: auto. So the body is as big as it needs to be. When a height is
specified in percentages and the parent element has height: auto, then the
height: x% becomes height: auto.

The result is that the table gains height: auto, so the table is as tall as
it needs to be and no taller - which is the default anyway.

Nico Schuyt · Aug 31, 2003

David said:
Nico Schuyt wrote:

The height of the element is dependent on its content.

So, an empty body element has a height of zero?

Its as big as it needs to be

Confusing. What *is* needed? There must be a list of rules for that.
And isn't that browser dependant?

No. The height of the parent (in this case "body") is defined - its
the default: auto. So the body is as big as it needs to be. When a
height is specified in percentages and the parent element has height:
auto, then the height: x% becomes height: auto.

The result is that the table gains height: auto, so the table is as
tall as it needs to be and no taller - which is the default anyway.

In my code snippet I set the height property of the table to 100%. The
height of the body is not specified so that is the default 'auto'. So the
table ends up in 'auto' in this case, which seems to be window size. Is that
'what is needed'? And it is certainly not the default.
Nico

Nico Schuyt · Aug 31, 2003

David said:
Nico Schuyt wrote:

Sounds like a browser bug. The table should end up as tall as is
needed to hold the content inside and no more. Perhaps your browser
is running in Quirks (bug emulation) mode, check the DOCTYPE.

OK, OK it's the quirks mode (incomplete doctype 4.01 transitional)

Still not sure if I should be concerned about it:
About everyone sees what I want them to see
The doctype allows me to validate pages in W3C
Regards, Nico

Olrik Larsen · Sep 10, 2003

Hi EightNineThree and others !

I just followed your links regarding the height and percentage !

Try and look at the source below, you will probably notice that
the IFRAME is bigger than expected !

I know I should try to render the surrounding cells but, and
this is a big but, how can I do that, if I do not know the size
then how can I predict the size.

I use this very technique on the following site :
http://www.tra-tanr.dk/sumped
(It's on purpose that there are no DTD !)

As you can see from that site, the only firm size is the two
cells in the top of the table !
The other surrounding cells have text, and depending on user
settings on client and css settings, the size of the text might
vary a lot.

How does one actually acomplish to manage this with css ?

It would be great if the upcoming HTML and/or CSS languages
had something like align='client' (use entire client area) ;-)

BTW! What is the actual effect of setting html to the same as
body in your css ?

Thanks
Olrik Larsen
private: mailto:[email protected]
work: mailto:[email protected]
---------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>100% Table With CSS, Valid HTML Strict</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;}
table{width:100%;height:100%;border:3px solid red;}
iframe{width:100%;height:100%;}
</style>
</head>
<body>
<table>

<iframe src='percentheightpg2.html'

name='bigframe'></iframe></td></tr>
<tr valign='bottom'><td>blah</td><td align='right'>blah</td></tr>
</table>
</body>
</html>

---------------------------------------------------------------

Making sure this javascript code works	1	Nov 14, 2022
Need total amount displayed of data-price attribute from each table	2	Jul 3, 2022
How to have two html audio players on one page?	0	May 3, 2022
Please complete a task, I have one task for you	0	Apr 21, 2023
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019
Only one table shows up with the information	2	Mar 29, 2023
Border attribute not working	1	Sep 3, 2018
Help with Visual Lightbox: Scripts	2	May 3, 2023

<table> doesnt have a height attribute but still works?

Tim Warnock

EightNineThree

Tim Warnock

Richard

Toby A Inkster

Nico Schuyt

Nico Schuyt

David Dorward

Nico Schuyt

David Dorward

Nico Schuyt

Nico Schuyt

Olrik Larsen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads