|
HTML - Html Table - One Column Auto, Rest Fixed
can i have fixed layout for only some part of a table?
I want the first column of my table to be "auto" and the other columns to be "fixed" llike style='table-layout:fixed;'. How can I achieve this? Thanks! Similar TutorialsHi, I have the following problem i'm trying to solve with HTML: I have a simple table with 3 columns. I want the table to have a 100% width of the screen. Furthermore the center column must ALWAYS have a width of 1000. The left and right column should just be there too fill the gaps up if you have a wider screen than 1000. Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0. How can I solve this? Some example could would be highly appreciated Thanks, betonboor in the past when ever I have string that is longer than the width specified in the <td>it always automatically line breaked for me. But now I am encountering an issue with the <td> stop auto line breaking, and instead just increase the width of the table to make the string fit in 1 line. if anyone know whats possibly causing this problem please reply, any thing suggestion is greatly appreciated. Thanks hi i am displaying the data retrived from the database in table format. say using query select . col1 col2 col3 col4 12 15 15 13 15 16 the data displayed in col1,col2,col3 are retrieved from the database. now the problem is now i have to compute value for col4 (i.e col4= (15+15)/4) using the values in col2 ,col3. how to perform this. i am using sql as backend and jsp for front end. please send some similar examples or working code for this or any suggestions are appreciated. Thanks and regards Manjunath I want to hide a table column when a window gets too a certain width. I've clocked onto the media tags, and I've used them to re-structure my navigation bar and I know the media tags work beautifully, I just need to remove a column from a table, the last column too be exact, using just HTML. Alternatively, If I can't remove it how can I make it seem like it's gone? I've tried setting the column width too 0px but that doesn't work. there's an image inside the column though, and I reckon that might be what's messing this up. Any suggestions guys? Hi! I'm a Opera diehard since I know it's the only browser that does all measures (height/width/etc) 100% correct. And usually when something doesn't show up right in another browser I have different kinds of 'backups' ready, but this time I'm pretty lost. This is the thing I'm busy with: test.html (As you might notice it's pretty much based on the old YouTube menu.) It really only shows up fine in Opera but just to show you guys what it looks like in the other browsers: All Browsers - Picture The codes (test.html): Quote: <html> <head> <title>TEST</title> </head> <body style='background:white'> <center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="177" height="28"></td> <td width="130" height="28" align="center" valign="middle" background="active.png"> <font color="#333333" size="2" face="sans-serif"><b>Link 1</b></font></td> <td width="130" height="28" align="center" valign="middle" background="inactive.png"> <a href="link2.html" style="text-decoration: none;"> <font color="#003399" size="2" face="sans-serif"><b>Link 2</b></font> </a></td> <td width="130" height="28" align="center" valign="middle" background="inactive.png"> <a href="link3.html" style="text-decoration: none;"> <font color="#003399" size="2" face="sans-serif"><b>Link 3</b></font> </a></td> <td width="130" height="28" align="center" valign="middle" background="inactive.png"> <a href="link4.html" style="text-decoration: none;"> <font color="#003399" size="2" face="sans-serif"><b>Link 4</b></font> </a></td> <td width="177" height="28"></td> </tr> <tr> <td background="bar.png" colspan="6" width="874" height="37" align="center" valign="middle"> <form id="form" method="post" action="formcorrect.php" enctype="multipart/form-data"> <font color="#333333" size="2" face="sans-serif">URL:</font> <input type="text" name="url" size="40" value=""> <input type="submit" name="submit" value="Send"> <input type="hidden" name="config" value="0""></form> </td> </tr> </table> </center> </body> </html> (Also available over here.) The form isn't active, nor are the pages linked to Link 2-4. The meaning obviously is that the input is centered (align and valign) in all browsers. The pictures used: 1x active.png: 130 x28px (white on the sides included) 3x inactive.png: 130 x28px 1x bar.png: 874 x37px (colspan=6) 2x 177 x28px (= free space on both sides of top row) Calculation: 177 + 130 + 130 + 130 + 130 + 177 = 874 Well, I think that's all I can say. Hope someone could help me out! Thanks a lot in advance! Hello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. This could be an HTML or CSS problem, but I can't figure out what's causing this and it's driving me nuts! The left column on my website will not stay a fixed width of 175px in IE 8. That seems to be the only browser having a problem. Here's the link: http://www.jrsart.net/testarea/paull...cientists.html I've linked the page that has it the worst, but if you visit the other pages and keep an eye on the left column's border, you'll see it keeps moving. Please help! I'm rapidly running out of time to fix this issue, so any advice would be greatly appreciated! Hi all, i have table with 3 columns, this is the code: <body> <center><table frame="vsides" cellspacing="0" border="2" width="1000" cellpadding="10" > <tr> <td bgcolor="white" width="200" valign="top"> <br><br>This is some text. </td> <td bgcolor="white" width="600" valign="top"><br> This is some text. </td> <td bgcolor="white" width="200" valign="top"> <br> This is some text. </td> </tr> </table></center> </body> but when i enter some more txt table expand, is it possible to create table that columns can expand(height) but rows not(width)? thx Hi i have a table with a picture within its only cell . How can i lock the size of the table so that it wil not get any larger should a larger image be put in it? I have tried setting the width and height to a fixed value but that does not seem to do keep it fixed. Ideally i would like the image to resize itself to match the maximum values of the table but this i suppose will probably be a good bit harder? Hi, i'm doing an interface for a database, and i want to print my query results on tables. As i have many entries, i need a big table so i want to do a table with scroll where my header doesn't get out of sight (ever) when i scroll down. im working on NuSphere Phped, Windows 7. This code is working only on the PHPed simulator...on chrome and FF the scrollbar dont appear: PHP Code: <table align="center" cellpadding="3" cellspacing="0" style="border: black; border-style:double ; border-spacing: 0; cursor:default;"> <thead> <?php ###### ###### processing the query for($i=0; $i<$numcol; $i++) { ####### echo "<th bgcolor=\"#000000\" "; ####### some conditions for mouse events echo "><font face=\"helvetica, cursive\" size=\"-2\" color=\"white\">"; echo $column_name"</font></th>"; } ?> <th style="width: 16px; background: black;"></th> ##16px for the scrollbar </thead> <tbody style="overflow-y: scroll;overflow-x:hidden; height: 300;"> <?php $i=0; do{ ######## ######## ?> <tr onmouseover="this.bgColor='#B3BC7A'" onMouseout="this.bgColor='<?php if($i%2==0) echo "#eeeeee"; else echo "#ffffff"; ?>'" <?php if($i%2==0) echo " bgcolor=\"#eeeeee\" "; else echo " bgcolor=\"#ffffff\""; ?>> <?php for($j=0; $j<$numcol; $j++) { ?> <td <?php #######more php query precessing ########## ?> ><font face="helvetica, cursive" size="-2"> <?php } echo $attribute; ?> </td> <?php } ?> </font> <td style="width: 16px; overflow: scroll;"></td></tr> <?php $i++; }while($currentRow) ?> </tbody> </table> can someone tell me how to make it work on those browsers? Hi there, I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks the site: http://guild-paragon.com/indexframe edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though Hi There, I have included my code below. The table looks correct in Firefox 2 and Safari 3 but not IE7. I am attempting to create a table that fills up the entire page with a fixed width row at the bottom. IE7 ignores the height I have set for the second row and makes both rows the same height. Note that the Doctype tag is important here, if I remove it then the page looks correct, however it is my intention to ensure the browser runs in standards mode. As far as I am aware my code is correct. Any help or advice would be appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html,body{
margin:0;
padding:0;
height:100%;
border:none;
}
</style>
</head>
<table height="100%" cellpadding="0" cellspacing="0" border="1" width="100%">
<tr>
<td>
Line 1
</td>
</tr>
<tr style="height:10px;">
<td>
Line 2
</td>
</tr>
</table>
</html>
Hi, I'm a little new at this, and I'm trying to put a pretty simple website together. I have a table that is the basis for the whole website design. It's pretty fixed, so I want all the widths of the table to be constant. A couple rows have fixed heights for aesthetic purposes. A couple rows I want to expand to whatever height is necessary to accomodate the content inside. the fourth row of the table has three cells side by side that I use as the header design. 1) picture 2) space 3) title I want all these to have fixed widths and heights. underneath is a cell that spans the length of all three of those. This is where I want my content. 4) content The length of this stays fixed but the height changes as more content is addes. The trouble is, the table cells display correctly for me as long as there is limited amount of text inside the 4) content cell. Whenever I enter past a few sentences, the 1) picture cell starts taking up more of the width and shrinking the 3) title cell. And this really messes up the nice spacing I had. Any thoughts on why this would happen??? I'm just stuck. I've tried a million things, but I'm sure its something simple I can't see right now. Hopefully a pair of fresh (and knowledgeable) eyes can help! Thanks so much, heres my code: [font="Courier New"] <body> <table width="875" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="75" colspan="5"><img src="../images/RichfieldLogo.png" width="250" height="75"></td> </tr> <tr align="center"> <td height="25" colspan="5" valign="top" class="mainmenu" style="border-bottom: solid 1px #666666; border-top: solid 1px #666666"> <h1 class="menu"> <ul> <li><a href="#" class="mainmenu">Home</a></li> <li><a href="#" class="mainmenu">Party in the Park</a></li> <li><a href="#" class="mainmenu">Info</a></li> </ul> </h1></td> </tr> <tr> <td height="20" colspan="5"><img src="../images/20spacer.png" width="20" height="20"></td> </tr> <tr align="left" valign="top"> <td width="190" rowspan="2"> <img src="../images/PartynParkPlaceholder.png" width="190" height="385"></td> <td width="20" rowspan="2"><img src="../images/20spacer.png" width="20" height="20" border="0" align="top"></td> <!-- This is where the trouble starts! I can't get these cells to stay a fixed size!!! --> <td width="275" height="275"><img src="../images/SamplePicSmall1.png" width="275" height="275" border="0" align="right"></td> <td width="20" height="275"><img src="../images/20spacer.png" width="20" height="20"></td> <td width="370" height="275"> <p><font size="45px" face="Helvetica, Arial, sans-serif" weight="bold"><strong>Party <br /> in the Park</strong></font><br /> <h2 class="datetime"><font color="#666666">LOCATION </font> Richfield Park, 345 Main St in Richfield<br /> <font color="#666666">DATE </font>Saturday, October 13 2008 <br /> <font color="#666666">TIME</font> From 8am until late afternoon<br /> <font color="#666666">INFO</font> Call 704.463.1308</h2></p> </td> </tr> <!-- This seems to be the cause of it. If I have a couple sentences down here its fine, but more than a few words and it causes sheer html chaos above! --> <tr> <td colspan="3"><img src="../images/10spacer.png" width="10" height="10"><br /><hr width=100% size=1px color=#99CC33> <img src="../images/10spacer.png" width="10" heigh="10"><br /> <h2 class="text">Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! </h2> <br /><img src="../images/25spacer.png"><br /> <p><h1 class="menu2">Features</h1></p> <p><h1 class="menu2">Photos</h1><hr width="100%" size="1px" color="#99CC33"></p> <p><h1 class="menu2">Flyer</h1></p> <p><h1 class="menu2">Directions</h1></p> </td> </tr> <!-- And everything from here on out seems to be fine from what I can tell --> <tr> <td height="75" colspan="5"> </td> </tr> <tr> <td colspan="5" valign="top"><hr width="100%" padding-bottom="1px"> <div align="right"><font color="#99CC33"><em><font color="#000000" size="-7" face="Verdana, Arial, Helvetica, sans-serif">email us at </font><font size="-7" face="Verdana, Arial, Helvetica, sans-serif">web@gorichfield.com</font></em></font></div></td> </tr> </table> </body> thanks again for any help guys! I have a very simple table that I cannot simply get to render correctly across IE, Firefox, and Opera. At first, I was using CSS to define the cell widths/heights - when that was giving me issues I got rid of all the CSS and attempted to use plain HTML. The problem persisted. Here's the code - it doesn't get much simpler than this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Appearance in Opera Appearance in IE7 Appearance in Firefox (this is what I want it to look like in all browsers) I haven't done HTML seriously in 7-8 years or so but I don't really remember having these problems with IE/Netscape. The fix I found for IE was to use style="table-layout: fixed" for the table: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Now IE works fine, Firefox didn't break, but Opera's cells still are not 15 pixels. IE7 Appearance fixed Here's my attempt at getting Opera to display it properly by mixing CSS and HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td style="width: 15px; height: 33px" width="15" height="33">a</td> <td style="height: 33px">b</td> <td style="height: 33px">c</td> <td style="width: 15px; height: 33px" width="15" height="33">d</td> </tr> <tr> <td style="width: 100%" width="100%" colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Opera looks even worse now This seems like such a simple table. I really don't understand why I'm having such a hard time. I believe the second row - using colspan is causing the issue. Please don't answer with - "dont use tables" or something silly like that Thank you -TableTrTd I'm having so much trouble with this. I have a site (from photoshop) that will have have fluid layout (100% width) but I want the footer to "stick" to the bottom of the window (unless content goes longer). Here is content part of the html (which is a bit messed up now from trying many things) <div id=container> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr></tr> <tr> <td height="235" bgcolor="#FFFFFF"> </td> <td width="1000" rowspan="5" valign="top"><!-- ImageReady Slices (screencapture3.psd) --> <table width="1002" height="400" border="0" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td height="58" colspan="9"><img src="images/rightthere_01.jpg" width="417" height="58" alt="" /></td> <td colspan="10"><img src="images/screencapture2_01.jpg" width="583" height="58" alt="" /></td> </tr> <tr> <td colspan="9"><img src="images/rightthere_logo.jpg" alt="" width="417" height="76" border="0" /></td> <td colspan="3" rowspan="2"><img src="images/seniors.jpg" alt="" width="140" height="177" border="0" /></td> <td width="139" rowspan="2"><img src="images/caregivers.jpg" alt="" width="139" height="177" border="0" /></td> <td colspan="3" rowspan="2"><img src="images/physicians.jpg" alt="" width="142" height="177" border="0" /></td> <td colspan="3" rowspan="2"><img src="images/disabilities.jpg" alt="" width="162" height="177" border="0" align="top" /></td> </tr> <tr> <td height="101" colspan="9"><img src="images/inhome_tagline.jpg" alt="" width="417" height="101" border="0" /></td> </tr> <tr> <td colspan="19" bgcolor="#69781B"><img src="images/nav_top.jpg" width="1000" height="51" alt="" /></td> </tr> <div id:navigation></div> <td width="59"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image44','','images/about_ro.jpg',1)"><img src="images/about.jpg" name="Image44" border="0" id="Image44" /></a></td> <td width="15"><img src="images/div1.jpg" width="15" height="17" alt="" /></td> <td width="144"><a href="why.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image45','','images/why_ro.jpg',1)"><img src="images/why.jpg" name="Image45" width="144" height="17" border="0" id="Image45" /></a></td> <td width="17"><img src="images/div2.jpg" width="17" height="17" alt="" /></td> <td width="114"><a href="what.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image46','','images/what.jpg',1)"><img src="images/what.jpg" name="Image46" width="114" height="17" border="0" id="Image46" /></a></td> <td width="17"><img src="images/div3.jpg" width="17" height="17" alt="" /></td> <td colspan="4" bgcolor="#8B9849"><a href="who.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/who_ro.jpg',1)"><img src="images/who.jpg" name="Image43" width="127" height="17" border="0" id="Image43" /></a></td> <td width="16"><img src="images/div4.jpg" alt="" width="16" height="17" align="left" /></td> <td colspan="3"><a href="consider.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image47','','images/consider_ro.jpg',1)"><img src="images/consider.jpg" name="Image47" width="195" height="17" border="0" id="Image47" /></a></td> <td width="19"><img src="images/div5.jpg" width="19" height="17" alt="" /></td> <td colspan="2"><a href="careers.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image48','','images/careers_ro.jpg',1)"><img src="images/careers.jpg" name="Image48" width="188" height="17" border="0" id="Image48" /></a></td> <td width="19"><img src="images/div6.jpg" width="19" height="17" alt="" /></td> <td width="70"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image49','','images/contact_ro.jpg',1)"><img src="images/contact.jpg" name="Image49" width="70" height="17" border="0" id="Image49" /></a></td> </tr> <tr> <td colspan="19" bgcolor="#6A791C"><img src="images/nav_bot.jpg" width="1000" height="42" alt="" /></td> </tr> <tr></tr> <tr> <td colspan="7"><div id=leftcontent> <h4>Left Content</h4> </div></td> <td width="4"> </td> <div id=maincontent> <td colspan="11"><h1>Main Content</h1></td> </div> </tr> <tr> <td><img src="images/spacer.gif" width="59" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="15" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="144" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="17" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="114" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="17" height="1" alt="" /></td> <td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" alt="" /></td> <td width="42"><img src="images/spacer.gif" width="42" height="1" alt="" /></td> <td width="76"><img src="images/spacer.gif" width="76" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="16" height="1" alt="" /></td> <td width="48"><img src="images/spacer.gif" width="48" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="139" height="1" alt="" /></td> <td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="19" height="1" alt="" /></td> <td width="115"><img src="images/spacer.gif" width="115" height="1" alt="" /></td> <td width="73"><img src="images/spacer.gif" width="73" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="19" height="1" alt="" /></td> <td><img src="images/spacer.gif" width="70" height="1" alt="" /></td> </tr> </table></td> </tr> <tr> <td height="110" bgcolor="#869343"> </td> <td height="110" bgcolor="#6A791C"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </tr> </div> <div id= "footer"> <td width="100%" height="79" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <td width="0%" bgcolor="#859242"> </td> <td width="1000" bgcolor="#697819"><img src="images/footer.jpg" alt="" height="79" /></td> <td width="26%" bgcolor="#697819"> </td> </tr></table> </div></tr></tr></body> </html> and my css p { color: #6a6a6a; font-size: 15px; line-height: 20px; font-family: georgia, "Lucida Grande", Verdana, Arial ; top: 0; margin-top: 0; } h1 { color: #667824; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; } h4 { color: #4d4f53; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; } h2 { color: #667824; font-size: 20px; font-family: Arial, Verdana } h3 { color: #fff; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; } ul { color: #667824; font-weight: bold; font-size: 12px; font-family: verdana, Arial ; line-height: 14px; } h5 { color: #4d4f53; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; } A:link {text-decoration: none; color: 667824} A:visited {text-decoration: none; color: B71234} A:active {text-decoration: none} A:hover { color: B7CEC4; text-decoration: none; } html, body { margin:0; height: 100%; width: 100% } body >#container { margin:0; padding:0; height:auto; min-height:100%; position:relative; } #clearfooter {overflow:auto; padding-bottom: 79px;} #maincontent { float:left; min-width: 100px; } #leftcontent { min-width: 50px; } #left{ left: -1; right: 0; min-width: 100px; max-width: 200px; min-height: 235px; } #centerleft{ left: -1; right: 0; min-width: 172px; max-width: 200px; min-height:100px; } #right { position:relative;/*ie needs this to show float */ min-width:1px; max-width:200px; float:right; } #footer { width:100%; text-align:center; position:relative; margin:0; height:79px; clear:both; } #navigation { max-width: 1000px; vertical-align; top; text-align: left; } table { border-collapse: collapse; } please help. I want to create a html page which should not have address back, Back and Forward button. any help ? Hi: I would like to present to my users a 3-column table of 'House for Sale' advertisements. This is not a commercial venture but will only be for the use of my Senior Mobile Home Park residents. Each of the three columns should contain x number of rows with each column cell containing a tiny pic (from a house.jpg file) and underneath the pic would be a few general details of the price, address, agent selling, etc. The .pic would be clickable and would then bring up a more enlarged picture of the house and complete details of the house for sale. My first puzzle is how to make this list of rows of advertisements *variable*. I guess I have to 'build' the page in my server according to how many ads are currently active ?? Any first thoughts are welcome. Thanks, -Mel Smith hi again... Nobody replied to my last post, so I've simplified what I am having trouble with. I have a MAIN table (which holds all of the page content) that is set to automatically scale to 100% height of any size browser window. That part works fine. My problem lies with the content in that main table. 1) I want the blue table to stay aligned to the top of the browser window. 2) I want the green table to automatically stretch vertically to fit any size browser window 3) I want the yellow table to stay aligned to the bottom of the browser window. When I resize the browser window, the green table does not expand properly. I've already tried different <div height="100%"> and <table height="100%"> values and none of them work. The smaller I resize the browser window , the more of the green table is cut off from the bottom, and the yellow table does not scale properly. So in short, the blue table stays at the top, the yellow table stays at the bottom, and i want the green table to scale vertically to fill the remaining space in between when the browser window is scaled vertically. Everything works fine when scaled horizontally. Can someone please help me with this!?!?!?!? Again, here is the basic stripped down version of the html code I have. HTML Code: <html>
<head>
<title>Site Title</title>
</head>
<style>
html, body
{
margin:0px;
height:100%;
width: 100%;
padding: 0px;
}
</style>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" height="100%" width="100%">
<tr>
<td valign="top">
<!-- Top table - Stays at the top of the browser window -->
<div valign=”top”>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%" height="70" bgcolor="#00FFFF">
<p align="center">This table stays aligned to the top of the browser window and stays 70 pixels in height.
</td>
</tr>
</table>
</div>
<!-- End of top table -->
<!--Middle table - Stretches vertically to fill remaining space-->
<div valign=”top”>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="100%" valign="top" bgcolor="#00FF00">
<p align="center">content in this table will be aligned to the top.<br>
I want this table to automatically expand vertically to fill the empty
space between the blue header and the yellow footer.</td>
</tr>
</table>
</div>
<!-- End of middle table -->
<!-- Bottom table - Stays at the bottom of the browser window -->
<div height=”100” valign=”bottom”>
<table height="100" border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="100%" height="100" bgcolor="#FFFF00">
<p align="center">I want this footer to stay aligned to the bottom of
the browser window and stays 100 pixels in height</td>
</tr>
</table>
</div>
<!-- End of bottom table -->
</td>
</tr>
</table>
</body>
</html>
Hi guys, I'm really having a problem here. I'm creating a new instant messenger program and can't get the tables to stretch properly. Firstoff, when the messenger loads, you will not see the address bar, status bar, menu bar, etc. I want to be able to resize the browser (messenger) window to any size, just like you would with msn for example. I have 3 tables. 1) The first one will contain all the header graphics etc and I want this table to stay aligned to the TOP of the browser window. 2) The middle table is where the chat conversation text will go. The chat text will be aligned to the top of this window. This is the window that I need to stretch to vertically automatically when you resize the browser window. 3) The last table is where the message entry box will be. I want this to stay aligned to the BOTTOM of the browser window. Right now, my MAIN TABLE which contains all of the messenger content does stretch to fit the screen, but how the heck do I get the three tables inside it to be aligned how i need them??? Here is the basic code that I'm working with: <html> <head> <title>Site Title</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <table id="fullheight" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="100%">Header goes here - Stays aligned to the top of the browser window</td> </tr> <tr> <td width="100%">Middle chat content - automatically stretches vertically when the browser window is resized</td> </tr> <tr> <td width="100%">Message entry box section - stays aligned to the bottom of the browser window</td> </tr> </table> </td> </tr> </table> </body> </html> This is the CSS code that I'm using which makes the MAIN table expand to fit the entire browser window: html, body { margin:0; padding:0; height:100%; border:none } #fullheight{height:100%} Can anyone please help me out? Thanks! Hey guys, Okay so i have a question over a table that I am generating with data from a database. The way i have my table set up is like this: Recipe Name-----Prep Time-----Total Time-----Rating ========================================= some data here 12 mins 20 mins 4.5 some data here 12 mins 20 mins 4.5 some data here 12 mins 20 mins 4.5 some data here 12 mins 20 mins 4.5 So what i want to know is if I could make the Column Header (RECIPE NAME) into a link that way the user can click it and it would sort the recipe names in ascending order. When i open the page i am already displaying all the data form the database in this table. but i want to allow the user to be able to sort the recipe names. So i would have to i guess (REFRESH) the page automatically?? I already have teh code to sort my data, what I need to know is how exactly to go about making the column header into a link to SORT and then refresh the page Here is my code I currently have used to create the TABLE and populate it using a while loop to send the data from the DB into the table: <table border="2" width ="500"> <tr> <th>Recipe Name</th> <th>Prep Time</th> <th>Total Time</th> <th>Rating</th> </tr> <!--While statement used to pass data from DB into tables --> <? while( $row = mysql_fetch_array( $result ) ) { ?> <tr> <td><a href="ShowRecipe.php?id=<?=$row['id'] ?>"><?=$row['name'] ?></a></td> <td><?=$row['preptime']?> mins</td> <td><?=$row['totaltime']?> mins</td> <td><?=$row['rating']?></td> </tr> <? } ?> </table> |
|||||||