|
HTML - Nested Table (not Nesting)
Hello,
I've been looking at this problem for a few hours now and can't see what i'm doing wrong. I just want to nest 2 tables inside 1 row of another table. Problem can be seen and you can view source at http://www.lakesdt.com/testindex.html Can anyone tell me where i've gone wrong? I'm using Notepad++ so that can confirm all my <tr> and <td>'s seem to match up. Any help much appreciated! Also open to suggestions for a better way to implement this, and also as each link on the left will load a page in the right is there a neater way to do this without reloading the whole page again? Best regards, Matt Similar TutorialsHi All, I am newbie with HTML, I am having difficulties in nesting the tables. I have 4 <TD> tags in a <Table> but somehow due to some nesting issues when i am inserting a table in my 3rd <TD> my 4th <TD> goes out of the table. Here goes my Code... ------------------------------------------------------------------------------------------------------- <HTML> <BODY> <table border=1 width="100%"> <tr> <td>1st TD</td> <TD>2nd TD</td> <td>3rd TD <table> <tr> <table> <tr> <td>Info</td> <td>S/O</td> </tr> <tr> <td><select><option>Info about Renting</option></select></td> <td><input type="text" style="width:70px"></td> </tr> <tr> <table width="50%"> <td></td> <td>ABC</td> <td>DEF</td> <td>GHI</td> <td>JKL</td> </table> </tr> <table> </tr> </table> </td> <td>4th TD</td> </tr> </table> </BODY> </HTML> -------------------------------------------------------------------------------------------------------- Please Help!!!... -Gagan I have a table which contains 1 row, and 2 cells within the row. One cell displays some text neatly centered. and the other an image. I've written some javascript to change the color of the cell when the mouse hovers above it. Nice...but How do I nest my table inside an anchor <a href=""> tag so that the visitor can click anywhere within the cell and be directed to the href? Ive nested the table inside a tag and it only worked in Mozilla & Opera, but Internet Explorer......need I say more? Please help? I am trying to get three colums of work, picture on the left, text middle, pictures on the right. should I be working with nested tables? attached a pix to show what I mean, Hi, I'm new to HTML. I have not yet started using CSS. I'm just using basic html. I'm having problem creating a nested table as shown in the attachment without using CSS style sheets. I appreciate anyone's suggestions in this. I pasted the code that tried below. <h3> 5) - Nested Table </h3> <table align="left" width="350" bgcolor="#ffff00" border="1"> <tr height="75" align="left"> <td height="100" > </td> <td height="75"> test2 </td> <td height="75"> </td> </tr> <clear="left" /> <tr> <td> <table align="left" bgcolor="f5f5dc" border="1"> <tr> <td width="100%" height="75"> a nested table </td> <td width="100%" height="75"> With this text at the top </td> </tr> <tr> <td width="100%" height="75"> </td> <td width="100%" height="75"> </td> </tr> </table> </td> </tr> <tr height="75" align="left"> <td></td> <td></td> <td></td> </tr> </table> Thanks in advance HI Every Body, Can you please help to resolve this issue. I am trying to create nested tables using the following code but no luck . In IE 7.0.6 the Nested tables are getting displayed as two seperate table. <HTML> <Head> <Title> MY First Application </Title> </Head> <Body> <Table border=1 Height=750 width=540 BORDERCOLOR=Red > <Tr> <Td> This is my first row/column </Td> </Tr> <Tr> <Table border=1 Height=130 Width=540 > <Tr> <Td> This is my firstcolumn in nested table</Td> <Td>This is my second column in nested table</Td> </Tr> </Table </Tr> </Table> </Body> </HTML> PLease let me know the solution Thanks in advance. Regards, Eswar Hi. I'm working on a fairly complicated web form and need to align input boxes horizontally across a lefthand column, a multi-row nested table, and a righthand column. This works OK (as long as cellpad and cellspace are set to 0) except that at one point I need to put text in the right-hand column instead of an input box, and this throws the alignment out. The simplified code below shows what I mean. As given below the boxes are aligned properly. But if you comment out the version A row and substitute the version B row, the alignment goes. Can anyone explain why this happens, and whether there's a way round it ? The form in question does have to be a table, by the way. Would be grateful for any suggestions ! Thanks Dedge <form> <table width='100%' cellspacing='0' cellpadding='0' border='0'> <tr> <td>Item name</td> <td rowspan='5'> <table cellspacing='0' cellpadding='0' border='0'> <tr> <td><input name='i1' id='i1' size='1' maxlength='1'></td> <td><input name='i2' id='i2' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i3' id='i3' size='1' maxlength='1'></td> <td><input name='i4' id='i4' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i5' id='i5' size='1' maxlength='1'></td> <td><input name='i6' id='i6' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> </table> </td> <td>Item name</td> <td><input name='ia' id='ia' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ib' id='ib' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--VERSION A--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--END OF VERSION A--> <!--VERSION B--> <!--<tr> <td>Item name</td> <td colspan='2' align='right'>SOME TEXT</td> </tr>--> <!--END OF VERSION B--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ie' id='ie' size='1' maxlength='1'></td> </tr> </table> </form> Hi guys & girls, I've got a table nested within a table row. There's a small gap I can't close at the top of the table (see image, attached). Within the table I have cell padding, but it's much more dramatic than I want at the top and bottom. Is there any way to fix these problems with HTML and inline CSS (it's going to be an HTML e-mail). This is for a client and due tomorrow, so any help would be awesome. Thank you. HTML Code: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="line-height:16px;">
<table width="600" border="0" bordercolor="#000000" cellspacing="0" cellpadding="0" style="border-top:1px solid #000000; border-left:1px solid #000000; border-right:1px solid #000000; border-bottom:1px solid #000000;">
<tr>
<td><img src="images/ACP9040057_email_ClinicalPsychologist_01.jpg" width="600" height="88" alt="For What Matters Most"></td>
</tr>
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0" style="padding:0; border:0">
<tr>
<td align="center" valign="top"><table width="570" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="359" align="left" valign="top"><p><font face="Arial, Helvetica, sans-serif" style="font-size:12px; text-align:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue porta tincidunt. Nullam et turpis lorem, sagittis adipiscing nunc. In orci orci, iaculis et sollicitudin ac, adipiscing vel magna. Nullam et orci in dui tristique ultricies. Donec ligula turpis, blandit eget egestas sed, semper eu elit. Nulla in dolor sapien. Suspendisse id nisi porttitor purus ullamcorper dictum. Mauris posuere libero massa.</font></p></td>
<td width="171" align="center" valign="middle"><table width="140" border="0" cellspacing="0" cellpadding="15">
<tr>
<td align="left" bgcolor="#b1c1c9"><font face="Arial, Helvetica, sans-serif" style="font-size:12px; font-weight:bold; line-height:16px; text-align:left;">Qualifications:</font><br />
<font face="Arial, Helvetica, sans-serif" style="font-size:12px; font-weight:normal; text-align:left;">To qualify you must be a U.S. citizen age 18–39 and enrolled in the United States or Puerto Rico.</font></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><font face="Arial, Helvetica, sans-serif" style="font-size:12px; font-weight:normal; text-align:left;">Give yourself the opportunity to concentrate on your education instead of the worries of accumulating debt. <a href="#">Click here</a> now to find out more.</font></td>
<td align="center" valign="top"><a href="#"><img src="images/go_button.jpg" width="171" height="60" alt="Go Button" border="0"></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr><td><img src="images/ACP9040057_email_ClinicalPsychologist_05.jpg" width="600" height="9" alt=""></td></tr>
<tr><td align="center" valign="top" style="padding:0;"><table width="570" border="0" vspace="0" align="center" cellpadding="10" cellspacing="0" style="line-height:10px; text-align:left; display:block; border-collapse: collapse;">
<tr><td align="left" valign="top"><p><font face="Arial, Helvetica, sans-serif" style="font-size:10px; line-height:10px; text-align:left;">If you no longer wish to receive email communication from the U.S. Air Force, please click <a href="#" target="_blank">here</a>.
<font face="Arial, Helvetica, sans-serif" style="font-size:10px; line-height:10px; text-align:left;">Your address will be removed from this email list.</font><br /><br />
Or send a request to:<br />
ddd<br />
ddd<br />
ddd</font></p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Hey Guys, I want to have a square coloured grey and within that square I want another sqaure coloured gray. I want the layout to be fluid so if I expand or contract the browser the inner square will still maintain the same distance from the outer square. See the image below: I have tried and tried but I just cannot get it to work. I want to avoid using tables and stick to divs tags. Does anyone know how I can do this ? i was wondering if it is possible to nest ssi within each other... so like for this scipt i got from dynamicdrive.com for a drop down menu... is it possible to use ssi in side of ssi and it still work? <html> <body> <script language="javascript"> function toggleDiv(divid){ if(document.getElementById(divid).style.display == 'none'){ document.getElementById(divid).style.display = 'block'; }else{ document.getElementById(divid).style.display = 'none'; } } </script> <table width="100%" align="left" cellspacing="1" cellpadding="0" class=table_bdr> <tr > <Td height="33" width="13%" align="left">CC</Td> <Td height="33" align="left" width="21%">Company name </Td> <Td height="33" align="right" width="14%">Clients</Td> <Td height="33" align="right" width="17%">Col1</Td> <Td height="33" align="right" width="17%">Col2</Td> <Td height="33" align="right" width="18%">Col3</Td> </tr> <tr > <Td height="20" width="13%" align="left">AB</Td> <Td height="20" align="left" width="21%">Company1 </Td> <Td height="20" align="right" width="14%" id="ss_report_link"><a href="javascript:;" onClick="toggleDiv('mydiv1');">12</a></Td> <Td height="20" align="right" width="17%">37</Td> <Td height="20" align="right" width="17%">14</Td> <Td height="20" align="right" width="18%">46</Td> </tr> <tr> <td colspan="6"> <div id="mydiv1" style="display:block; margin:0 0 0 0; padding:0 0 0 0; background:#C0E8FF"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <Td height="21" align="left" colspan="3" style="padding-left:130px" id=""><a href="#">Client1</a></Td> <Td height="21" align="right" width="17%">5</Td> <Td height="21" align="right" width="17%">1</Td> <Td height="21" align="right" width="18%">9</Td> </tr> <tr> <Td height="20" align="left" colspan="3" style="padding-left:130px" id=""><a href="#">Client2</a></Td> <Td height="20" align="right" width="17%">37</Td> <Td height="20" align="right" width="17%">12</Td> <Td height="20" align="right" width="18%">52</Td> </tr> <tr> <Td height="20" align="left" colspan="3" style="padding-left:130px" id=""><a href="#">Client3</a></Td> <Td height="20" align="right" width="17%">22</Td> <Td height="20" align="right" width="17%">17</Td> <Td height="20" align="right" width="18%">34</Td> </tr> <tr> <Td height="20" align="left" colspan="3" style="padding-left:130px" id=""><a href="#">Client4</a></Td> <Td height="20" align="right" width="17%">2</Td> <Td height="20" align="right" width="17%">1</Td> <Td height="20" align="right" width="18%">8</Td> </tr> </table> </div> </td> </tr> </table> </body> </html> This is my page (I have 14 columns actually. So every col gets less width than this). In Child table if I enter some lengthy value for Client name For ex: 'Client11111111111111111111111111111111111111111111' Every Column is moving right side. I dont want that. How to do that. I know this can be messy from time to time, but I believe this is the best way to lay out my page. This is for a report I'm producing. I have two columns on the left side of the information and the last two columns on the left that need to be visible at all times. There are a total of about 20 different columns. I have tried a few things but come to use three seperate tables, one on the left for the data that needs to be fixed there, one in the middle for data that can scroll and the last on the right for the other fixed data. I'm having trouble getting the table in the middle to scroll. Is this possible, and what code would help. The code involved is very lengthy currently, because I have the data in it. In the future the data will be generated by a seperate SAS program. Should I make this middle table an iFrame, or is it possible for it to scroll horizontally without using frames at all. Thanks for your help. I've only been using HTML for a couple of weeks, so apologies if this is a silly question. My website has quite a few common parts (eg menu line and footer), and the way I've currently got it set up these are defined on every page, so any change has to be edited into every page. What I would like to be able to do is define my menu in a separate file and have each HTML page reference it. That way I can just change the one file and that will be reflected in each HTML page. Does that make sense ? I know that I could use frames, but would prefer to do it this way if possible. Thanks We probably all know that if we run our HTML through the W3C validator, it will inform us if we've illegally nested one element inside another (e.g. placing a div within a span). Likewise, it will inform us if we've placed an element on the page but haven't used the correct containing element (e.g using a br, but not placing it within a p). What I'm looking for is some kind of documentation or reference guide that I can use, so I don't have to do a Google search every time I want to know if I'm correctly nesting elements! I would have thought that this would be defined by the XHTML schema at http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd. While this schema does define all the elements, it doesn't define how they are allowed to be nested in one another. Where can I find the documentation that defines correct nesting of elements? It must exist somewhere... you have 3 floating divs. "bottom" "top" and "middle". "top" is inside of "bottom" --> in this scenario, can "middle" div ever be above "bottom" div, but below "top" without being inside of "bottom" div? Code: <div id="bottom" style="position:absolute; top:100px; left:100px; width:200px; height:100px; z-index:1; background-color:#F00;"><h1>bottom</h1> <div id="top" style="position:absolute; top:100px; left:150px; width:200px; height:100px; z-index:3; background-color:#00F;"><h1>top</h1></div> </div> <div id="middle" style="position:absolute; top:150px; left:150px; width:200px; height:100px; z-index:2; background-color:#0F0;"><h1>middle</h1></div> Hello, I am new here and hope someone can help. I am creating a page where I need to have several nested lists. The 'numbering' is showing up correctly but the 'nested' lists are not indented. Can anyone take a look at the page and my source code and see if you can help me figure out what is wrong? go to http://www.prewrath.com/index2.html Thank you! bzig I have the html code: <div style="width: 100%; height:100%; background-color: orange;"><input type="text" style="border-style: solid;border-width: 1px;border-color:black;"/></div> In IE7 the input will start one pixel below the div, in Firefox it displays well. How can I get rid of the 1px in IE7 ? I am currently trying to create some nested lists to display the following... A...R...X B...S...Y C...T...Z (where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following... A B...R C...S...X .....T...Y ..........Z I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel=stylesheet href="links.css" type="text/css"> </head> <body> <div id="container"> <ul id="links-nav"> <li> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> <li> <ul> <li><a href="#">R</a></li> <li><a href="#">S</a></li> <li><a href="#">T</a></li> </ul> </li> <li> <ul> <li><a href="#">X</a></li> <li><a href="#">Y</a></li> <li><a href="#">Z</a></li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html> CSS Code: #container{
width:960px;
margin:0px auto;
border: 1px solid #000;
padding:20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
display:inline;
margin:0;
padding:0;
}
#links-nav li ul{
float:left;
padding:0;
width:168px;
padding: 0px 10px;
}
I am having a problem that I can not figure out why this is happening. I have two divs one named content and one named welcome. The welcome div is nested inside the content div. Whenever I change the margin top for the welcome div it also changes the margin top of the content div it is nested in. How can I keep it where the content div is fixed and doesn't move no matter where I set the margin top for the welcome div? Here is the HTML.... Code: <div id="content">
<div class="welcome">
<p> Coming Soon, a new and improved Texas Camping Forum for Fall 2008!!!<br>
Bookmark us and check back often....</p>
</div>
</div>
Here is the CSS... Code: #content {
margin: 5px 0 0 140px;
text-align: center;
width: 630px;
border-left: 1px solid #F4F4F4;
}
.welcome {
margin-top: 25px;
}
Here is the link to the site.... http://development.mesquitechristmas.com/index.html Any ideas or suggestions as why this is happening? -Thanks Hi. I need to find a way of displaying some thumbnail photos in a table cell across a bunch of different tempates. I put a new thumbnail in the group about once a week, but I dont want to edit every template I have. Is is possible to have code in the table cell that say's get thumbnails.htm and put them in this cell That way I can just edit thumbnails.htm and it will show up on all the templatess/pages I'm sure it can be done, but I'm not sure how to go about it. Thanks Leroy Hi, I am using CSS with nested tables. There are two <td> fields in the innermost table, and are having links inside them. When I open the page in IE, and move the mouse over to the first cell, the whole cell becomes active. But the second cell becomes active only if I take the mouse on the text. Why this inconsistency? Can anyone help? Thanks. Please refer attached html and css files |
|||||||