Table height

Thread Solved

•
•
Join Date: Apr 2007
Posts: 1,130
Reputation: cguan_77 has a little shameless behaviour in the past 
Solved Threads: 93
cguan_77's Avatar
cguan_77 cguan_77 is offline Offline
Veteran Poster

Table height

 
0
  #1
Jun 5th, 2009
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..
HTML and CSS Syntax (Toggle Plain Text) 
  1. <div id="maintable">
  2. <table border="0" cellpadding="0" cellspacing="0"  width="850px" height="800px" >
  3.     <tr bgcolor="#55aaff" >    
  4. 	<td align="top"> {
Last edited by cguan_77; Jun 5th, 2009 at 5:47 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Table height

 
0
  #2
Jun 5th, 2009
Simple table layout sample: controlling table layout using CSS and also serves as a valid XHTML 1.0 Strict document.

HTML and CSS Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <?xml-stylesheet type="text/css" href="#internal" media="all"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <title>Table Layout Sample</title>
  11. <style id="internal" type="text/css" media="all">
  12. /* <![CDATA[ */
  13. html, body {
  14.   border : none;
  15.   font : normal normal normal 95%/1.4 Verdana, Arial, sans-serif;
  16.   height : auto;
  17.   min-height : 600px;
  18.   margin : 0;
  19.   padding : 0;
  20.   text-align : center;
  21.   width : auto; }
  22.  
  23. body {
  24.   background-color : #f0f0f0;
  25.   color : #506070; }
  26.  
  27. table {
  28.   border : none;
  29.   border-collapse : collapse;
  30.   height : inherit;
  31.   min-height : 600px;
  32.   width : 100% !important; }
  33.  
  34. td, tr {
  35.   border : none;
  36.   padding : 0; }
  37.  
  38.  
  39. td {
  40.   width : 100% !important;
  41.   vertical-align : middle !important; }
  42.  
  43. div {
  44.   border : none;
  45.   margin : 0;
  46.   padding : 0; }
  47.  
  48. div#main {
  49.   margin : 0 auto;
  50.   clear : both;
  51.   height : inherit;
  52.   min-height : 600px;
  53.   width : 100%; }
  54.  
  55. div#MyDiv {
  56.   margin : 0 auto;
  57.   height : 200px !important;
  58.   min-height : 200px;
  59.   max-height : 201px;
  60.   min-width : 400px;
  61.   max-width : 401px;
  62.   width : 400px !important; }
  63.  
  64. div#MyDiv div.tube {
  65.   background-color : #f7f7f7;
  66.   border : 1px solid #ccc;
  67.   padding : 1em;
  68.   height : inherit;
  69.   text-align : center;
  70.   overflow: hidden; }
  71.  
  72. /* ]]> */
  73. </style>
  74. </head>
  75. <body>
  76. <div id="main">
  77. <table id="myTable" frame="void" rules="none" summary="Controlling table layout in CSS">
  78. <tr><td>
  79. <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>
  80. </table>
  81. </div> 
  82. </body>
  83. </html>

hope it helps...
Last edited by essential; Jun 5th, 2009 at 6:39 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Table height

 
0
  #3
Jun 5th, 2009
Another example of using all table properties to control its layout and at the same time keeping the whole document valid.

html Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <?xml-stylesheet type="text/css" href="#internal" media="all"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <title>Complete Table Properties: Usage Example</title>
  11. <style id="internal" type="text/css" media="all">
  12. /* <![CDATA[ */
  13. html, body {
  14.   border : none;
  15.   font : normal normal normal 95%/1.4 Verdana, Arial, sans-serif;
  16.   height : auto;
  17.   min-height : 600px;
  18.   margin : 0;
  19.   padding : 0;
  20.   text-align : center;
  21.   width : auto; }
  22.  
  23. div {
  24.   border : none;
  25.   margin : 0;
  26.   padding : 0; }
  27.  
  28. div#main {
  29.   margin : 0 auto;
  30.   clear : both;
  31.   height : inherit;
  32.   min-height : 600px;
  33.   width : 100%; }
  34.  
  35.  
  36. /* ]]> */
  37. </style>
  38. </head>
  39. <body>
  40. <div id="main">
  41. <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">
  42. <caption>Complete Table properties example</caption>
  43. <colgroup style="background-color : #eee;" align="left">
  44. <col style="background-color : #aaa;" valign="middle" align="center" width="20%" />
  45. <col valign="middle" align="center" width="80%" />
  46. </colgroup>
  47. <thead>
  48. <tr><th>Table Header</th><td>ROW1</td></tr>
  49. </thead>
  50. <tfoot>
  51. <tr><th>Table Footer</th><td>ROW3</td></tr>
  52. </tfoot>
  53. <tbody>
  54. <tr><th>Table Body</th><td>ROW2</td></tr>
  55. </tbody>
  56. </table>
  57. </div> 
  58. </body>
  59. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Table height

 
0
  #4
Jun 8th, 2009
Set the height of the cells, rather than the table.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2007
Posts: 1,130
Reputation: cguan_77 has a little shameless behaviour in the past 
Solved Threads: 93
cguan_77's Avatar
cguan_77 cguan_77 is offline Offline
Veteran Poster

Re: Table height

 
0
  #5
Jun 8th, 2009
thanks for the ideas
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Table height

 
0
  #6
Jun 8th, 2009
@ 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...
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum


Views: 1465 | Replies: 5
Thread Tools Search this Thread



Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart center cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format free frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC