HTML - 100% Width 3 Cell Table To Tableless
Hello,
I am having trouble converting the following example table into a nice tableless layout: Code: <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td><img src="./left_image.gif" border="0" /></td> <td style="background: url(./bg_image.gif) top left repeat-x;" width="100%">Content</td> <td><img src="./right_image.gif" border="0" /></td> </tr> </table> The main problem is that center 100% width cell. A 100% width div with a div either side doesn't work... Any ideas on how I would go about this? Similar TutorialsHi 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. 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! Hi all, I am a totally new to html, "yesterday I could not even spell it". I am working on a simple project where I have used a table to store page information (text and pictures), I read it somewhere it is the best way to do it. I figured out how to set the context width in the cell (<td width="20">) but how do set the width of the cell? Remember, I am not building "The Windsor Castle" just a little cuby house in the back so everything should be as simple aspossble, not necessarily the fastets and most versatile. Thanks in advance. I actually feel a bit ridiculous because i can't solve a problem that will probably be as easy as hell... anyway, i have a table with some collspans and rowspans in it, but i can't seem to be able to set the width for the site in IE... Here's a simple representation of the table, since it's generated dynamically with PHP, so the number of rows and columns is not always the same...but the structure is: HTML Code: <table> <tr> <th rowspan=2 style="min-width=120px;">left column header</th> <th colspan=2 style="min-width=120px;">column 1 title</th> <th colspan=2 style="min-width=120px;">column 2 title</th> </tr> <tr> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> </tr> <tr> <td>row1 name</td> <td>row1 col1 value1</td> <td>row1 col1 value2</td> <td>row1 col2 value1</td> <td>row1 col2 value2</td> </tr> </table> So it should look a bit like this: Code: ------------------------------- | 120px | 120px | 120px | | |---------|---------| | |60px|60px|60px|60px| |---------|----|----|----|----| |rowname1 |val1|val2|val1|val2| |---------|----|----|----|----| |rowname2 |val1|val2|val1|val2| ------------------------------- there can be more rows with rowname, and more columns with the colspans... now in mozilla firefox this works just fine, but not in IE...even worse, if one of the values in the columns that are supposed to be 60px wide is negative, IE inserts a break between the '-' symbol and the numbers... i'm using HTML 4.01 Strict by the way... 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, 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 Does anyone have an idea how I can make the text in the TD-tags fit 100% in its cell. Help would be highly appreciated. Quote: <html> <style> .text {text-transform: uppercase; } </style> <body> <center> <table width="500" border="1"> <tr> <td> <span class="text">Text nrjkfb bfd df bfdfbhj</span> </td> </tr> <tr> <td> <span class="text">Text hjkbjkbjk</span> </td> </tr> </table> Hi there. I am working on this site. There is a problem with a table column spacing though... if this is what it looks like in Firefox (the way its supposed to be...) and this is what happened to it in IE. (dear lord...) the left menu and the content on the right are two adjacent cells of a table. how do i fix this ? it seems ie is giving equal width to both the cells. which explains the gap. i've tried using: Code: <td width=180> and also: Code: <colgroup span="2"> <col width="180"></col> <col width="500"></col> </colgroup> but none of them work. please help me out.. the page is available at > http://ramniquesingh.googlepages.com/index.html the .css file is available at > http://ramniquesingh.googlepages.com/default_style.css thanks. I have a table that looks like this: Code: <table style="height: 100%;" cellspacing=0 cellpadding=0 border=1> <tr><td colspan=2 style="height: 100px;"> <center> <span style="font-size: 24pt; text-align: center;"> <img src="H&R banner.jpg" border=0></span></center></td></tr> <tr> <td style="width: 200px;"> <center> <span style="text-align: center;"> MARGIN<br> (latest news)<br> (possibly links) </span> </center> </td> <td> <table style="width: 100%; height: 100%" cellspacing=0 cellpadding=0 border=1> <tr> <td style="height: 50px;"> <center> <span style="font-size: 14pt;">menu bar</span> </center></td> </tr> <tr> <td> <center> <span style="font-size: 24pt; text-align: center;"> CONTENT </span> </center> </td> </tr> </table> </td> </tr> </table> I'm having trouble controling the width of the first bolded table cell. This happens in IE9. I have it set to 200px, but for some reason it wants to be wider than that (I can tell because the text seems to be centering within the first 200px of its width, but it's not centered within the whole cell). I can fix this by specifying a % width (as in style="width: 25%;"), but I'd prefer to stay away from percentages. I can also fix the problem by specifying the width of the next cell (to its right, in bold above) to some specific value, but then this fixes the size of the whole table, and I would like to keep it variable. Does anyone know why the width likes to increase to more than I specified, and if so, how do I fix this problem? I'm a beginner in HTML. I would like to make a row with two cells, the first one being 200 pixels wide and the second cell stretching out to fill up the rest of the horizontal space... I thought that putting in width=100% in that <td> tag would do it but if I do that, that cell covers up my first cell (the 200 px one). How can I go about doing that? Thanks!! 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. i want to open a frame by clicking on a cell,i can only do this when the ref is outside the table,can you help? Thanks everybody 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? Code: <td class="row5" style="text-align:center;" width="50"> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">2</b> <span style="color:#c9c5be;">topics</span> <br /> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">1</b> <span style="color:#c9c5be;">posts</span><br /><br /> </td> I'm not sure how it's looking in IE, but in Firefox all the text in this table cell is aligned to the right. I can't figure out why. Row5 only adds a background color and nothing else. http://sa.zrkonium.net/ It's visible here ^ The grey topics/posts text is aligned to the right in Firefox rather than in the center where it should be. I can't figure out why it's not aligning right. Any help appreciated. i want the entire table cell to be the link, not just the text inside any ideas? Hi Can someone please tell me how I can make a table cell (which contains text which is linked) linkable? http://www.revolution.worldclanleagu...?site=calendar Here you can see a calendar with months at the top. When you hover over a month, the cell highlights but only the text inside is actually selectable - I'd like to make the cell selectable/linked. PHP/HTML I have: Code: <td class="calendar-month" align="center"><a class="calendar" href="index.php?site=calendar&month=01">'.mb_substr($_language->module['jan'], 0, 3).'</a></td> CSS: Code: a.calendar, a.calendar:visited, a.calendar:active { font-family: Arial; color: #dbdbdb; font-size: 11px; line-height: 13px; text-decoration: none;} a.calendar:hover { font-family: Arial; color: #dbdbdb; font-size: 11px; line-height: 13px; text-decoration: none;} .calendar-month, calendar-month:visited { font-family: Arial; color: #dbdbdb; font-size: 11px; line-height: 13px; padding: 5px; background-color: #2f2f2f; border-bottom:3px solid #1d1d1d; border-right: 1px solid #000; border-top: 1px solid #424242; border-left: 1px solid #424242;} .calendar-month:active { font-family: Arial; color: #dbdbdb; font-size: 11px; line-height: 13px; padding: 5px; background-color: #2f2f2f; border-bottom:3px solid #1d1d1d; border-right: 1px solid #000; border-top: 1px solid #424242; border-left: 1px solid #424242;} .calendar-month:hover { font-family: Arial; color: #dbdbdb; font-size: 11px; line-height: 13px; padding: 5px; background-color: #3f3f3f; border-bottom:3px solid #1d1d1d; border-right: 1px solid #000; border-top: 1px solid #424242; border-left: 1px solid #424242;} (sorry theres so much css) Thanks in advance =D 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 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? |