Home > Computers and Internet > Set Height 100 % of table in html

Set Height 100 % of table in html

These are
some change in page , table is able to display 100 % height.

 

Step1.
Change DocType of Page

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

Step 2 .
Include  an CSS in a page itself inside head section

 

   
<style type="text/css">

       
html, body

       
{

           
margin: 0;

           
padding: 0;

           
height: 100%;

       
}

    </style>

 

Step3.
Include element in table

 

<table align="center"
bgcolor="White"
style="width: 700px; height: 100%" border="0"

        cellpadding="0"
cellspacing="0">
</table>

 

Example..

 

Below is
the sample html code which will render in the mentioned screen.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

     
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

   
<meta http-equiv="imagetoolbar"
content="no">

   
<meta name="MSSmartTagsPreventParsing"
content="true">

   
<title>Standards Compliance Mode with CSS Rendering</title>

   
<style type="text/css">

       
html, body

       
{

           
margin: 0;

           
padding: 0;

           
height: 100%;

       
}

   
</style>

</head>

<body bgcolor="#f0f0f0">

   
<table align="center"
bgcolor="White"
style="width: 700px; height: 100%" border="0"

       
cellpadding="0"
cellspacing="0">

       
<tr valign="top">

           
<td align="center"
style="color: #000000; font-family: Arial; font-size: large;"

               
bgcolor="#D3D3BE"
height="25">

               
XYZ

           
</td>

       
</tr>

       
<tr valign="top">

           
<td align="left"
valign="top"
style="color: #000000; font-family: Arial; font-size: small;">

               
Thank you for your interest in the Page<br />

               
/**********/

               
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     
"http://www.w3.org/TR/html4/loose.dtd">

               
<br />

  
             html,
body { margin: 0; padding: 0; height: 100%; }

               
<br />

               
These are the basic info that is requird for show 100 % height<br />

               
/**********/

           
</td>

       
</tr>

       
<tr valign="bottom"
bgcolor="#D3D3BE">

           
<td style="color: #000000; font-size: small; font-family: Arial; height: 25px;" align="center"

               
bgcolor="#D3D3BE">

               
Copyright 2010 © XYZ, Inc. All Rights Reserved.

           
</td>

       
</tr>

   
</table>

</body>

</html>


Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: