0

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"> {
3
Contributors
5
Replies
6
Views
9 Years
Discussion Span
Last Post by essential
0

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

0

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>
0

@ MidiMagic,

Don't you have anything to say, asside from commenting every post?

Just try to put a little effort on it, rather than providing self belief solutions...

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.