Member Avatar for cguan_77

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
  • 153 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

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

Member Avatar for essential

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>
Member Avatar for MidiMagic

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

Member Avatar for cguan_77

thanks for the ideas :)

Member Avatar for essential

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.