Table height

hi, does anyone knows a workaround on this: I have this code, but the syntax is deprecated already. what i want is to display the whole length of the table.. but if i keep adding contents to the table i need to increase the height value.. i'm doing the wrong thing..but it displays fine in IE7.. but is there any work around on this.. please help.. thank you..

<div id="maintable">
<table border="0" cellpadding="0" cellspacing="0"  width="850px" height="800px" >
    <tr bgcolor="#55aaff" >    
	<td align="top"> {

cguan_77

Nearly a Posting Virtuoso

1,317 posts since Apr 2007

Reputation Points: 19

Solved Threads: 115

2 Years Ago

Simple table layout sample: controlling table layout using CSS and also serves as a valid XHTML 1.0 Strict document.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#internal" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Table Layout Sample</title>
<style id="internal" type="text/css" media="all">
/* <![CDATA[ */
html, body {
  border : none;
  font : normal normal normal 95%/1.4 Verdana, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  margin : 0;
  padding : 0;
  text-align : center;
  width : auto; }

body {
  background-color : #f0f0f0;
  color : #506070; }

table {
  border : none;
  border-collapse : collapse;
  height : inherit;
  min-height : 600px;
  width : 100% !important; }

td, tr {
  border : none;
  padding : 0; }


td {
  width : 100% !important;
  vertical-align : middle !important; }

div {
  border : none;
  margin : 0;
  padding : 0; }

div#main {
  margin : 0 auto;
  clear : both;
  height : inherit;
  min-height : 600px;
  width : 100%; }

div#MyDiv {
  margin : 0 auto;
  height : 200px !important;
  min-height : 200px;
  max-height : 201px;
  min-width : 400px;
  max-width : 401px;
  width : 400px !important; }

div#MyDiv div.tube {
  background-color : #f7f7f7;
  border : 1px solid #ccc;
  padding : 1em;
  height : inherit;
  text-align : center;
  overflow: hidden; }

/* ]]> */
</style>
</head>
<body>
<div id="main">
<table id="myTable" frame="void" rules="none" summary="Controlling table layout in CSS">
<tr><td>
<div id="MyDiv"><div class="tube">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div></div></td></tr>
</table>
</div> 
</body>
</html>

hope it helps...

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

2 Years Ago

Another example of using all table properties to control its layout and at the same time keeping the whole document valid.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#internal" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Complete Table Properties: Usage Example</title>
<style id="internal" type="text/css" media="all">
/* <![CDATA[ */
html, body {
  border : none;
  font : normal normal normal 95%/1.4 Verdana, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  margin : 0;
  padding : 0;
  text-align : center;
  width : auto; }

div {
  border : none;
  margin : 0;
  padding : 0; }

div#main {
  margin : 0 auto;
  clear : both;
  height : inherit;
  min-height : 600px;
  width : 100%; }


/* ]]> */
</style>
</head>
<body>
<div id="main">
<table title="Valid Table Properties using XHTML 1.0 Strict" dir="ltr" lang="en-US" xml:lang="en-US" id="maintable" style="height : 800px; margin : 0 auto;" width="100%" border="1" cellpadding="4" cellspacing="4" frame="border" rules="all" summary="Complete Table properties">
<caption>Complete Table properties example</caption>
<colgroup style="background-color : #eee;" align="left">
<col style="background-color : #aaa;" valign="middle" align="center" width="20%" />
<col valign="middle" align="center" width="80%" />
</colgroup>
<thead>
<tr><th>Table Header</th><td>ROW1</td></tr>
</thead>
<tfoot>
<tr><th>Table Footer</th><td>ROW3</td></tr>
</tfoot>
<tbody>
<tr><th>Table Body</th><td>ROW2</td></tr>
</tbody>
</table>
</div> 
</body>
</html>

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

2 Years Ago

Set the height of the cells, rather than the table.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182