|
HTML - Problem With Table Cell Heights
Hello all,
I have the following table, however, my height seem to be changing: Code: <table width="100%">
<tr>
<td height="50" width="50%">
CELL1</td>
<td rowspan="3" valign="top" width="50%">
WRITING GOES HERE</td>
</tr>
<tr>
<td height="50" width="50%">
CELL2</td>
</tr>
<tr>
<td height="100%" width="50%">
CELL3</td>
</tr>
</table>
I want cell1 and cell2 to always remain at 50px. cell3, may vary in size depending on how much information is entered into the 'WRITING GOES HERE' section. At present when there is a lot of wiriting in the 'WRITING GOES HERE', cell1 and cell2's height will be much larger that 50px. Any ideas how i can get cell1 and cell2 to remain constan and cell3's height to vary? Much Appreciated. Similar TutorialsHi, I have a template made that my friend made in photoshop and slice the image to be able to put them in html. The problem is when I put too much text the cell on both side of the middle one are resizing too. is there a way to lock them from resizing and get only the cell that i want to resize? I'll put the html code here and thx a lot! BTW When it say: this cell resize verticaly - it mean that I want this cell to resize and not the others Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>web_DIV</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#000000">
<table id="tableau_01" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4" width="50%" height="316" background="images/web_div_01.jpg">
</td>
<td colspan="6" width="992" height="61" background="images/web_div_02.jpg">
</td>
<td rowspan="4" width="50%" height="316" background="images/web_div_03.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="61" alt="" /></td>
</tr>
<tr>
<td rowspan="3" width="55" height="255" background="images/web_div_04.jpg">
</td>
<td rowspan="3" width="23" height="255" background="images/web_div_05.jpg">
</td>
<td width="772" height="26" background="images/web_div_06.jpg">
</td>
<td colspan="2" rowspan="3" width="21" height="255" background="images/web_div_07.jpg">
</td>
<td width="121" height="26" background="images/web_div_08.jpg">
></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt="" /></td>
</tr>
<tr>
<td rowspan="4" width="772" height="435" background="images/web_div_09.jpg">
the text </td>
<td width="121" height="4" background="images/web_div_10.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td width="121" height="225" background="images/web_div_11.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="225" alt="" /></td>
</tr>
<tr>
<td width="50%" height="100%" background="images/web_div_12.jpg">
<p>this cell resize verticaly</p>
</td>
<td colspan="2" width="78" height="100%" background="images/web_div_13.jpg">
this cell resize verticaly</td>
<td colspan="3" width="142" height="7" background="images/web_div_14.jpg">
this cell resize verticaly</td>
<td width="50%" height="100%" background="images/web_div_15.jpg">
this cell resizeverticaly</td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td rowspan="5" width="50%" height="345" background="images/web_div_16.jpg">
</td>
<td colspan="2" rowspan="2" width="78" height="223" background="images/web_div_17.jpg">
</td>
<td colspan="2" rowspan="2" width="21" height="223" background="images/web_div_18.jpg">
</td>
<td rowspan="4" width="121" height="332" background="images/web_div_19.jpg">
</td>
<td rowspan="5" width="8" height="345" background="images/web_div_20.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="199" alt="" /></td>
</tr>
<tr>
<td width="772" height="24" background="images/web_div_21.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="5" width="871" height="81" background="images/web_div_22.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="81" alt="" /></td>
</tr>
<tr>
<td colspan="2" width="78" height="28" background="images/web_div_23.jpg">
</td>
<td colspan="2" width="773" height="28" background="images/web_div_24.jpg">
</td>
<td width="20" height="28" background="images/web_div_25.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="28" alt="" /></td>
</tr>
<tr>
<td colspan="6" width="992" height="13" background="images/web_div_26.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="772" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="121" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td></td>
</tr>
</table>
</html>
Hello, I've recently noticed that IE renders this table a bit differently than most browsers (Firefox, Opera, Safari, etc). The real page is much more complicated and uses proper styling, but I simplified it into the code below. The inline CSS sets the height of each individual cell and then the last cell is not provided with a height. I would love for the last cell to take the rest of the available height. I've tried many things to try and get this to work (like setting the height to 100%). The page renders how I expect it to in every browser I've tested except for the IE series. It seems as though Internet Explorer decides to ignore my row heights and calculate its own for some reason. Also, using a fixed height for the last cell is not possible due to how dynamic the web page is. Does anyone have any tips? HTML Code: <table style="table-layout:fixed;" border=1 width=100%> <tr> <td style="height:17px;width:150px;"> </td> <td style="height:600px" colspan=3 rowspan=5>This should span all of the rows and the remaining columns</td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td>This cell should take the rest of the available column height area</td> </tr> </table> Thank you. Hello, I have a table more o less defined as follows: Code: <table border = 2>
<tr><th colspan=2 align=center>GENERAL TABLE NAME</th></tr>
<tr><th colspan=2 align = center>ANOTHER GENERAL NAME</th></tr>
<tr><th>Col1</th><th>Col2</th></tr>
<tr><td>Att1</td><td>Att2</td></tr>
<tr><td colspan=2>
<textarea cols=??? rows=???>
<%=XMLString%=>
</textarea></td>
</tr>
</table>
I have the following problem: The table is shown but it needs to be printed... so I cannot use a textarea with scrolling option.... I need the textarea to be completely seen. What I need to write is a XML string... Is there a way of knowing the number of lines contained by this string (so I could put it in the rows parameter)? Another thing, I would like the textarea to completely fit within the 2 columns.... how can I do it? May be is there another way of doing it, without using textarea? Thanks for your help Hi all, Having a bit of trouble with a table layout in IE. The following link renders correctly (or at least as I would like) in Firefox yet in IE the header and navigation bars are too think. I've tried adding a height attribute to all td's concerned, but to no avail. here's the link: http://www.events.ex.ac.uk/ivfdf2009...s/template.php any help you can offer muchly appreciated! 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 Hi everyone: Any help appreciated. Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window. Development: I'm using a Mac, and I don't have ready access to a PC to experiment. What I tried: Code: <table> <tr> <td><img src = "a.png" style = "width: 100%" /></td> <td><img src = "b.png" style = "width: 100%" /></td> <td><img src = "c.png" style = "width: 100%" /></td> </tr> </table> <p class = "caption">A caption for the 3 images</p> <p class = "legend" >A legend for the three images</p> What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals. What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element. What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly. What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left. What's the trick to get around this IE "gotcha" please? Thanks from a newbie. I am creating a table that is taking data from database records. The table in question is the second one down (Previous Gigs) on the following page http://www.shotguneffect.com/?page_id=11 As you can see, some of the rows have a picture in, others don't. When I view this page in Firefox the rows automatically adjust their height so that the rows that just display text are only small, and the ones with a picture in are taller. However, when I view this page in IE8 (not sure what it does in other versions) all of the rows are identical height. As some of them contain images, it makes the rows that just contain text the same height. That is not the only thing though, it also breaks up the text in those rows so that it fills the height and therefore alters the widths also. Is there any way that I can get it so that the table row heights are only as tall as they need to be when being viewed in IE? (i.e. like they do in Firefox) 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, i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript. i.e if cell value is "late" then display that cell in red color else display the cell in green color please help me. Thanks ad Regards Akash The table itself is working fine, but the size of each cell is not correct in Firefox. Here is a screenshot of what is happening: http://img35.imageshack.us/img35/1938/tabletroubles.gif Here is the head of my page, the css for the table is he HTML Code:
<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center}
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;}
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;}
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;}
</style>
and here is the table code, located in the body of the page: HTML Code: <div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0"> <TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td> <div id="cat"> <table width=900; cellpadding:0px; cellspacing:0px> <tr align=center> <td width=20%> <font face=tahoma><a href="home.html">Home</a></font> </td> <td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> <td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> <td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> <td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> </tr> <tr> <td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> <td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> <td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td> <td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td> <td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> </tr> </table> </div> </td></tr></table> </div> A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else. If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks! Hi everyone. So I got my template set up to the way I like it and everything is rolling good. I inserted a picture into one of the cells in the table and it shifts everything over. Here is my code: <td width="625" colspan="1" bgcolor="white"> <font type="Arial" size ="5" color="blue"> <b>Floorplan</b><br> <center> <a href="floorplanlarge.jpg"><img src="floorplansmall.jpg" border="0" /></a> </center> </td> I have been working on fixing this for the last hour and am out of ideas on what is going on. The picture is smaller than the cell width range. My picture width is 311 pixels and the cell width is 625 pixels. I dont know if there is code whether its HTML or CSS to prevent the cell from widening. Any help would be appreciated. Also if you need me to provide more detail I can. Thanks. Hello all! I wanted to ask if there is a way to specify certain width sizes for table cells in a table. The thing is that I have a table in one webpage that, if I leave the width of the TD cells unspecified, I usually end up with some cells being very wide because the text that is written inside them is very big and does not roll up automatically and other cells shrink and become very small in order for the total table not to lose its specified length. Can I set a specific width for the cell that gets filled with many words so that the contents of this cell will wrap and not extend so much? Thank you! I've got a small problem, i want to make a table cell that works as a button. I tried it this way: Code: <table border='1' width='100%' height='10%'> <tr> <a href='page.htm'> <td width='20%' height='100%'> </td> </a> But this won't work, does anybody know how I can solve this problem? I recently made a rollover menu, and though the text does highlight when I roll over the cell, the link only works if I rollover the word is the cell. Is there a way to make the cell itself link? I am doing a simple calendar. I managed to do the table with days etc. I have a problem I wish to highlight a number and the cell automatically according to the date of the day. Can Someone help please? Thanks & best regards Hi Guys, Code: <td><a href="#" onclick="javascript:document.forms['formStatement'].submit()"> <%= statement.getTransaction().get(i).getTransactionId()%></a></td> As u see above is cell of a table, I want to fetch the value of the row cell as i want to use it using request object like req.getAttribute("some attribute"); How can i do that? i want the entire table cell to be the link, not just the text inside any ideas? So i am building a site for a friend, and created a navigational bar across the top with 7 tabs. The bg color is currently blue with white letters, and I want to make it white with black letters on a mouseover. I tried a couple different things from google, and nothing worked. Here is the code for the table. I would appreciate all the help I can get. Thanks! <HTML> <HEAD> <TITLE>Moxie Communication</TITLE> <style type="text/css"> p {font-family: Univers LT Std 45 Light} td {font-family: Univers LT Std 45 Light} </STYLE> </HEAD> <BODY bgcolor="#000000" style="color:white" vlink=white alink=black> <TABLE border=0 height=100 align=center bgcolor=#1A1919> <TR> <TD valign=top> <img src="F:\MOXIE\Website Images\Moxie_Top.jpg"> <TABLE border=0 width=100% cellpadding=9 cellspacing=1 bgcolor=#0054B4> <TR align=center> <TD><font size=2><a href="moxie.htm">HOME</a></font></TD> <TD><font size=2><a href="about.htm">ABOUT</a></font></TD> <TD><font size=2><a href="services.htm">SERVICES</a></font></TD> <TD><font size=2><a href="clients.htm">CLIENTS</a></font></TD> <TD><font size=2><a href="pricing.htm">PRICING</a></font></TD> <TD><font size=2><a href="team.htm">MEET THE TEAM</a></font></TD> <TD><font size=2><a href="contact.htm">CONTACT</a></font></TD> </TR> </TABLE> |
|||||||