Controlling row height in a Table 1

shaunk · Feb 7, 2008

I am studying ASP.net and am mystified by the behaviour of tables. I am on my way to learning CSS to control page layout, but want to do the examples in tables and CSS. In the code that follows, I am not sure why I cannot control the height of the rows. The table has 3 rows, the middle one with two colums. I want the first row to be 10% of the page, the second row 80% and the third row 10%. It looks OK in design view using VWD Express, but when rendered to the page, the 3 rows occupy about 10% of the page. Is there anyway to do this.

Code:

<body>
    <form id="form1" runat="server">
	<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; position: static; height:100%">
	<tr>
        <td colspan="2" style="height: 10%; background-color: beige">	This is the Header text</td>			</tr>
       <tr>
	<td style="width: 20%; height: 80%; 
           background-color: azure">
	this is a test</td>
       <td style="width: 80%; background-color:gainsboro">so is this
       </td>
       </tr>
       <tr>
       <td colspan="2" style="height: 10%; background-color: paleturquoise">this is a copyright test &copy 
       </td></tr>
	</table>
    <div>
    
    </div>
    </form>
</body>

The risk with keeping an open mind is having your brains fall out.
Shaunk

Vragabond · Feb 7, 2008

According to HTML/CSS specs defined by W3C, height of an element defaults to auto, or as high as the content within it. If you specify a fixed height (in pixels or other clearly defined units) then the element will have the specified height. Logically, if you use percentage to specify the height, that percentage will be relative to the height of the parent element. Your table's parent element is a form and the form has no height specified. As you know (from reading about it above), that means the form is only as high as its content (its height defaults to auto). So your table is 100% of the auto height of the form, which is in itself auto. In order to persuade elements to be 100% high, you need to make all the preceding elements 100% (or a fixed unit value) high as well. In your scenario that would include a form, body and html.

Height issue aside, there is absolutely no gain in learning how to layout page with tables if you plan on learning how to do it properly, via general blocks (divs) and css. It can actually be detrimental to your future developing with css -- most of us who used to layout pages with tables had to unlearn that knowledge first before embracing the better way of doing it.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Controlling row height in a Table 1

shaunk

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor